Skip to content

Instantly share code, notes, and snippets.

@huytd

huytd/minimal-firefox.md

Last active December 17, 2023 06:36
Show Gist options
  • Save huytd/ee1436c6d4f3cbe34623afc9bdd204e3 to your computer and use it in GitHub Desktop.
Save huytd/ee1436c6d4f3cbe34623afc9bdd204e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
userChrome.css
/* Taken from here: https://github.com/tolgaerok/nixos-kde/blob/70df8ff0da18022e28a73d4242f917320c78e32d/core/programs/internet/web-browsers/userChrome.css#L34 */
:root {
--NavbarWidth: 6;
--TabsHeight: 36;
--TabsBorder: 8;
--NavbarHeightSmall: calc(var(--TabsHeight) + var(--TabsBorder));
}
#tabbrowser-tabs:not([noshadowfortests])
.tab-background:is([selected], [multiselected]) {
box-shadow: none !important;
border: 1px solid
var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)) !important;
}
#tabbrowser-tabs .tab-background {
border-radius: 8px !important;
overflow: hidden !important;
}
:root {
--lwt-tab-line-color: #eeeeee !important;
}
#back-button,
#forward-button {
display: none !important;
} /* Removes the forward/back button */
:root #nav-bar {
margin-top: calc(
var(--TabsHeight) * -1px - var(--TabsBorder) * 1px
) !important;
height: calc(var(--TabsHeight) * 1px + var(--TabsBorder) * 1px);
}
#TabsToolbar {
margin-left: calc(1325px / 100 * var(--NavbarWidth)) !important;
}
#nav-bar {
margin-right: calc(
100vw - calc(1325px / 100 * var(--NavbarWidth))
) !important;
vertical-align: center !important;
}
#urlbar-container {
min-width: 0px !important;
flex: auto !important;
}
toolbarspring {
display: none !important;
}
#nav-bar,
#PersonalToolbar {
background-color: #0000 !important;
background-image: none !important;
box-shadow: none !important;
}
#nav-bar {
margin-left: 3px;
}
.tab-background,
.tab-stack {
min-height: calc(var(--TabsHeight) * 1px) !important;
}
/* Removes rounding from the top corners, */
#navigator-toolbox {
appearance: none !important;
border-radius: 0 !important;
}
#navigator-toolbox-background {
background-color: Field !important;
background-image: none !important;
appearance: none !important;
border-radius: 0 !important;
}
:root {
--tabpanel-background-color: var(--toolbar-field-background-color) !important;
} /* Removes flash before loading pages */
/* Removes annoying buttons and spaces */
#firefox-view-button,
#save-to-pocket-button,
#tracking-protection-icon-container,
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
display: none !important;
}
#tabbrowser-tabs {
border-inline-start-width: 0 !important;
}
/* Makes some buttons nicer */
#PanelUI-menu-button,
#unified-extensions-button,
#reload-button,
#stop-button {
padding: 2px !important;
}
#reload-button,
#stop-button {
margin: 1px !important;
}
/* Removes space after pinned tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !important;
}
/* X-button on the tabs */
.tabbrowser-tab:not(:hover) .tab-close-button {
opacity: 0% !important;
transition: 0.3s !important;
display: -moz-box !important;
}
.tab-close-button[selected]:not(:hover) {
opacity: 45% !important;
transition: 0.3s !important;
display: -moz-box !important;
}
.tabbrowser-tab:hover .tab-close-button {
opacity: 50%;
transition: 0.3s !important;
background: none !important;
cursor: pointer;
display: -moz-box !important;
}
.tab-close-button:hover {
opacity: 100% !important;
transition: 0.3s !important;
background: none !important;
cursor: pointer;
display: -moz-box !important;
}
.tab-close-button[selected]:hover {
opacity: 100% !important;
transition: 0.3s !important;
background: none !important;
cursor: pointer;
display: -moz-box !important;
}
/* Removes annoying border */
#navigator-toolbox {
border: none !important;
}
/* Titlebar button fix#6322 */
.titlebar-buttonbox-container {
-moz-box-ordinal-group: auto;
}
.titlebar-button > .toolbarbutton-icon:-moz-lwtheme {
-moz-context-properties: fill, stroke !important;
}
.titlebar-button > .toolbarbutton-icon {
display: flex !important;
height: unset !important;
width: unset !important;
}
.titlebar-buttonbox {
appearance: none !important;
}
/* Titlebar buttons - Minimize button */
.titlebar-min {
fill: var(--toolbarbutton-icon-fill) !important;
-moz-context-properties: fill !important;
list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Crect transform='matrix(3.7795 0 0 3.7795 -39.998 -533.51)' x='14.552' y='145.13' width='2.6458' height='.26458' ry='3.1658e-6' fill='context-fill' style='paint-order:stroke fill markers'/%3E%3C/svg%3E%0A") !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
height: 100% !important;
align-content: center !important;
width: 56px !important;
appearance: none !important;
}
.titlebar-min:hover {
background-color: color-mix(
in srgb,
currentColor 17%,
transparent
) !important;
}
.titlebar-min:active {
background-color: color-mix(
in srgb,
currentColor 30%,
transparent
) !important;
}
/* Titlebar buttons - Maximize button */
.titlebar-max {
fill: var(--toolbarbutton-icon-fill) !important;
-moz-context-properties: fill !important;
list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath transform='matrix(3.7795 0 0 3.7795 -101 -533.51)' d='m30.692 143.81v2.6458h2.6458v-2.6458zm0.26458 0.26459h2.1167v2.1167h-2.1167z' fill='context-fill' style='paint-order:stroke fill markers'/%3E%3C/svg%3E") !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
height: 100% !important;
align-content: center !important;
width: 56px !important;
appearance: none !important;
}
.titlebar-max:hover {
background-color: color-mix(
in srgb,
currentColor 17%,
transparent
) !important;
}
.titlebar-max:active {
background-color: color-mix(
in srgb,
currentColor 30%,
transparent
) !important;
}
/* Titlebar buttons - Restore button */
.titlebar-restore {
fill: var(--toolbarbutton-icon-fill) !important;
-moz-context-properties: fill !important;
list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath d='m17.001 10.016v2h-2v8.0001h8.0001v-2h2v-8.0001zm0.99998 1h6v6h-0.99998v-4.9999h-4.9999zm-2 2h6v6h-6z' fill='context-fill' stroke-width='3.7795' style='paint-order:stroke fill markers'/%3E%3C/svg%3E%0A") !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
height: 100% !important;
width: 56px !important;
appearance: none !important;
}
.titlebar-restore:hover {
background-color: color-mix(
in srgb,
currentColor 17%,
transparent
) !important;
}
.titlebar-restore:active {
background-color: color-mix(
in srgb,
currentColor 30%,
transparent
) !important;
}
/* Titlebar buttons - Close button */
.titlebar-close:not(:hover, :active) {
fill: var(--toolbarbutton-icon-fill) !important;
-moz-context-properties: fill !important;
list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath transform='matrix(3.7796 0 0 3.7795 -165 -533.51)' d='m47.718 143.71-0.18707 0.18706 1.2294 1.2294-1.2294 1.2289 0.18707 0.18707 1.2294-1.2289 1.2289 1.2289 0.18707-0.18707-1.2289-1.2289 1.2289-1.2294-0.18707-0.18706-1.2289 1.2294z' fill='context-fill' style='paint-order:stroke fill markers'/%3E%3C/svg%3E%0A") !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
height: 100% !important;
width: 56px !important;
appearance: none !important;
}
.titlebar-close:hover {
background-color: #f44 !important;
fill: var(--toolbarbutton-icon-fill) !important;
-moz-context-properties: fill !important;
list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath transform='matrix(3.7796 0 0 3.7795 -165 -533.51)' d='m47.718 143.71-0.18707 0.18706 1.2294 1.2294-1.2294 1.2289 0.18707 0.18707 1.2294-1.2289 1.2289 1.2289 0.18707-0.18707-1.2289-1.2289 1.2289-1.2294-0.18707-0.18706-1.2289 1.2294z' fill='context-fill' style='paint-order:stroke fill markers;fill:%23ffffff' /%3E%3C/svg%3E%0A") !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
height: 100% !important;
width: 56px !important;
appearance: none !important;
}
.titlebar-close:active {
background-color: #f33 !important;
fill: var(--toolbarbutton-icon-fill) !important;
-moz-context-properties: fill !important;
list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath transform='matrix(3.7796 0 0 3.7795 -165 -533.51)' d='m47.718 143.71-0.18707 0.18706 1.2294 1.2294-1.2294 1.2289 0.18707 0.18707 1.2294-1.2289 1.2289 1.2289 0.18707-0.18707-1.2289-1.2289 1.2289-1.2294-0.18707-0.18706-1.2289 1.2294z' fill='context-fill' style='paint-order:stroke fill markers;fill:%23ffffff' /%3E%3C/svg%3E%0A") !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
height: 100% !important;
width: 56px !important;
appearance: none !important;
}
/* Alltabs button */
#alltabs-button > .toolbarbutton-badge-stack {
display: none;
}
/* Makes the sidebar a little nicer */
#sidebar-splitter {
display: none;
}
#sidebar-header {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
/* The thing in the bottom with links */
#statuspanel-label {
background-color: var(--toolbar-field-background-color) !important;
border-color: transparent !important;
border-radius: 5px !important;
color: currentColor !important;
margin: 0 0 2.5px 2px !important;
padding: 5px !important;
opacity: 100%;
}
/* Removes the annoying rainbow thing from the hamburger */
#appMenu-fxa-separator {
border-image: none !important;
}
/* Customization navbar fix */
#wrapper-urlbar-container {
width: 100px !important;
}
[title="Flexible Space"] {
display: none !important;
}
#nav-bar {
position: initial !important;
transition: all 0.3s;
}
#nav-bar #urlbar-input-container #identity-box,
#nav-bar #urlbar-input-container #page-action-buttons {
display: none !important;
}
#nav-bar #urlbar-input-container .urlbar-input-box {
opacity: 0 !important;
}
#nav-bar:focus-within {
width: 96% !important;
margin: 0 auto !important;
}
#nav-bar:focus-within #urlbar-input-container #identity-box,
#nav-bar:focus-within #urlbar-input-container #page-action-buttons {
display: flex !important;
}
#nav-bar:focus-within #urlbar-input-container .urlbar-input-box {
opacity: 1 !important;
}
#unified-extensions-button {
position: absolute;
top: 5px;
left: 37px;
}
#PanelUI-button {
position: absolute;
top: 5px;
left: 5px;
}
#urlbar-background,
#urlbar-container {
border-radius: 8px !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment