Bali10050
commented
1 year ago Does this work?
:root{--WindowDraggingFromNewtabButton: no-drag} /* For windows *//*
:root{--WindowDraggingFromNewtabButton: drag !important} /* For linux */
/* #reload-button, #stop-button{display:none !important} /* Removes the reload/stop button */
/* #back-button, #forward-button{display: none !important} /* Removes the forward/back button */
/* .tab-close-button{display: none !important} /* Removes the x-button from the tabs */
/* #tabs-newtab-button, #new-tab-button{opacity: 0 !important} /* Hide newtab button */
#navigator-toolbox{background-image: url("./Background.png"), url("./NavbarBackground.png")} /* Custom background -- Also check userContent.css */
:root{
--tab-border-radius: 3px!important; /* Tab border radius -- Changes the tabs rounding *//* Default: 3px */
--NavbarWidth: 43; /* Default values: 36 - 43 */
--TabsHeight: 36; /* Minimum: 30 *//* Default: 36 */
--TabsBorder: 8; /* Doesnt do anything on small layout *//* Default: 8 */
--NavbarHeightSmall: calc(var(--TabsHeight) + var(--TabsBorder)) /* Only on small layout *//* Default: calc(var(--TabsHeight) + var(--TabsBorder)) *//* Default as a number: 44 */}
@media screen and (min-width:1325px) /* Only the tabs space will grow from here */
{: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) + 72px)) !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}}
@media screen and (min-width:850px) and (max-width:1324px) /* Both the tabs space and the navbar will grow */
{: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((var(--NavbarWidth) * 1vw) + 72px) !important} #nav-bar{margin-right: calc(100vw - calc(var(--NavbarWidth) * 1vw)) !important; vertical-align: center !important} #urlbar-container{min-width: 0px !important; flex: auto !important} toolbarspring{display: none !important} #TabsToolbar, #nav-bar{transition: margin-top .25s !important}}
@media screen and (max-width:849px) /* The window is not enough wide for a one line layout */
{:root #nav-bar{padding: 0 80px 0 5px!important; height: calc(var(--NavbarHeightSmall) * 1px) !important} toolbarspring{display: none !important;} #TabsToolbar, #nav-bar{transition: margin-top .25s !important}}
#nav-bar, #PersonalToolbar{background-color: #0000 !important;background-image: none !important; box-shadow: none !important} #nav-bar{margin-left: 75px;} .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}
#navigator-toolbox-background:-moz-window-inactive{filter: contrast(90%);} /* Fades window while not in focus */
: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;}
/* Newtab hack */
#tabs-newtab-button, #new-tab-button{transition: .3s !important;color: transparent !important; fill: FieldText !important; background: none !important; opacity: 20%; padding-right: 20px !important; padding-left: 4px !important; -moz-window-dragging: var(--WindowDraggingFromNewtabButton)}
#tabs-newtab-button:hover, #new-tab-button:hover{transition: .3s !important; color: transparent !important; fill: FieldText !important; opacity: 90%; padding-right: 20px !important; background: none !important; padding-left: 4px !important; -moz-window-dragging: var(--WindowDraggingFromNewtabButton)}
#tabs-newtab-button > .toolbarbutton-icon , #new-tab-button > .toolbarbutton-icon{ background: none !important;}
/* Removes urlbar border/background */
#urlbar-background{border: none !important; outline: none !important; transition: .15s !important;}
/* Cool animation on tab/bookmark icons */
.tabbrowser-tab:not([pinned]):not([selected]) .tab-icon-image ,.bookmark-item .toolbarbutton-icon{opacity: 0!important; transition: .15s !important; width: 0!important; padding-left: 16px!important}
.tabbrowser-tab:not([pinned]):hover .tab-icon-image,.bookmark-item:hover .toolbarbutton-icon{opacity: 100!important; transition: .15s !important; display: inline-block!important; width: 16px!important; padding-left: 0!important}
.tabbrowser-tab:not([hover]) .tab-icon-image,.bookmark-item:not([hover]) .toolbarbutton-icon{padding-left: 0!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: .3s !important; display: -moz-box !important;}
.tab-close-button[selected]:not(:hover){opacity: 45% !important; transition: .3s !important; display: -moz-box !important;}
.tabbrowser-tab:hover .tab-close-button{opacity: 50%; transition: .3s !important; background: none !important; cursor: pointer; display: -moz-box !important;}
.tab-close-button:hover{opacity: 100% !important; transition: .3s !important; background: none !important; cursor: pointer; display: -moz-box !important;}
.tab-close-button[selected]:hover{opacity: 100% !important; transition: .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 {display: flex !important; height:unset !important; width: unset !important;}
.titlebar-buttonbox{appearance: none !important}
/* Alltabs button */
#TabsToolbar-customization-target {counter-reset: tabCount}.tabbrowser-tab {counter-increment: tabCount}
#alltabs-button>.toolbarbutton-badge-stack>.toolbarbutton-icon {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='translate(49,-60)' d='m-29 78.888-7.0703-7.0703 0.70703-0.70703 6.3633 6.3633 6.3633-6.3633 0.70703 0.70703-6.3633 6.3633z' fill='currentColor' style='paint-order:stroke fill markers'/%3E%3C/svg%3E"); overflow: hidden!important; padding: 0!important; border: 0!important; width: 40px!important; height: calc(100% + 1px)!important; margin: 0 -2px 0 0!important; transform: translate(20%,15%); padding: 0 3px}
#alltabs-button>.toolbarbutton-badge-stack {position: relative!important; border-radius: 0!important; padding: 0!important; border: 0!important; height: calc(100% + 1px)!important; width: 56px!important; margin: 0-2px 0 0!important}
#alltabs-button>.toolbarbutton-badge-stack::before {content: counter(tabCount); filter:contrast(500%)grayscale(100%); color: -moz-DialogText !important; position: absolute; bottom: 25%; left: 50%; transform: translate(-50%,-30%); padding: 0 3px}
/* Removes the background from the urlbar while not in use */
#urlbar:not(:hover):not([breakout][breakout-extend])>#urlbar-background {box-shadow: none!important; background: #0000 !important}
/* Urlbar popup thing */
.urlbarView-row{display: none !important}
.urlbarView-row:nth-child(1), .urlbarView-row:nth-child(2){display: flex !important}
.search-panel-one-offs-header.search-panel-header{display: none !important}
#urlbar-anon-search-settings{margin-inline-start: 0px !important}
/* Makes the space between the reload button and the urlbar less akwardly large */
#urlbar-container{margin-left: 1px !important}
/* 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;}
/* Navbar buttons order */
#nav-bar{direction: rtl;} #urlbar-container, #customizationui-widget-panel{direction: ltr !important;}
#forward-button{order: -1 !important;}
#back-button{padding-right: 2px !important;} #forward-button{padding-right: 8px !important;}
/* Rounded corner in pages */
#navigator-toolbox{padding-bottom: 10px;}
#navigator-toolbox[style*="margin-top: -54px;"]{margin-top: -44px !important}
.browserStack>browser{margin: -10px 0 0 0!important; border-radius: 10px 10px 0 0; transition: border-radius .2s !important}
.browserStack:nth-last-child(3n)>browser, .browserStack:nth-last-child(4n)>browser{margin: -10px 0 !important; border-radius: 10px !important; transition: border-radius .2s !important}
findbar{border-radius: 10px 10px 0 0 !important; margin-top: -10px; z-index: 2; padding-bottom: -10px;}
[inFullscreen] .browserStack>browser{margin: -10px 0 0 0!important; border-radius: 0 !important; transition: border-radius .7s !important}
[inFullscreen] .browserStack:nth-last-child(3n)>browser, .browserStack:nth-last-child(4n)>browser{margin: -10px !important; transition: border-radius .7s !important}
/* Devtools */
.devtools-horizontal-splitter{margin-top: 7px !important;margin-bottom:-12px !important;opacity: 0;}
.devtools-side-splitter{opacity: 0;}
.devtools-toolbox-side-iframe{margin-top: -10px; border-radius: 10px;}
#customization-panelWrapper {max-width: 30em!important} /* Fixes the customization page */
#customization-container > *{margin-top: -10px; background-color: var(--toolbar-field-background-color) !important} /* Customizes the customization page */
#urlbar:not([open]){color: currentColor!important} #urlbar[open]{color: var(--toolbar-field-focus-color)} /* Fixes the urlbar color on some themes */
/* Makes sidebars nicer */
#sidebar-box{margin-top: -10px !important; border-radius: 0 10px 0 0!important; z-index: 1}
#sidebar-box[positionend="true"]{border-radius: 10px 0 0 0!important}
#sidebar-box > *{background-image:none;}
/* Drop menus */
[position="bottomright topright"]{--panel-border-radius: 0 5px 5px 5px!important}
[position="bottomleft topleft"]{--panel-border-radius: 5px 0 5px 5px!important}
[part="content"]{border: none !important;}
.toolbarbutton-1[open]{--toolbarbutton-border-radius: 4px 4px 0 0!important;}
[class*="identity-color"] > * > * .tab-context-line{border-radius: 0 0 5px 5px !important} /* Identity-color */
/* Private tabs */
[privatebrowsingnewindicator=""] #PanelUI-menu-button > .toolbarbutton-badge-stack{
list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --%3E%3Csvg viewBox='0 0 20 20' width='20' height='20' version='1.1' id='svg10' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs14' /%3E%3Cpath id='path4' d='M 4.4607598,4.7745347 C 2.8049552,4.7515627 1.1522018,5.4691193 0.08042091,6.8761599 -0.16625285,7.8508546 0.21338341,11.450255 0.42938959,12.016939 0.86273544,14.303671 2.732398,16.02487 4.9737961,16.02487 c 1.1186988,0 2.1336268,-0.446805 2.9349832,-1.161493 L 8.395773,14.444094 a 2.4174054,2.4174054 0 0 1 3.138115,-0.02344 l 0.734397,0.606788 v -0.0026 c 0.772021,0.621352 1.717989,1.002634 2.752686,1.002634 2.240064,0 4.109726,-1.721199 4.544406,-4.007931 C 19.78005,11.450192 20.174354,7.8668551 19.914346,6.8761599 18.008957,4.3747545 14.266945,4.0537862 11.937545,6.1938479 L 10.635423,7.3918003 H 9.3593434 L 8.0572214,6.1938479 C 7.0375252,5.2575709 5.7486078,4.7924021 4.4607598,4.7745347 Z m 1.0390935,3.6954225 c 0.9293602,0 1.7557821,0.389533 2.2891309,0.992217 a 0.86669252,0.86669252 0 0 1 0,1.1302418 c -0.5333488,0.602685 -1.3597707,0.989614 -2.2891309,0.989614 -0.9293601,0 -1.7557821,-0.386929 -2.2891308,-0.989614 a 0.86669252,0.86669252 0 0 1 0,-1.1302418 c 0.5333487,-0.602684 1.3597707,-0.992217 2.2891308,-0.992217 z m 9.0002687,0 c 0.929359,0 1.755781,0.389533 2.289131,0.992217 a 0.86669252,0.86669252 0 0 1 0,1.1302418 c -0.53335,0.602685 -1.359772,0.989614 -2.289131,0.989614 -0.92936,0 -1.755782,-0.386929 -2.289131,-0.989614 a 0.86669252,0.86669252 0 0 1 0,-1.1302418 c 0.533349,-0.602684 1.359771,-0.992217 2.289131,-0.992217 z' style='fill:currentColor;stroke-width:1.33337' /%3E%3C/svg%3E%0A");}
#private-browsing-indicator-with-label{display: none}
/* Notification */
#tab-notification-deck .container.infobar{background: -moz-Dialog !important}
#tab-notification-deck .notificationbox-stack{background: transparent !important}
/* Customization navbar fix */
#wrapper-urlbar-container{width: 100px !important}
[title="Flexible Space"]{display: none !important}
/* Fullscreen thing */
#fullscreen-warning{border: none !important; background: -moz-Dialog !important}
/* Macos custom */
#nav-bar{left: 72px !important}
evscye
robinrepka
This is my favorite minimal Firefox theme, and I just switched to it on Windows and eagerly tried it on Mac as well. The only issue that I've found so far is that on Mac there just isn't any sort of way to close it besides MacOSs built in menu bar. This doesn't make it unusable, but it is slightly inconvenient. Would you consider making it so we can swap the buttons on Mac?