├── Brave-Fox ├── Brave Button Icons.css ├── Brave-Fox Images │ ├── Back Button.svg │ ├── Bookmark Filled.svg │ ├── Bookmark.svg │ ├── Close Tab.svg │ ├── Forward Button.svg │ ├── Lock.svg │ ├── Menu.svg │ ├── New Tab.svg │ ├── Plugins.svg │ ├── Reload.svg │ ├── Search.svg │ └── Warning.svg ├── Fancy Animation Zone.css ├── Import.css ├── Optionals.css ├── Private Browsing │ ├── Brave Incognito Colours.css │ └── Brave Incognito New Tab.css ├── Tabs │ ├── Close Button Antics.css │ ├── Murder Proton Tab Spacing.css │ ├── Sound Playing.css │ └── Tab Shapes.css └── Toolbar.css ├── README.md └── Remove Overflow.css /Brave-Fox/Brave Button Icons.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Brave Button Icons ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Makes Back & Forward Buttons resemble that of Brave Browser ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 9 | ║ Notable Help ║ u/It_Was_The_Other_Guy ║ 10 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 11 | */ 12 | 13 | 14 | /* Change Forward Button */ 15 | #forward-button{ list-style-image: url("Brave-Fox Images/Forward Button.svg") !important; } 16 | 17 | /* Change Back Button */ 18 | #back-button{ list-style-image: url("Brave-Fox Images/Back Button.svg") !important; } 19 | 20 | /* Change Reload Button */ 21 | #reload-button{ list-style-image: url("Brave-Fox Images/Reload.svg") !important; } 22 | 23 | /* Change Bookmark Icon */ 24 | #star-button { list-style-image: url("Brave-Fox Images/Bookmark.svg") !important; } 25 | #star-button[starred] { list-style-image: url("Brave-Fox Images/bookmark Filled.svg") !important; } 26 | 27 | /* Change Menu Icon */ 28 | #PanelUI-menu-button > stack:nth-child(1) > image:nth-child(1) { 29 | list-style-image: url("Brave-Fox Images/Menu.svg") !important; 30 | height: 12.5px; 31 | align-self: center; 32 | } 33 | /* Make Menu Icon Box Normal Sized */ 34 | #PanelUI-menu-button > stack:nth-child(1){ 35 | height: 26px !important; 36 | width: 26px !important; 37 | } 38 | 39 | /* Change Plugins Icon */ 40 | #nav-bar-overflow-button > image:nth-child(1), 41 | #add-ons-button > image:nth-child(1) { 42 | list-style-image: url("Brave-Fox Images/Plugins.svg") !important; } 43 | 44 | 45 | /* Make Reload Slightly Bigger */ 46 | .reload-button.toolbarbutton-1 { 47 | padding: 4.7px !important; 48 | } 49 | 50 | /* New Tab Button */ 51 | #tabs-newtab-button, 52 | #new-tab-button { 53 | list-style-image: url("Brave-Fox Images/New Tab.svg") !important; 54 | } 55 | 56 | /* Change Search Button */ 57 | #urlbar[pageproxystate="invalid"] #identity-icon, 58 | .searchbar-search-icon, 59 | #PopupAutoCompleteRichResult .ac-type-icon[type="keyword"], 60 | #PopupAutoCompleteRichResult .ac-site-icon[type="searchengine"], 61 | #appMenu-find-button, 62 | #panelMenu_searchBookmarks { 63 | list-style-image: url("Brave-Fox Images/Search.svg") !important; 64 | } 65 | 66 | /* Change Close Button */ 67 | .tab-close-button { 68 | list-style-image: url("Brave-Fox Images/Close Tab.svg") !important; 69 | width: 16px !important; 70 | height: 16px !important; 71 | margin: 0 !important; 72 | padding: 0 !important; 73 | } 74 | 75 | /* Lock Icon */ 76 | #identity-icon { 77 | list-style-image: url("Brave-Fox Images/Lock.svg") !important; 78 | width: 16px !important; 79 | margin: 0 !important; 80 | padding: 0 !important; 81 | } 82 | 83 | /* Lock Icon In Security Dropdown */ 84 | #identity-popup[connection^="secure"] .identity-popup-security-connection { 85 | background-image: url("Brave-Fox Images/Lock.svg") !important; 86 | } 87 | 88 | /* Change Warning Icon */ 89 | #identity-box[pageproxystate="valid"].notSecure #identity-icon, 90 | #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, 91 | #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon, 92 | #identity-box[pageproxystate="valid"].weakCipher #identity-icon, 93 | #identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon, 94 | #identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon, 95 | #identity-box[pageproxystate="valid"].certUserOverridden #identity-icon, 96 | #identity-box[pageproxystate="valid"].certErrorPage #identity-icon 97 | { 98 | list-style-image: url("Brave-Fox Images/Warning.svg") !important; 99 | width: 18px !important; 100 | margin: 0 2px 0 1px !important; 101 | padding: 2px !important; 102 | } 103 | 104 | /* Warning Icon In Security Dropdown */ 105 | .identity-popup-security-connection { 106 | background-image: url("Brave-Fox Images/Warning.svg") !important; 107 | padding-left: 5px !important; 108 | } -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Back Button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Bookmark Filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Close Tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Forward Button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/New Tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Plugins.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Brave-Fox/Brave-Fox Images/Warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Brave-Fox/Fancy Animation Zone.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Fancy Animation Zone ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Makes Hover States Sexy ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 9 | */ 10 | 11 | 12 | /* Makes Hovering Over Inactive Tabs Have A Small Fade In */ 13 | /* Thanks u/poorman3333 */ 14 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) { 15 | transition: 300ms !important; 16 | } 17 | 18 | /* Toolbar Button Fade In Animations */ 19 | /* Thanks u/9hp71n */ 20 | 21 | /* Shield Icon */ 22 | #tracking-protection-icon-container:not([disabled="true"], [checked], [open], :active), 23 | 24 | /* Lock Icon */ 25 | #identity-icon-box:not([disabled="true"], [checked], [open], :active), 26 | 27 | /* Extentions & Menu Button */ 28 | toolbar .toolbarbutton-badge-stack:not([disabled="true"], [checked], [open], :active), 29 | 30 | /* Back / Forward / Refresh */ 31 | toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active) > .toolbarbutton-icon, 32 | 33 | /* Star / Bookmark Button */ 34 | .urlbar-page-action, #urlbar-go-button, .search-go-button:not([disabled="true"], [checked], [open], :active) { 35 | transition:background linear 250ms; 36 | } 37 | 38 | /* Pin / Un-Pin Tab Animation */ 39 | /* Thanks u/It_Was_The_Other_Guy */ 40 | .tabbrowser-tab[fadein]{transition: min-width 250ms linear, max-width 250ms linear !important;} -------------------------------------------------------------------------------- /Brave-Fox/Import.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Main Import ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Main Import For Brave-Fox, Allows User To Turn Stuff On & Off ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css & userContent.css ║ 8 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 9 | */ 10 | 11 | 12 | @import url("Optionals.css"); 13 | @import url("Brave Button Icons.css"); 14 | @import url("Toolbar.css"); 15 | @import url("Tabs/Tab Shapes.css"); 16 | @import url("Tabs/Sound Playing.css"); 17 | @import url("Tabs/Close Button Antics.css"); 18 | @import url("Tabs/Murder Proton Tab Spacing.css"); 19 | @import url("Private Browsing/Brave Incognito Colours.css"); 20 | @import url("Private Browsing/Brave Incognito New Tab.css"); 21 | @import url("Fancy Animation Zone.css"); 22 | 23 | /* No Overflow Version */ 24 | @import url("Remove Overflow.css"); -------------------------------------------------------------------------------- /Brave-Fox/Optionals.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Optionals ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Optional Things You Can Turn On/Off ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 9 | */ 10 | 11 | 12 | /* Makes Close Tab Button Have Even Padding On Right */ 13 | /* On By Default */ 14 | .tab-close-button { 15 | margin-inline-end: 0px !important; 16 | } 17 | 18 | 19 | 20 | /* Adds Space To URL Bar Similar To That Of Brave */ 21 | /* On By Default */ 22 | :root[sizemode="maximized"] #urlbar-container{ 23 | margin-right: 120px !important; 24 | margin-left: 120px !important; 25 | } 26 | 27 | 28 | 29 | /* Terminate New Tab FavIcon */ 30 | /* On By Default */ 31 | .tabbrowser-tab[label^="New Tab"] .tab-icon-image { 32 | display: none; 33 | } 34 | 35 | 36 | 37 | /* Close Tab Icon Fade Animation */ 38 | /* On By Default */ 39 | .tab-close-button, 40 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]), 41 | .tab-icon-sound 42 | { 43 | transition-property: fill-opacity, background-color !important; 44 | transition-duration: .15s !important; 45 | transition-timing-function: var(--ease-basic) !important; 46 | } 47 | 48 | 49 | 50 | /* Hide Enhanced Tracking Button */ 51 | /* On By Default */ 52 | #tracking-protection-icon-container { 53 | display: none !important; 54 | } 55 | 56 | 57 | 58 | /* Always Show Bookmark Button */ 59 | #star-button-box { 60 | display: flex !important; 61 | } -------------------------------------------------------------------------------- /Brave-Fox/Private Browsing/Brave Incognito Colours.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Brave Incognito Colours ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Changes Incognito Tabs To Match That Of Brave Browser. ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 9 | ║ Notable Help ║ u/qaz69wsx, u/black7375 & u/It_Was_The_Other_Guy ║ 10 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 11 | */ 12 | 13 | 14 | :root[privatebrowsingmode="temporary"] { 15 | 16 | /* Toolbar */ 17 | --toolbar-bgcolor: #322560 !important; 18 | 19 | /* Behind Tabs */ 20 | --lwt-accent-color: #19162F !important; 21 | 22 | /* Search Bar Colour */ 23 | --toolbar-field-background-color: #0B0724 !important; 24 | 25 | /* Turns Tab Into Same Colour As Toolbar */ 26 | --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important; 27 | 28 | /* What Happens When You Hover Over A Button */ 29 | --toolbarbutton-hover-background: rgba(255, 255, 255, 0.05) !important; 30 | 31 | /* Click On A Button, This Colour Is What The Button Will Be */ 32 | --toolbarbutton-active-background: #4D4175 !important; 33 | 34 | /* Click A Button With A Context Menu? This Is The Menu Colour */ 35 | --arrowpanel-background: #1D1935 !important; 36 | 37 | /* Tool Bar Context Menu Outline */ 38 | --arrowpanel-border-color: #322560 !important; 39 | 40 | /* Line Between Toobar And Site */ 41 | --chrome-content-separator-color: none !important; 42 | 43 | /* Colour Of The Expanded Address Bar */ 44 | --toolbar-field-focus-background-color:var(--toolbar-field-background-color) !important; 45 | 46 | /* Hovering Over The Autocomplete Items Colour */ 47 | --autocomplete-popup-hover-background: #1D1935 !important; 48 | 49 | /* Clicking On Said Autocomplete Item Colour */ 50 | --autocomplete-popup-highlight-background: rgba(65, 48, 117, 0.5) !important; 51 | } 52 | 53 | /* Right Click Menu */ 54 | :root[privatebrowsingmode="temporary"] menupopup { 55 | --menuitem-hover-background-color: #413D54 !important; 56 | --menu-background-color: #1D1935 !important; 57 | --menu-color: #eeeeee !important; 58 | --menuitem-disabled-hover-background-color: #ffffff00 !important; 59 | --menu-disabled-color: #ffffff50 !important; 60 | --menu-border-color: #322560 !important; 61 | } 62 | 63 | /* Search Bar Popout Outline Killer */ 64 | #urlbar[open] > #urlbar-background { 65 | border-color: #ffffff00 !important; 66 | } 67 | 68 | /* No More Icon Incognito Icon */ 69 | .accessibility-indicator, .private-browsing-indicator{ 70 | display: none !important; 71 | } 72 | 73 | /* URL Bar Fade Animation On Hover */ 74 | /* Thanks u/It_Was_The_Other_Guy */ 75 | :root[privatebrowsingmode="temporary"] #urlbar-input-container:hover { 76 | background-color: #1F1B36 !important; 77 | } -------------------------------------------------------------------------------- /Brave-Fox/Private Browsing/Brave Incognito New Tab.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Brave Incognito New Tabs ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Changes Incognito New Tabs To Match That Of Brave Browser. ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userContent.css ║ 8 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 9 | ║ Notable Help ║ u/It_Was_The_Other_Guy ║ 10 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 11 | */ 12 | 13 | 14 | /* Makes Private New Tab Look More Like Brave */ 15 | /* Thanks u/It_Was_The_Other_Guy */ 16 | html.private{ background-image: linear-gradient(rgb(56, 25, 128), rgb(12, 4, 30)) } 17 | 18 | /* Removes Search Bar From Private Windows */ 19 | .search-handoff-button, 20 | .search-handoff-button:active, 21 | .search-handoff-button:enabled:hover:active, 22 | .search-inner-wrapper { 23 | display: none !important; 24 | } 25 | 26 | /* Removes Top Padding From Promotional VPN Message */ 27 | .promo.below-search { 28 | padding: 0px 22px 0 !important; 29 | } 30 | 31 | /* Reduce Space Between Firefox Logo & Safety Message */ 32 | .logo-and-wordmark { 33 | margin-bottom: 20px !important; 34 | } 35 | 36 | /* Change Promotional VPN Header */ 37 | /* Butcher Original Description Text*/ 38 | .promo-content h1 { 39 | text-indent: -9999px; 40 | line-height: 0; /* Collapse the original line */ 41 | } 42 | /* Custom Header Text*/ 43 | .promo-content h1::after { 44 | content: "Private Browsing Isn't As Private As You Might Think"; 45 | text-indent: 0; 46 | display: block; 47 | line-height: initial; /* New content takes up original line height */ 48 | } 49 | 50 | /* Change Promotional VPN Details */ 51 | /* Massacre Original Description Text*/ 52 | .promo-content p { 53 | text-indent: -9999px; 54 | line-height: 0; /* Collapse the original line */ 55 | } 56 | /* Custom Description Text*/ 57 | .promo-content p::after { 58 | content: "Firefox doesn't remember what you do in a Private Window. Sites you visit won't show up in your history, and cookies vanish when you're done. Private Windows don't make you completely anonymous online and and a VPN is recommended."; 59 | text-indent: 0; 60 | display: block; 61 | line-height: initial; /* New content takes up original line height */ 62 | } 63 | 64 | /* Reduce Spacing Between Text & Heading */ 65 | .promo-content p { 66 | line-height: 0em !important; 67 | margin-top: -3px !important; 68 | } 69 | 70 | /* Terminate VPN Button */ 71 | .promo-cta a { 72 | display: none !important; 73 | } 74 | 75 | /* Removes Old Warning Message */ 76 | .info { 77 | display: none !important; 78 | } -------------------------------------------------------------------------------- /Brave-Fox/Tabs/Close Button Antics.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Close Button Antics ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Makes Close Buttons Behave Like Brave's ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 9 | ║ Notable Help ║ u/9hp71n ║ 10 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 11 | */ 12 | 13 | 14 | /* Kill Close Button. (Don't Worry, It Comes Back Later) */ 15 | #TabsToolbar .close-icon { 16 | display: none !important; 17 | } 18 | 19 | /* Always Show Close Icon - Selected Tabs */ 20 | #TabsToolbar .tabbrowser-tab[selected]:not([pinned]) .close-icon { 21 | display: inline-block !important; 22 | } 23 | 24 | /* Show Close Icon On Hover - Unfoucused Tabs */ 25 | /* Thanks u/9hp71n */ 26 | #TabsToolbar .tabbrowser-tab:not([pinned]):hover .close-icon { 27 | display: inline-block !important; 28 | } 29 | 30 | /* Make Close Icon Hitbox Circular */ 31 | .tab-close-button, 32 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]), 33 | .tab-icon-sound 34 | { 35 | border-radius: 99px !important; 36 | color: inherit !important; 37 | -moz-context-properties: fill, fill-opacity !important; 38 | transition-property: fill-opacity, background-color !important; 39 | transition-duration: .15s !important; 40 | transition-timing-function: var(--ease-basic) !important; 41 | fill-opacity: 1 !important; 42 | opacity: 1 !important; 43 | } -------------------------------------------------------------------------------- /Brave-Fox/Tabs/Murder Proton Tab Spacing.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Murder Proton Tab Spacing??? (Wtf Mozilla) ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Fixes Spacing Between Tabs Because Mozilla Dummy ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 9 | */ 10 | 11 | 12 | /* Reduce Spacing Between Pinned And Regular Tabs */ 13 | #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { 14 | margin-inline-start: initial !important; 15 | } 16 | 17 | /* Obliterate Space To Left Of Toolbar */ 18 | .titlebar-spacer[type="pre-tabs"] { 19 | display: none !important; 20 | } 21 | 22 | /* Adds Small Space Before First Tab To Match Top Padding */ 23 | #tabbrowser-tabs { 24 | margin-left: 4px !important; 25 | } 26 | 27 | /* Sets Right-Padding Of New Tab Button To 0 */ 28 | #tabs-newtab-button, 29 | #TabsToolbar #new-tab-button { 30 | padding-right: 0px !important; 31 | } 32 | 33 | /* Make Pinned Tabs Have Equal Favicon Padding */ 34 | /* Fixed By Bred For Brave-Fox */ 35 | :root:not([uidensity="compact"]) .tab-content[pinned] { 36 | padding-top: 0px !important; 37 | padding-right: 0px !important; 38 | padding-bottom: 0px !important; 39 | padding-left: 9px !important; 40 | } -------------------------------------------------------------------------------- /Brave-Fox/Tabs/Sound Playing.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Sound Playing ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Reset sound playing icon's default behavior ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 9 | ║ Author ║ xuanhung1509 ║ 10 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 11 | */ 12 | 13 | /* Prevent icon from overlapping site's favicon */ 14 | .tab-icon-overlay[soundplaying] { 15 | display: none; 16 | } 17 | 18 | /* Show icon on tab hover */ 19 | #TabsToolbar 20 | .tabbrowser-tab:not([pinned]):hover 21 | .tab-icon-overlay[soundplaying] { 22 | display: block; 23 | } 24 | 25 | /* Hide "Playing" label when tab's pinned */ 26 | .tab-secondary-label[pinned] { 27 | display: none; 28 | } 29 | -------------------------------------------------------------------------------- /Brave-Fox/Tabs/Tab Shapes.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Brave Tabs ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Makes Tabs Look Like Brave's ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 9 | ║ Notable Help ║ u/It_Was_The_Other_Guy ║ 10 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 11 | */ 12 | 13 | 14 | /* Make Tab Colour Same As ToolBar (If You Aren't Using The Brave-Fox Theme) */ 15 | :root { 16 | --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important; 17 | } 18 | 19 | /* Add Space Between New Tab Button & Last Tab */ 20 | #tabs-newtab-button { 21 | margin-left: 9px !important; 22 | } 23 | 24 | /* Remove Stupid Black Line Under ToolBar */ 25 | :root { 26 | --chrome-content-separator-color: none !important; 27 | } 28 | 29 | /* Set Value For Radius For Both Top Corners */ 30 | #tabbrowser-tabs { 31 | --user-tab-rounding: 5px; 32 | } 33 | 34 | /* Adjust Tab Corner Shape */ 35 | .tab-background { 36 | border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; 37 | margin-block: 1px 0 !important; 38 | } 39 | 40 | /* Makes New Tab Button Hitbox Not Take Up The Size Of Tab Bar */ 41 | #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, 42 | #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { 43 | --toolbarbutton-inner-padding: 2px; 44 | } 45 | 46 | /* Slaughter Text From Pinnend Tabs */ 47 | .tab-text[pinned] { 48 | display: none !important; 49 | } 50 | 51 | /* Make Tab Name Semi-Bold When Selected */ 52 | .tab-text[selected] { 53 | font-weight: 600 !important; 54 | } 55 | 56 | /* Adds Padding To The Top Of The Browser When Not Maximized */ 57 | :root[sizemode="normal"] #tabbrowser-tabs { 58 | padding-top: 8px; 59 | } 60 | 61 | /* Annihilate Padding Between Tabs */ 62 | .tabbrowser-tab { 63 | padding-left: 0 !important; 64 | padding-right: 0 !important; 65 | } 66 | 67 | /* Changes Minimum Hight For Tabs [Do Not Touch] */ 68 | #TabsToolbar, 69 | #tabbrowser-tabs { 70 | --tab-min-height: 30px !important; 71 | } 72 | 73 | /* Adds's Brave "Like" Tab Dividers */ 74 | /* Thanks u/It_Was_The_Other_Guy */ 75 | /* Thanks Again For Animation Version */ 76 | .tabbrowser-tab::after { 77 | width: 1px; 78 | content: ""; 79 | margin-left: 0px; 80 | display: -moz-box; 81 | background-image: linear-gradient( 82 | transparent 25%, 83 | color-mix(in srgb, currentColor 20%, transparent) 10%, 84 | color-mix(in srgb, currentColor 20%, transparent) 100%, 85 | transparent 80% 86 | ); 87 | transition: opacity 300ms linear !important; 88 | } 89 | 90 | .tabbrowser-tab[beforehovered]::after, 91 | .tabbrowser-tab[beforeselected-visible]::after { 92 | opacity: 0; 93 | } 94 | 95 | /* Remove 1px Gap */ 96 | .tabbrowser-tab:hover::after { 97 | width: 0px; 98 | transition: width 350ms linear !important; 99 | } 100 | 101 | /* Hides Separator On Selected Tabs */ 102 | .tabbrowser-tab[selected]::after { 103 | width: 0px; 104 | } 105 | 106 | /* Make Pinned Tabs Have One Size No Matter How Many Tabs Are Open */ 107 | .tabbrowser-tab[pinned] { 108 | max-width: 35px !important; 109 | min-width: 35px !important; 110 | } 111 | 112 | /* Makes Tabs Have A Bigger Max Size To Match Brave's */ 113 | .tabbrowser-tab[fadein]:not([pinned]) { 114 | max-width: 245px !important; 115 | } 116 | 117 | 118 | /* 119 | ╔════════════════════════════════════════════════[─]═[□]═[×]═╗ 120 | ║ Override Normal Density To Compact Density For Tabs. ║ 121 | ║ I Have No Idea What What This Does, I Got It From ║ 122 | ║ https://www.userchrome.org/ ║ 123 | ╚════════════════════════════════════════════════════════════╝ 124 | */ 125 | 126 | /* W h a t d o e s t h i s d o */ 127 | #scrollbutton-up, 128 | #scrollbutton-down { 129 | border-top-width: 0 !important; 130 | border-bottom-width: 0 !important; 131 | } 132 | 133 | /*Idk What This Does But This Was The Note Given: 134 | "Set A Max Height Based On Min-height Plus Margin-block: 1px 0" 135 | Don't Touch The "9px" Tho, That's What's "Perfect" From What I Tested*/ 136 | #TabsToolbar, 137 | #TabsToolbar > hbox, 138 | #TabsToolbar-customization-target, 139 | #tabbrowser-arrowscrollbox { 140 | max-height: calc(var(--tab-min-height) + 9px) !important; 141 | } 142 | 143 | /*══════════════════════════════════════════════════════════*/ -------------------------------------------------------------------------------- /Brave-Fox/Toolbar.css: -------------------------------------------------------------------------------- 1 | /* 2 | ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ 3 | ║ Name ║ Brave Toolbar ║ 4 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 5 | ║ Description ║ Makes The Toolbar Match Brave's ║ 6 | ╠══════════════════════════╬═════════════════════════════════════════════════════════════════════════════════════════╣ 7 | ║ Sub-Folder ║ userChrome.css ║ 8 | ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ 9 | */ 10 | 11 | 12 | /* Padding Between Toolbar Icons (Back, Forward, Refresh) Inside Their Hitbox */ 13 | :root{ 14 | --toolbarbutton-inner-padding:5px !important; 15 | } 16 | 17 | /* Fix Tiny Reader Mode Button */ 18 | #reader-mode-button { 19 | padding-top: 0px !important; 20 | padding-bottom: 0px !important; 21 | } 22 | 23 | /* Small URL Bar Height */ 24 | :root, 25 | #urlbar-container, 26 | #search-container, 27 | #nav-bar-customization-target, 28 | #nav-bar { 29 | --urlbar-min-height: 28px !important; 30 | } 31 | 32 | /* Make Toolbar Small */ 33 | #urlbar-container, 34 | #search-container, 35 | #nav-bar-customization-target, 36 | #nav-bar { 37 | --urlbar-toolbar-height: 20px !important; 38 | --urlbar-container-height: 37px !important; 39 | } 40 | 41 | /* Remove Top And Bottom Padding Of URL Bar */ 42 | #urlbar-container { 43 | padding-top: 8px !important; 44 | padding-bottom: 0px !important; 45 | } 46 | 47 | /* Make Back Button Closer To Left Side */ 48 | #back-button { 49 | margin-left: 5px !important; 50 | } 51 | 52 | /* Make All Toolbar Buttons Have Smaller Space Between Eachother */ 53 | toolbar .toolbarbutton-1 { 54 | margin-left: 2px !important; 55 | } 56 | 57 | /* Kill Refresh Animation */ 58 | #nav-bar-customization-target > 59 | #stop-reload-button > 60 | :is(#reload-button, #stop-button) > 61 | .toolbarbutton-animatable-box { 62 | display: none !important; 63 | } 64 | 65 | /* Make Stop Refresh Icon Visible */ 66 | #stop-reload-button[animate] > 67 | #reload-button > 68 | .toolbarbutton-icon, #stop-reload-button[animate] > 69 | #reload-button[displaystop] + #stop-button > 70 | .toolbarbutton-icon { 71 | fill: #eeeeee !important; 72 | } 73 | 74 | /* Make Site Information Dropdown Look Like Brave (Kinda) */ 75 | /* Connection Not Secure Text Color */ 76 | .identity-popup-connection-not-secure{ 77 | color: #F28B82 !important; 78 | } 79 | 80 | /* Connection Not Secure Text Color */ 81 | .identity-popup-connection-secure{ 82 | color: #81C995 !important; 83 | } 84 | 85 | /* Make Not Secure Icon Have Separator Line */ 86 | #identity-box[pageproxystate="valid"].notSecure::after { 87 | width: 1px; 88 | content: ""; 89 | margin-left: 0px; 90 | display: -moz-box; 91 | background-image: linear-gradient( 92 | transparent 20%, 93 | color-mix(in srgb, currentColor 20%, transparent) 10%, 94 | color-mix(in srgb, currentColor 20%, transparent) 85%, 95 | transparent 20% 96 | ); 97 | transition: opacity 300ms linear !important; 98 | } 99 | #identity-box:hover:after, 100 | #identity-box:hover:after { 101 | opacity: 0 !important; 102 | } 103 | 104 | /* Make Not Secure Box Have Text */ 105 | #identity-box[pageproxystate="valid"].notSecure ::after { 106 | content: "Not secure"; 107 | font-size: 14px; 108 | color: #9AA0A6; 109 | /* Space Between Icon & Text */ 110 | text-indent: 5px; 111 | /* Make Text Centred */ 112 | padding: 0 01px 2px 0; 113 | display: block; 114 | line-height: initial; /* New content takes up original line height */ 115 | } 116 | 117 | /* Moves Bookmark Button To The Left Of URL Bar */ 118 | #star-button-box { 119 | display: block; 120 | position: absolute; 121 | left: -35px; 122 | -moz-window-dragging: no-drag; 123 | } 124 | #urlbar-input-container { overflow: visible !important } 125 | /* Adds Space To URL Bar So Bookmark Doesnt Get Overlap */ 126 | #urlbar-container { margin-left: 37px !important } 127 | 128 | /* Make Bookmark Button Centred Again */ 129 | #star-button-box.urlbar-page-action { 130 | height: 26px !important; 131 | width: 26px !important; 132 | padding: 5px !important; 133 | } 134 | 135 | /* URL Bar Fade Animation On Hover */ 136 | #urlbar-input-container:hover { 137 | background-color: #23252F !important; 138 | } 139 | #urlbar-input-container { 140 | transition: background-color .3s ease-in; 141 | } 142 | 143 | /* Make Reload Button Smaller */ 144 | #reload-button > .toolbarbutton-icon { 145 | padding: 6.5px !important; 146 | } 147 | 148 | /* Make Bookmark Button Smaller */ 149 | #star-button.urlbar-icon { 150 | padding: 1px 151 | } 152 | 153 | /* Make Back / Forawrd Button Smaller */ 154 | #back-button > .toolbarbutton-icon, 155 | #forward-button > .toolbarbutton-icon{ 156 | padding: 5.5px !important; 157 | } 158 | 159 | /* Fix Search Bookmarks Item In Settings Dropdown */ 160 | #panelMenu_searchBookmarks > image:nth-child(1) { 161 | margin-left: -10px !important; 162 | } 163 | #panelMenu_searchBookmarks { 164 | height: 32px !important; 165 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Important 2 | Yea... this isn't getting updated anytime soon. 3 | 4 | ___ 5 | 6 | ![Brave-Fox Banner](https://preview.redd.it/7ilia7199au71.png?width=2736&format=png&auto=webp&s=2bb02f857421d02dc86246baece4b20b41caf698) 7 | # Brave-Fox 8 | Brave-Fox is a Firefox Theme that brings Brave's design elements into Firefox. 9 | 10 | ## Versions 11 | There are two versions of Brave-Fox: `Overflow` & `Non-Overflow`. 12 | 13 | ### Overflow vs Non-Overflow 14 | Chromium-based browsers do this thing where with every new tab, each other tab gets smaller and smaller, till you open enough tabs that newer ones stop displaying after a certain number of tabs. Firefox said "nah", and just decided to add a scroll wheel onto the tab bar. 15 | 16 | Adding the `Remove Overflow.css` file to the Brave-Fox folder will disable Firefox's tab scrolling and enable chromium-like tab behaviour. 17 | 18 | ## Explanation 19 | I highly recommend you read the [documentation](https://brave-fox.notion.site/Overflow-Files-adf332802aab4dcf98785f9b7307ea5f) I spent hours on as it explains every line of code in each file, some also have before and after pictures to show off differences. 20 | 21 | ## Installation 22 | 1. Install the pack you'd like to use, (including the Non-Overflow version if you'd like) (other than ReadMe.md). 23 | 2. Move all files to `Chrome Folder` 24 | 3. Add the following code to your `userChrome.css` & `userContent.css` files: 25 | ```css 26 | /*--------------------------------------------- Brave Fox --------------------------------------------*/ 27 | @import url("Brave-Fox/Import.css"); 28 | /*----------------------------------------------------------------------------------------------------*/ 29 | ``` 30 | 4. Save & restart Firefox. 31 | 32 | # Extras 33 | [Fluent Reveal Tabs](https://github.com/aminomancer/uc.css.js/blob/master/JS/fluentRevealTabs.uc.js) 34 | 35 | This adds Chromium's "flashlight" hover effect on tabs, just like Brave & Chrome have. Be warned tho, this is a JS script and needs a [script manager](https://github.com/MrOtherGuy/fx-autoconfig) 36 | -------------------------------------------------------------------------------- /Remove Overflow.css: -------------------------------------------------------------------------------- 1 | /* Mimimum Size For Hovered Non-Selected Tabs */ 2 | .tabbrowser-tab:not([pinned]):not([selected]):hover[fadein]{ 3 | max-width: 245px !important; 4 | } 5 | 6 | /* Make Selected Tabs Have A Minimum Size */ 7 | .tabbrowser-tab[selected][fadein]:not([pinned]) { 8 | min-width: 50px !important; 9 | } 10 | 11 | /* Tab Overflow */ 12 | /* On By Default */ 13 | /* Thanks u/-SZCMAWO */ 14 | .tabbrowser-tab { 15 | min-width: 0px !important; 16 | } 17 | .tab-content { 18 | overflow: hidden !important; 19 | } --------------------------------------------------------------------------------