tab content centered + cleaned up userChrome.css

This commit is contained in:
fuzzysh 2021-11-18 13:55:57 -06:00
parent 04633ec672
commit 401f3c58c7
33 changed files with 1174 additions and 32 deletions

View File

@ -0,0 +1,108 @@
/*
[][][×]
Name Brave Button Icons
Description Makes Back & Forward Buttons resemble that of Brave Browser
Sub-Folder userChrome.css
Notable Help u/It_Was_The_Other_Guy
*/
/* Change Forward Button */
#forward-button{ list-style-image: url("Brave-Fox Images/Forward Button.svg") !important; }
/* Change Back Button */
#back-button{ list-style-image: url("Brave-Fox Images/Back Button.svg") !important; }
/* Change Reload Button */
#reload-button{ list-style-image: url("Brave-Fox Images/Reload.svg") !important; }
/* Change Bookmark Icon */
#star-button { list-style-image: url("Brave-Fox Images/Bookmark.svg") !important; }
#star-button[starred] { list-style-image: url("Brave-Fox Images/bookmark Filled.svg") !important; }
/* Change Menu Icon */
#PanelUI-menu-button > stack:nth-child(1) > image:nth-child(1) {
list-style-image: url("Brave-Fox Images/Menu.svg") !important;
height: 12.5px;
align-self: center;
}
/* Make Menu Icon Box Normal Sized */
#PanelUI-menu-button > stack:nth-child(1){
height: 26px !important;
width: 26px !important;
}
/* Change Plugins Icon */
#nav-bar-overflow-button > image:nth-child(1),
#add-ons-button > image:nth-child(1) {
list-style-image: url("Brave-Fox Images/Plugins.svg") !important; }
/* Make Reload Slightly Bigger */
.reload-button.toolbarbutton-1 {
padding: 4.7px !important;
}
/* New Tab Button */
#tabs-newtab-button,
#new-tab-button {
list-style-image: url("Brave-Fox Images/New Tab.svg") !important;
}
/* Change Search Button */
#urlbar[pageproxystate="invalid"] #identity-icon,
.searchbar-search-icon,
#PopupAutoCompleteRichResult .ac-type-icon[type="keyword"],
#PopupAutoCompleteRichResult .ac-site-icon[type="searchengine"],
#appMenu-find-button,
#panelMenu_searchBookmarks {
list-style-image: url("Brave-Fox Images/Search.svg") !important;
}
/* Change Close Button */
.tab-close-button {
list-style-image: url("Brave-Fox Images/Close Tab.svg") !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Lock Icon */
#identity-icon {
list-style-image: url("Brave-Fox Images/Lock.svg") !important;
width: 16px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Lock Icon In Security Dropdown */
#identity-popup[connection^="secure"] .identity-popup-security-connection {
background-image: url("Brave-Fox Images/Lock.svg") !important;
}
/* Change Warning Icon */
#identity-box[pageproxystate="valid"].notSecure #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon,
#identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon,
#identity-box[pageproxystate="valid"].weakCipher #identity-icon,
#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon,
#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon,
#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon,
#identity-box[pageproxystate="valid"].certErrorPage #identity-icon
{
list-style-image: url("Brave-Fox Images/Warning.svg") !important;
width: 18px !important;
margin: 0 2px 0 1px !important;
padding: 2px !important;
}
/* Warning Icon In Security Dropdown */
.identity-popup-security-connection {
background-image: url("Brave-Fox Images/Warning.svg") !important;
padding-left: 5px !important;
}

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.99226 17.5745C6.97019 16.7738 6.9702 15.2266 7.99226 14.4258L21.5407 3.81103C22.8534 2.7826 24.7742 3.71782 24.7742 5.38539L24.7742 26.6149C24.7742 28.2825 22.8534 29.2177 21.5407 28.1893L7.99226 17.5745Z" stroke="#EEEEEE" stroke-width="3"/>
</svg>

After

Width:  |  Height:  |  Size: 357 B

View File

@ -0,0 +1,3 @@
<svg width="20" height="28" viewBox="0 0 20 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.13 23.309C10.535 22.861 9.466 22.861 8.87 23.309L3.33 27.455C1.702 28.676 0 27.741 0 25.705V3.245C0 1.472 1.388 0 3.118 0H16.882C18.612 0 20 1.471 20 3.246V25.705C20 27.741 18.3 28.676 16.67 27.455L11.13 23.309V23.309Z" fill="#EEEEEE"/>
</svg>

After

Width:  |  Height:  |  Size: 353 B

View File

@ -0,0 +1,3 @@
<svg width="20" height="28" viewBox="0 0 20 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8803 22.3092C11.3129 21.8827 10.6116 21.723 10.0004 21.723C9.38891 21.723 8.68771 21.8828 8.12014 22.3089C8.11973 22.3092 8.11933 22.3095 8.11893 22.3098L2.58104 26.4542L2.58 26.455C2.06031 26.8448 1.74887 26.7551 1.64295 26.6985C1.51851 26.6322 1.25 26.3834 1.25 25.705V3.245C1.25 2.10783 2.13165 1.25 3.118 1.25H16.882C17.8684 1.25 18.75 2.10683 18.75 3.246V25.705C18.75 26.384 18.4815 26.6325 18.3576 26.6986C18.2523 26.7549 17.9407 26.8451 17.4194 26.4546L17.419 26.4542L11.8819 22.3104C11.8814 22.31 11.8808 22.3096 11.8803 22.3092Z" stroke="#EEEEEE" stroke-width="2.5"/>
</svg>

After

Width:  |  Height:  |  Size: 693 B

View File

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.25 11.25L4.75 4.75Z" fill="#EEEEEE"/>
<path d="M11.25 11.25L4.75 4.75" stroke="#EEEEEE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.75 11.25L11.25 4.75Z" fill="#EEEEEE"/>
<path d="M4.75 11.25L11.25 4.75" stroke="#EEEEEE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 441 B

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.0077 14.426C25.0298 15.2267 25.0298 16.7739 24.0077 17.5747L10.4593 28.1895C9.14661 29.2179 7.22583 28.2827 7.22583 26.6151L7.22583 5.38555C7.22583 3.71798 9.14661 2.78276 10.4593 3.8112L24.0077 14.426Z" stroke="#EEEEEE" stroke-width="3"/>
</svg>

After

Width:  |  Height:  |  Size: 356 B

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 27H10C9.46957 27 8.96086 26.7893 8.58579 26.4142C8.21071 26.0391 8 25.5304 8 25V15C8 14.4696 8.21071 13.9609 8.58579 13.5858C8.96086 13.2107 9.46957 13 10 13H11V11C11 9.67392 11.5268 8.40215 12.4645 7.46447C13.4021 6.52678 14.6739 6 16 6C17.3261 6 18.5979 6.52678 19.5355 7.46447C20.4732 8.40215 21 9.67392 21 11V13H22C22.5304 13 23.0391 13.2107 23.4142 13.5858C23.7893 13.9609 24 14.4696 24 15V25C24 25.5304 23.7893 26.0391 23.4142 26.4142C23.0391 26.7893 22.5304 27 22 27ZM16 8C15.2044 8 14.4413 8.31607 13.8787 8.87868C13.3161 9.44129 13 10.2044 13 11V13H19V11C19 10.2044 18.6839 9.44129 18.1213 8.87868C17.5587 8.31607 16.7956 8 16 8Z" fill="#9AA0A6"/>
</svg>

After

Width:  |  Height:  |  Size: 773 B

View File

@ -0,0 +1,5 @@
<svg width="18" height="25" viewBox="0 0 18 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="18" height="3" rx="1.5" transform="matrix(1 0 0 -1 0 3)" fill="#EEEEEE"/>
<rect width="18" height="3" rx="1.5" transform="matrix(1 0 0 -1 0 14)" fill="#EEEEEE"/>
<rect width="18" height="3" rx="1.5" transform="matrix(1 0 0 -1 0 25)" fill="#EEEEEE"/>
</svg>

After

Width:  |  Height:  |  Size: 366 B

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 4C16.5304 4 17.0391 4.21071 17.4142 4.58579C17.7893 4.96086 18 5.46957 18 6V26C18 26.5304 17.7893 27.0391 17.4142 27.4142C17.0391 27.7893 16.5304 28 16 28C15.4696 28 14.9609 27.7893 14.5858 27.4142C14.2107 27.0391 14 26.5304 14 26V6C14 5.46957 14.2107 4.96086 14.5858 4.58579C14.9609 4.21071 15.4696 4 16 4ZM6 14H26C26.5304 14 27.0391 14.2107 27.4142 14.5858C27.7893 14.9609 28 15.4696 28 16C28 16.5304 27.7893 17.0391 27.4142 17.4142C27.0391 17.7893 26.5304 18 26 18H6C5.46957 18 4.96086 17.7893 4.58579 17.4142C4.21071 17.0391 4 16.5304 4 16C4 15.4696 4.21071 14.9609 4.58579 14.5858C4.96086 14.2107 5.46957 14 6 14V14Z" fill="#EEEEEE"/>
</svg>

After

Width:  |  Height:  |  Size: 756 B

View File

@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M 11.5 0 C 10.119 0 9 1.119 9 2.5 L 9 4 L 5 4 C 3.895 4 3 4.895 3 6 L 3 9 C 3 9.552 3.448 10 4 10 L 4.3574219 10 C 5.6654219 10 6.8553281 10.941188 6.9863281 12.242188 C 7.1363281 13.739187 5.966 15 4.5 15 L 4 15 C 3.448 15 3 15.448 3 16 L 3 19 C 3 20.105 3.895 21 5 21 L 8 21 C 8.552 21 9 20.552 9 20 L 9 19.642578 C 9 18.334578 9.9411875 17.144672 11.242188 17.013672 C 12.739187 16.863672 14 18.034 14 19.5 L 14 20 C 14 20.552 14.448 21 15 21 L 18 21 C 19.105 21 20 20.105 20 19 L 20 15 L 21.5 15 C 22.881 15 24 13.881 24 12.5 C 24 11.119 22.881 10 21.5 10 L 20 10 L 20 6 C 20 4.895 19.105 4 18 4 L 14 4 L 14 2.5 C 14 1.119 12.881 0 11.5 0 z"/></svg>

After

Width:  |  Height:  |  Size: 790 B

View File

@ -0,0 +1,8 @@
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.429688" y="0.178223" width="55" height="54" fill="black">
<rect fill="white" x="0.429688" y="0.178223" width="55" height="54"/>
<path d="M50.7001 33.4401C50.4533 33.3473 50.1906 33.3043 49.927 33.3134C49.6635 33.3226 49.4044 33.3838 49.1646 33.4934C48.9249 33.6031 48.7091 33.7591 48.5299 33.9525C48.3506 34.1458 48.2113 34.3727 48.1201 34.6201C46.6931 38.3185 44.2838 41.5574 41.1519 43.9875C38.0199 46.4177 34.2841 47.947 30.3472 48.4105C26.4102 48.8741 22.4214 48.2544 18.8106 46.6183C15.1998 44.9821 12.1041 42.3915 9.85707 39.1257C7.61004 35.8599 6.29693 32.0427 6.05928 28.0857C5.82163 24.1286 6.66846 20.1818 8.50849 16.6705C10.3485 13.1592 13.112 10.2167 16.5009 8.16019C19.8899 6.10363 23.7759 5.011 27.7401 5.00008C32.3145 4.9996 36.77 6.45675 40.4601 9.16008C39.1031 10.4307 38.2309 12.1343 37.9935 13.9781C37.7561 15.8219 38.1682 17.6908 39.1591 19.2638C40.15 20.8367 41.6577 22.0155 43.4233 22.5975C45.1889 23.1796 47.102 23.1286 48.8341 22.4533C50.5661 21.778 52.0089 20.5205 52.9145 18.897C53.8202 17.2735 54.1321 15.3852 53.7968 13.5567C53.4614 11.7281 52.4998 10.0735 51.0769 8.87697C49.6541 7.68046 47.859 7.01683 46.0001 7.00008C45.4352 6.99843 44.8718 7.05879 44.3201 7.18008C39.6926 3.25507 33.8077 1.12544 27.7401 1.18008C22.9685 1.12311 18.2733 2.38041 14.1687 4.81427C10.0641 7.24812 6.70856 10.7646 4.46951 14.9786C2.23045 19.1926 1.19431 23.9416 1.47458 28.7053C1.75484 33.4689 3.3407 38.0636 6.05844 41.986C8.77618 45.9083 12.521 49.0071 16.8826 50.9429C21.2443 52.8786 26.0545 53.5767 30.7865 52.9606C35.5185 52.3445 39.9896 50.438 43.7102 47.45C47.4308 44.4619 50.2573 40.5076 51.8801 36.0201C51.9728 35.7733 52.0159 35.5105 52.0067 35.247C51.9976 34.9835 51.9364 34.7244 51.8267 34.4846C51.7171 34.2449 51.5611 34.0291 51.3677 33.8499C51.1744 33.6706 50.9475 33.5313 50.7001 33.4401V33.4401Z"/>
</mask>
<path d="M50.7001 33.4401C50.4533 33.3473 50.1906 33.3043 49.927 33.3134C49.6635 33.3226 49.4044 33.3838 49.1646 33.4934C48.9249 33.6031 48.7091 33.7591 48.5299 33.9525C48.3506 34.1458 48.2113 34.3727 48.1201 34.6201C46.6931 38.3185 44.2838 41.5574 41.1519 43.9875C38.0199 46.4177 34.2841 47.947 30.3472 48.4105C26.4102 48.8741 22.4214 48.2544 18.8106 46.6183C15.1998 44.9821 12.1041 42.3915 9.85707 39.1257C7.61004 35.8599 6.29693 32.0427 6.05928 28.0857C5.82163 24.1286 6.66846 20.1818 8.50849 16.6705C10.3485 13.1592 13.112 10.2167 16.5009 8.16019C19.8899 6.10363 23.7759 5.011 27.7401 5.00008C32.3145 4.9996 36.77 6.45675 40.4601 9.16008C39.1031 10.4307 38.2309 12.1343 37.9935 13.9781C37.7561 15.8219 38.1682 17.6908 39.1591 19.2638C40.15 20.8367 41.6577 22.0155 43.4233 22.5975C45.1889 23.1796 47.102 23.1286 48.8341 22.4533C50.5661 21.778 52.0089 20.5205 52.9145 18.897C53.8202 17.2735 54.1321 15.3852 53.7968 13.5567C53.4614 11.7281 52.4998 10.0735 51.0769 8.87697C49.6541 7.68046 47.859 7.01683 46.0001 7.00008C45.4352 6.99843 44.8718 7.05879 44.3201 7.18008C39.6926 3.25507 33.8077 1.12544 27.7401 1.18008C22.9685 1.12311 18.2733 2.38041 14.1687 4.81427C10.0641 7.24812 6.70856 10.7646 4.46951 14.9786C2.23045 19.1926 1.19431 23.9416 1.47458 28.7053C1.75484 33.4689 3.3407 38.0636 6.05844 41.986C8.77618 45.9083 12.521 49.0071 16.8826 50.9429C21.2443 52.8786 26.0545 53.5767 30.7865 52.9606C35.5185 52.3445 39.9896 50.438 43.7102 47.45C47.4308 44.4619 50.2573 40.5076 51.8801 36.0201C51.9728 35.7733 52.0159 35.5105 52.0067 35.247C51.9976 34.9835 51.9364 34.7244 51.8267 34.4846C51.7171 34.2449 51.5611 34.0291 51.3677 33.8499C51.1744 33.6706 50.9475 33.5313 50.7001 33.4401V33.4401Z" fill="#EEEEEE"/>
<path d="M50.7001 33.4401C50.4533 33.3473 50.1906 33.3043 49.927 33.3134C49.6635 33.3226 49.4044 33.3838 49.1646 33.4934C48.9249 33.6031 48.7091 33.7591 48.5299 33.9525C48.3506 34.1458 48.2113 34.3727 48.1201 34.6201C46.6931 38.3185 44.2838 41.5574 41.1519 43.9875C38.0199 46.4177 34.2841 47.947 30.3472 48.4105C26.4102 48.8741 22.4214 48.2544 18.8106 46.6183C15.1998 44.9821 12.1041 42.3915 9.85707 39.1257C7.61004 35.8599 6.29693 32.0427 6.05928 28.0857C5.82163 24.1286 6.66846 20.1818 8.50849 16.6705C10.3485 13.1592 13.112 10.2167 16.5009 8.16019C19.8899 6.10363 23.7759 5.011 27.7401 5.00008C32.3145 4.9996 36.77 6.45675 40.4601 9.16008C39.1031 10.4307 38.2309 12.1343 37.9935 13.9781C37.7561 15.8219 38.1682 17.6908 39.1591 19.2638C40.15 20.8367 41.6577 22.0155 43.4233 22.5975C45.1889 23.1796 47.102 23.1286 48.8341 22.4533C50.5661 21.778 52.0089 20.5205 52.9145 18.897C53.8202 17.2735 54.1321 15.3852 53.7968 13.5567C53.4614 11.7281 52.4998 10.0735 51.0769 8.87697C49.6541 7.68046 47.859 7.01683 46.0001 7.00008C45.4352 6.99843 44.8718 7.05879 44.3201 7.18008C39.6926 3.25507 33.8077 1.12544 27.7401 1.18008C22.9685 1.12311 18.2733 2.38041 14.1687 4.81427C10.0641 7.24812 6.70856 10.7646 4.46951 14.9786C2.23045 19.1926 1.19431 23.9416 1.47458 28.7053C1.75484 33.4689 3.3407 38.0636 6.05844 41.986C8.77618 45.9083 12.521 49.0071 16.8826 50.9429C21.2443 52.8786 26.0545 53.5767 30.7865 52.9606C35.5185 52.3445 39.9896 50.438 43.7102 47.45C47.4308 44.4619 50.2573 40.5076 51.8801 36.0201C51.9728 35.7733 52.0159 35.5105 52.0067 35.247C51.9976 34.9835 51.9364 34.7244 51.8267 34.4846C51.7171 34.2449 51.5611 34.0291 51.3677 33.8499C51.1744 33.6706 50.9475 33.5313 50.7001 33.4401V33.4401Z" stroke="#EEEEEE" stroke-width="2" mask="url(#path-1-outside-1)"/>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.6061 19.3939L21.581 19.3689L21.5474 19.3577L20.081 18.8689L20.0194 18.8073C21.5141 17.0059 22.2712 14.703 22.1345 12.3629C21.9951 9.97651 20.937 7.7368 19.1823 6.11351C17.4275 4.49022 15.1123 3.60946 12.7223 3.65595C10.3323 3.70244 8.05318 4.67257 6.36288 6.36288C4.67257 8.05318 3.70244 10.3323 3.65595 12.7223C3.60946 15.1123 4.49022 17.4275 6.11351 19.1823C7.7368 20.937 9.97651 21.9951 12.3629 22.1345C14.703 22.2712 17.0059 21.5141 18.8073 20.0194L18.8689 20.081L19.3577 21.5474L19.3689 21.581L19.3939 21.6061L25.8939 28.1061L26 28.2121L26.1061 28.1061L28.1061 26.1061L28.2121 26L28.1061 25.8939L21.6061 19.3939ZM9.47213 7.72017C10.5164 7.02242 11.7441 6.65 13 6.65C14.6841 6.65 16.2993 7.31901 17.4901 8.50987C18.681 9.70073 19.35 11.3159 19.35 13C19.35 14.2559 18.9776 15.4836 18.2798 16.5279C17.5821 17.5721 16.5903 18.386 15.43 18.8666C14.2697 19.3472 12.993 19.473 11.7612 19.228C10.5294 18.983 9.39793 18.3782 8.50987 17.4901C7.62181 16.6021 7.01703 15.4706 6.77201 14.2388C6.527 13.007 6.65275 11.7303 7.13336 10.57C7.61398 9.40965 8.42788 8.41791 9.47213 7.72017Z" fill="#EEEEEE" stroke="#EEEEEE" stroke-width="0.3"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,10 @@
<svg width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0L32 28.16H0L16 0ZM14.08 10.24H17.92V17.92H14.08V10.24ZM14.08 20.48H17.92V24.32H14.08V20.48Z" fill="#9AA0A6"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="32" height="28.16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 396 B

View File

@ -0,0 +1,40 @@
/*
[][][×]
Name Fancy Animation Zone
Description Makes Hover States Sexy
Sub-Folder userChrome.css
*/
/* Makes Hovering Over Inactive Tabs Have A Small Fade In */
/* Thanks u/poorman3333 */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) {
transition: 300ms !important;
}
/* Toolbar Button Fade In Animations */
/* Thanks u/9hp71n */
/* Shield Icon */
#tracking-protection-icon-container:not([disabled="true"], [checked], [open], :active),
/* Lock Icon */
#identity-icon-box:not([disabled="true"], [checked], [open], :active),
/* Extentions & Menu Button */
toolbar .toolbarbutton-badge-stack:not([disabled="true"], [checked], [open], :active),
/* Back / Forward / Refresh */
toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active) > .toolbarbutton-icon,
/* Star / Bookmark Button */
.urlbar-page-action, #urlbar-go-button, .search-go-button:not([disabled="true"], [checked], [open], :active) {
transition:background linear 250ms;
}
/* Pin / Un-Pin Tab Animation */
/* Thanks u/It_Was_The_Other_Guy */
.tabbrowser-tab[fadein]{transition: min-width 250ms linear, max-width 250ms linear !important;}

View File

@ -0,0 +1,23 @@
/*
[][][×]
Name Main Import
Description Main Import For Brave-Fox, Allows User To Turn Stuff On & Off
Sub-Folder userChrome.css & userContent.css
*/
@import url("Optionals.css");
@import url("Brave Button Icons.css");
@import url("Toolbar.css");
@import url("Tabs/Tab Shapes.css");
@import url("Tabs/Close Button Antics.css");
@import url("Tabs/Murder Proton Tab Spacing.css");
@import url("Private Browsing/Brave Incognito Colours.css");
@import url("Private Browsing/Brave Incognito New Tab.css");
@import url("Fancy Animation Zone.css");
/* No Overflow Version */
@import url("Remove Overflow.css");

View File

@ -0,0 +1,61 @@
/*
[][][×]
Name Optionals
Description Optional Things You Can Turn On/Off
Sub-Folder userChrome.css
*/
/* Makes Close Tab Button Have Even Padding On Right */
/* On By Default */
.tab-close-button {
margin-inline-end: 0px !important;
}
/* Adds Space To URL Bar Similar To That Of Brave */
/* On By Default */
:root[sizemode="maximized"] #urlbar-container{
margin-right: 120px !important;
margin-left: 120px !important;
}
/* Terminate New Tab FavIcon */
/* On By Default */
.tabbrowser-tab[label^="New Tab"] .tab-icon-image {
display: none;
}
/* Close Tab Icon Fade Animation */
/* On By Default */
.tab-close-button,
.tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]),
.tab-icon-sound
{
transition-property: fill-opacity, background-color !important;
transition-duration: .15s !important;
transition-timing-function: var(--ease-basic) !important;
}
/* Hide Enhanced Tracking Button */
/* On By Default */
#tracking-protection-icon-container {
display: none !important;
}
/* Always Show Bookmark Button */
#star-button-box {
display: flex !important;
}

View File

@ -0,0 +1,77 @@
/*
[][][×]
Name Brave Incognito Colours
Description Changes Incognito Tabs To Match That Of Brave Browser.
Sub-Folder userChrome.css
Notable Help u/qaz69wsx, u/black7375 & u/It_Was_The_Other_Guy
*/
:root[privatebrowsingmode="temporary"] {
/* Toolbar */
--toolbar-bgcolor: #322560 !important;
/* Behind Tabs */
--lwt-accent-color: #19162F !important;
/* Search Bar Colour */
--toolbar-field-background-color: #0B0724 !important;
/* Turns Tab Into Same Colour As Toolbar */
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
/* What Happens When You Hover Over A Button */
--toolbarbutton-hover-background: rgba(255, 255, 255, 0.05) !important;
/* Click On A Button, This Colour Is What The Button Will Be */
--toolbarbutton-active-background: #4D4175 !important;
/* Click A Button With A Context Menu? This Is The Menu Colour */
--arrowpanel-background: #1D1935 !important;
/* Tool Bar Context Menu Outline */
--arrowpanel-border-color: #322560 !important;
/* Line Between Toobar And Site */
--chrome-content-separator-color: none !important;
/* Colour Of The Expanded Address Bar */
--toolbar-field-focus-background-color:var(--toolbar-field-background-color) !important;
/* Hovering Over The Autocomplete Items Colour */
--autocomplete-popup-hover-background: #1D1935 !important;
/* Clicking On Said Autocomplete Item Colour */
--autocomplete-popup-highlight-background: rgba(65, 48, 117, 0.5) !important;
}
/* Right Click Menu */
:root[privatebrowsingmode="temporary"] menupopup {
--menuitem-hover-background-color: #413D54 !important;
--menu-background-color: #1D1935 !important;
--menu-color: #eeeeee !important;
--menuitem-disabled-hover-background-color: #ffffff00 !important;
--menu-disabled-color: #ffffff50 !important;
--menu-border-color: #322560 !important;
}
/* Search Bar Popout Outline Killer */
#urlbar[open] > #urlbar-background {
border-color: #ffffff00 !important;
}
/* No More Icon Incognito Icon */
.accessibility-indicator, .private-browsing-indicator{
display: none !important;
}
/* URL Bar Fade Animation On Hover */
/* Thanks u/It_Was_The_Other_Guy */
:root[privatebrowsingmode="temporary"] #urlbar-input-container:hover {
background-color: #1F1B36 !important;
}

View File

@ -0,0 +1,78 @@
/*
[][][×]
Name Brave Incognito New Tabs
Description Changes Incognito New Tabs To Match That Of Brave Browser.
Sub-Folder userContent.css
Notable Help u/It_Was_The_Other_Guy
*/
/* Makes Private New Tab Look More Like Brave */
/* Thanks u/It_Was_The_Other_Guy */
html.private{ background-image: linear-gradient(rgb(56, 25, 128), rgb(12, 4, 30)) }
/* Removes Search Bar From Private Windows */
.search-handoff-button,
.search-handoff-button:active,
.search-handoff-button:enabled:hover:active,
.search-inner-wrapper {
display: none !important;
}
/* Removes Top Padding From Promotional VPN Message */
.promo.below-search {
padding: 0px 22px 0 !important;
}
/* Reduce Space Between Firefox Logo & Safety Message */
.logo-and-wordmark {
margin-bottom: 20px !important;
}
/* Change Promotional VPN Header */
/* Butcher Original Description Text*/
.promo-content h1 {
text-indent: -9999px;
line-height: 0; /* Collapse the original line */
}
/* Custom Header Text*/
.promo-content h1::after {
content: "Private Browsing Isn't As Private As You Might Think";
text-indent: 0;
display: block;
line-height: initial; /* New content takes up original line height */
}
/* Change Promotional VPN Details */
/* Massacre Original Description Text*/
.promo-content p {
text-indent: -9999px;
line-height: 0; /* Collapse the original line */
}
/* Custom Description Text*/
.promo-content p::after {
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.";
text-indent: 0;
display: block;
line-height: initial; /* New content takes up original line height */
}
/* Reduce Spacing Between Text & Heading */
.promo-content p {
line-height: 0em !important;
margin-top: -3px !important;
}
/* Terminate VPN Button */
.promo-cta a {
display: none !important;
}
/* Removes Old Warning Message */
.info {
display: none !important;
}

View File

@ -0,0 +1,43 @@
/*
[][][×]
Name Close Button Antics
Description Makes Close Buttons Behave Like Brave's
Sub-Folder userChrome.css
Notable Help u/9hp71n
*/
/* Kill Close Button. (Don't Worry, It Comes Back Later) */
#TabsToolbar .close-icon {
display: none !important;
}
/* Always Show Close Icon - Selected Tabs */
#TabsToolbar .tabbrowser-tab[selected]:not([pinned]) .close-icon {
display: inline-block !important;
}
/* Show Close Icon On Hover - Unfoucused Tabs */
/* Thanks u/9hp71n */
#TabsToolbar .tabbrowser-tab:not([pinned]):hover .close-icon {
display: inline-block !important;
}
/* Make Close Icon Hitbox Circular */
.tab-close-button,
.tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]),
.tab-icon-sound
{
border-radius: 99px !important;
color: inherit !important;
-moz-context-properties: fill, fill-opacity !important;
transition-property: fill-opacity, background-color !important;
transition-duration: .15s !important;
transition-timing-function: var(--ease-basic) !important;
fill-opacity: 1 !important;
opacity: 1 !important;
}

View File

@ -0,0 +1,40 @@
/*
[][][×]
Name Murder Proton Tab Spacing??? (Wtf Mozilla)
Description Fixes Spacing Between Tabs Because Mozilla Dummy
Sub-Folder userChrome.css
*/
/* Reduce Spacing Between Pinned And Regular Tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: initial !important;
}
/* Obliterate Space To Left Of Toolbar */
.titlebar-spacer[type="pre-tabs"] {
display: none !important;
}
/* Adds Small Space Before First Tab To Match Top Padding */
#tabbrowser-tabs {
margin-left: 4px !important;
}
/* Sets Right-Padding Of New Tab Button To 0 */
#tabs-newtab-button,
#TabsToolbar #new-tab-button {
padding-right: 0px !important;
}
/* Make Pinned Tabs Have Equal Favicon Padding */
/* Fixed By Bred For Brave-Fox */
:root:not([uidensity="compact"]) .tab-content[pinned] {
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-left: 9px !important;
}

View File

@ -0,0 +1,143 @@
/*
[][][×]
Name Brave Tabs
Description Makes Tabs Look Like Brave's
Sub-Folder userChrome.css
Notable Help u/It_Was_The_Other_Guy
*/
/* Make Tab Colour Same As ToolBar (If You Aren't Using The Brave-Fox Theme) */
:root {
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
}
/* Add Space Between New Tab Button & Last Tab */
#tabs-newtab-button {
margin-left: 9px !important;
}
/* Remove Stupid Black Line Under ToolBar */
:root {
--chrome-content-separator-color: none !important;
}
/* Set Value For Radius For Both Top Corners */
#tabbrowser-tabs {
--user-tab-rounding: 5px;
}
/* Adjust Tab Corner Shape */
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
/* Makes New Tab Button Hitbox Not Take Up The Size Of Tab Bar */
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
--toolbarbutton-inner-padding: 2px;
}
/* Slaughter Text From Pinnend Tabs */
.tab-text[pinned] {
display: none !important;
}
/* Make Tab Name Semi-Bold When Selected */
.tab-text[selected] {
font-weight: 600 !important;
}
/* Adds Padding To The Top Of The Browser When Not Maximized */
:root[sizemode="normal"] #tabbrowser-tabs {
padding-top: 8px;
}
/* Annihilate Padding Between Tabs */
.tabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Changes Minimum Hight For Tabs [Do Not Touch] */
#TabsToolbar,
#tabbrowser-tabs {
--tab-min-height: 30px !important;
}
/* Adds's Brave "Like" Tab Dividers */
/* Thanks u/It_Was_The_Other_Guy */
/* Thanks Again For Animation Version */
.tabbrowser-tab::after {
width: 1px;
content: "";
margin-left: 0px;
display: -moz-box;
background-image: linear-gradient(
transparent 25%,
color-mix(in srgb, currentColor 20%, transparent) 10%,
color-mix(in srgb, currentColor 20%, transparent) 100%,
transparent 80%
);
transition: opacity 300ms linear !important;
}
.tabbrowser-tab[beforehovered]::after,
.tabbrowser-tab[beforeselected-visible]::after {
opacity: 0;
}
/* Remove 1px Gap */
.tabbrowser-tab:hover::after {
width: 0px;
transition: width 350ms linear !important;
}
/* Hides Separator On Selected Tabs */
.tabbrowser-tab[selected]::after {
width: 0px;
}
/* Make Pinned Tabs Have One Size No Matter How Many Tabs Are Open */
.tabbrowser-tab[pinned] {
max-width: 35px !important;
min-width: 35px !important;
}
/* Makes Tabs Have A Bigger Max Size To Match Brave's */
.tabbrowser-tab[fadein]:not([pinned]) {
max-width: 245px !important;
}
/*
[][][×]
Override Normal Density To Compact Density For Tabs.
I Have No Idea What What This Does, I Got It From
https://www.userchrome.org/
*/
/* W h a t d o e s t h i s d o */
#scrollbutton-up,
#scrollbutton-down {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
}
/*Idk What This Does But This Was The Note Given:
"Set A Max Height Based On Min-height Plus Margin-block: 1px 0"
Don't Touch The "9px" Tho, That's What's "Perfect" From What I Tested*/
#TabsToolbar,
#TabsToolbar > hbox,
#TabsToolbar-customization-target,
#tabbrowser-arrowscrollbox {
max-height: calc(var(--tab-min-height) + 9px) !important;
}
/*══════════════════════════════════════════════════════════*/

View File

@ -0,0 +1,165 @@
/*
[][][×]
Name Brave Toolbar
Description Makes The Toolbar Match Brave's
Sub-Folder userChrome.css
*/
/* Padding Between Toolbar Icons (Back, Forward, Refresh) Inside Their Hitbox */
:root{
--toolbarbutton-inner-padding:5px !important;
}
/* Fix Tiny Reader Mode Button */
#reader-mode-button {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* Small URL Bar Height */
:root,
#urlbar-container,
#search-container,
#nav-bar-customization-target,
#nav-bar {
--urlbar-min-height: 28px !important;
}
/* Make Toolbar Small */
#urlbar-container,
#search-container,
#nav-bar-customization-target,
#nav-bar {
--urlbar-toolbar-height: 20px !important;
--urlbar-container-height: 37px !important;
}
/* Remove Top And Bottom Padding Of URL Bar */
#urlbar-container {
padding-top: 8px !important;
padding-bottom: 0px !important;
}
/* Make Back Button Closer To Left Side */
#back-button {
margin-left: 5px !important;
}
/* Make All Toolbar Buttons Have Smaller Space Between Eachother */
toolbar .toolbarbutton-1 {
margin-left: 2px !important;
}
/* Kill Refresh Animation */
#nav-bar-customization-target >
#stop-reload-button >
:is(#reload-button, #stop-button) >
.toolbarbutton-animatable-box {
display: none !important;
}
/* Make Stop Refresh Icon Visible */
#stop-reload-button[animate] >
#reload-button >
.toolbarbutton-icon, #stop-reload-button[animate] >
#reload-button[displaystop] + #stop-button >
.toolbarbutton-icon {
fill: #eeeeee !important;
}
/* Make Site Information Dropdown Look Like Brave (Kinda) */
/* Connection Not Secure Text Color */
.identity-popup-connection-not-secure{
color: #F28B82 !important;
}
/* Connection Not Secure Text Color */
.identity-popup-connection-secure{
color: #81C995 !important;
}
/* Make Not Secure Icon Have Separator Line */
#identity-box[pageproxystate="valid"].notSecure::after {
width: 1px;
content: "";
margin-left: 0px;
display: -moz-box;
background-image: linear-gradient(
transparent 20%,
color-mix(in srgb, currentColor 20%, transparent) 10%,
color-mix(in srgb, currentColor 20%, transparent) 85%,
transparent 20%
);
transition: opacity 300ms linear !important;
}
#identity-box:hover:after,
#identity-box:hover:after {
opacity: 0 !important;
}
/* Make Not Secure Box Have Text */
#identity-box[pageproxystate="valid"].notSecure ::after {
content: "Not secure";
font-size: 14px;
color: #9AA0A6;
/* Space Between Icon & Text */
text-indent: 5px;
/* Make Text Centred */
padding: 0 01px 2px 0;
display: block;
line-height: initial; /* New content takes up original line height */
}
/* Moves Bookmark Button To The Left Of URL Bar */
#star-button-box {
display: block;
position: absolute;
left: -35px;
-moz-window-dragging: no-drag;
}
#urlbar-input-container { overflow: visible !important }
/* Adds Space To URL Bar So Bookmark Doesnt Get Overlap */
#urlbar-container { margin-left: 37px !important }
/* Make Bookmark Button Centred Again */
#star-button-box.urlbar-page-action {
height: 26px !important;
width: 26px !important;
padding: 5px !important;
}
/* URL Bar Fade Animation On Hover */
#urlbar-input-container:hover {
background-color: #23252F !important;
}
#urlbar-input-container {
transition: background-color .3s ease-in;
}
/* Make Reload Button Smaller */
#reload-button > .toolbarbutton-icon {
padding: 6.5px !important;
}
/* Make Bookmark Button Smaller */
#star-button.urlbar-icon {
padding: 1px
}
/* Make Back / Forawrd Button Smaller */
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon{
padding: 5.5px !important;
}
/* Fix Search Bookmarks Item In Settings Dropdown */
#panelMenu_searchBookmarks > image:nth-child(1) {
margin-left: -10px !important;
}
#panelMenu_searchBookmarks {
height: 32px !important;
}

View File

@ -0,0 +1,9 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_tab_content.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
.tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container,
#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container{ margin-inline-end: 7px }
.tab-content:not([pinned])::before{
display: -moz-box;
content: "";
-moz-box-flex: 1;
}

View File

@ -0,0 +1,7 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_tab_label.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
.tab-label-container{ display: grid; justify-content: safe center }
.tab-label,.tab-secondary-label{ overflow: hidden }
.tabbrowser-tab[selected]:not(:hover) .tab-label-container,
#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container{ margin-inline-end: 7px }

View File

@ -0,0 +1,135 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/classic_grid_main_menu_popup.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Makes the main menu popup apper in grid-like format that somewhat resembles the menu from Australis styling */
/* Basic styling */
#appMenu-mainView{ max-width: initial !important; }
#appMenu-mainView > .panel-subview-body{
display: flex;
flex-direction: row;
max-width: 290px;
height: 580px; /* Raise this if you see scrollbar in the popup */
flex-wrap: wrap;
padding-bottom: 0px !important;
}
#appMenu-mainView > .panel-subview-body > toolbarbutton{
width: 70px;
height: 60px;
flex-grow:1;
}
#appMenu-mainView > .panel-subview-body > toolbarbutton{ -moz-box-orient: vertical }
#appMenu-mainView > .panel-subview-body > toolbaritem{ flex-grow: 1 }
#appMenu-mainView > .panel-subview-body > toolbarbutton.subviewbutton{ padding-inline: 4px !important; margin-inline: 8px !important; }
/* Hide single-line labels */
#appMenu-mainView > .panel-subview-body > #appMenu-zoom-controls > toolbarbutton > .toolbarbutton-multiline-text{ display: none !important; }
/* Show multi-line labels and some specific single-line ones */
#appMenu-zoom-controls > #appMenu-zoomReset-button > .toolbarbutton-text,
#appMenu-protection-report-button.subviewbutton > label.toolbarbutton-text,
#appMenu-mainView > .panel-subview-body > .panel-banner-item > .toolbarbutton-text,
#appMenu-mainView > .panel-subview-body toolbarbutton > .toolbarbutton-multiline-text{ display: -moz-box !important; }
/* Set some constraints for multi-line labels */
#appMenu-protection-report-button.subviewbutton > label.toolbarbutton-text,
#appMenu-mainView > .panel-subview-body toolbarbutton > .toolbarbutton-multiline-text{
max-height: 30px;
overflow: -moz-hidden-unscrollable;
margin: 0px !important;
text-align: center !important;;
}
/* Unique styling for Edit and Zoom controls */
#appMenu-zoom-controls,
#appMenu-zoom-controls + toolbarseparator,
#appMenu-edit-controls,
#appMenu-edit-controls + toolbarseparator{
order: -1;
min-width: 260px;
height: initial !important;
margin: initial !important;
flex-grow: 1;
-moz-box-pack: center;
}
/* Reorder separators & "special" items */
#appMenu-fxa-status + toolbarseparator,
#appMenu-mainView > .panel-subview-body > .sync-ui-item + toolbaritem{ order: 1 }
#appMenu-fxa-status{ order: 2 }
/* Set minimum width for "full-row" items */
#appMenu-mainView > .panel-subview-body > .sync-ui-item + toolbaritem,
#appMenu-mainView > .panel-subview-body > .panel-banner-item,
#appMenu-fxa-status,
#appMenu-fxa-status + toolbarseparator{
min-width: 280px;
height: initial !important;
margin: initial !important;
}
/* Full-row items should have contents laid out horizontally */
#appMenu-mainView > .panel-subview-body > .panel-banner-item,
#appMenu-fxa-status,
#appMenu-fxa-label{ -moz-box-orient: horizontal !important; }
/* "Main" items styling */
#appMenu-mainView > .panel-subview-body > .panel-banner-item,
toolbarbutton#appMenuRestoreLastSession.subviewbutton.subviewbutton-iconic,
toolbarbutton#appMenu-customize-button.subviewbutton.subviewbutton-iconic,
toolbarbutton#appMenu-quit-button.subviewbutton.subviewbutton-iconic,
toolbarbutton#appMenu-help-button.subviewbutton.subviewbutton-iconic{
order: 3;
height: initial !important;
margin: initial !important;
width: initial;
}
#appMenu-customize-button{ min-width: 180px }
/* Color styling for items */
#appMenu-mainView > .panel-subview-body toolbarbutton:not([disabled]):hover{ box-shadow: inset 0 0 3px 0px grey; }
#appMenu-customize-button:not(:hover),
#appMenu-help-button:not(:hover){ background-color: rgba(127,137,127,0.3) !important; }
#appMenu-help-button{ border-inline: 1px solid grey }
#appMenu-quit-button{ background-color: rgb(220,100,100) !important; }
#appMenu-quit-button:hover{ background-color: rgb(220,80,80) !important; }
/* Hide some additional items */
#appMenu-mainView > .panel-subview-body > .panel-banner-item > .toolbarbutton-multiline-text,
#appMenu-zoom-controls > #appMenu-fullscreen-button > label,
#appMenu-zoom-controls > label,
#appMenu-zoom-controls > spacer,
#appMenu-edit-controls > label,
#appMenu-edit-controls > spacer,
#appMenu-mainView > .panel-subview-body > toolbarbutton::after{ display: none !important; }
/* This makes the protections button appear consistent with Sync "bar" */
#appMenu-protection-report-button{ padding-inline-end: 34px !important; }
/* Missing icons */
#appMenu-developer-button { list-style-image: url("chrome://browser/skin/developer.svg") }
#appMenu-save-file-button { list-style-image: url("chrome://browser/skin/save.svg") }
#appMenu-open-file-button { list-style-image: url("chrome://browser/skin/open.svg") }
#appMenu-more-button{ list-style-image: url("chrome://devtools/skin/images/aboutdebugging-process-icon.svg") }
#appMenu-ssb-button{ list-style-image: url("chrome://devtools/skin/images/tool-application.svg") }
#appMenu-non-fission-window-button{ list-style-image: url("chrome://devtools/skin/images/command-frames.svg") }
#appMenu-fission-window-button{ list-style-image: url("chrome://devtools/skin/images/pseudo-class.svg") }

View File

@ -0,0 +1,22 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/grid_overflow_menu.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Makes the contents of the overflow menu appear in a three column grid */
/* Hides button labels */
#widget-overflow-mainView{ min-width: 80px !important; }
#widget-overflow-fixed-list{
display: grid;
grid-template-areas: "s s s" "a a a";
grid-auto-columns: auto;
}
#widget-overflow-mainView[visible] #widget-overflow-fixed-list { max-width: 110px }
#widget-overflow-mainView ~ panelview[visible]{ max-width: unset !important; }
#widget-overflow-fixed-list > *{ padding-block: 8px !important; }
#widget-overflow-fixed-list > #search-container{ grid-area: s }
#widget-overflow-mainView #widget-overflow-fixed-list .subviewbutton-nav::after,
#widget-overflow-mainView #widget-overflow-fixed-list .toolbarbutton-text{ display: none }

View File

@ -0,0 +1,12 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/minimal_in-UI_scrollbars.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Changes various in-UI scrollabars to be slim and more subtle */
.panel-subview-body,
#permList,
scrollbar{
color: inherit;
scrollbar-color: currentColor transparent;
scrollbar-width: thin
}

View File

@ -0,0 +1,58 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/minimal_toolbarbuttons.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Create a circular placeholder for toolbarbutton and downscale to hide them */
/* Create a placeholder for buttons */
toolbar .toolbarbutton-1:not([open]),
.titlebar-button,
#tabbrowser-tabs toolbarbutton,
#scrollbutton-up:not(:hover),
#scrollbutton-down:not(:hover){
background-image: radial-gradient(circle at center, var(--toolbarbutton-icon-fill,currentColor) 0,var(--toolbarbutton-icon-fill,currentColor) 10%,transparent 15% );
}
/* Hide placeholder on hover */
toolbar:hover + toolbar .toolbarbutton-1,
vbox:hover + toolbar .toolbarbutton-1,
toolbar:hover .toolbarbutton-1,
#tabbrowser-tabs:hover toolbarbutton,
.titlebar-buttonbox:hover > .titlebar-button{ background-image: none }
toolbar .toolbarbutton-1 > *,
.titlebar-button > *,
#tabbrowser-tabs toolbarbutton > *{
transform: scale(0);
transition: transform 82ms linear !important;
}
#scrollbutton-up > .toolbarbutton-icon,
#scrollbutton-down > .toolbarbutton-icon{ transform: scale(0) !important; transition: transform 82ms linear !important; }
toolbar:hover + toolbar .toolbarbutton-1 > *,
vbox:hover + toolbar .toolbarbutton-1 > *,
toolbar:hover .toolbarbutton-1 > *,
.toolbarbutton-1[open] > *,
.titlebar-buttonbox:hover > .titlebar-button > *,
#tabbrowser-tabs:hover toolbarbutton > *{
transform: scale(1)
}
#scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important }
#scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important }
/* Urlbar icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; }
#urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) }
/* The menu button has some margin on non-compact density which creates annnoying transitions */
/* Lets remove that as well as border since this is minimal style anyway */
#PanelUI-button{ border-left: 0px !important; margin-left: 0px !important; }
/* Add a glow-effect to some buttons when it has some "alert" */
#nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status],
#navigator-toolbox:not(:hover) #downloads-button[attention]{
filter: brightness(2) drop-shadow(0 0 3px orange) drop-shadow(0 0 1px orange);
}
#nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status^="update"],
#navigator-toolbox:not(:hover) #downloads-button[attention="success"]{
filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 1px cyan);
}

View File

@ -0,0 +1,13 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Always show tab close button on hover and never otherwise */
/*changed display:none to visibility:hidden to resolve conflict with centered_tab_content.css*/
.tabbrowser-tab .tab-close-button{
visibility:hidden;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button{
display:-moz-box !important;
visibility:visible;
}

View File

@ -2,4 +2,5 @@
See the above repository for updates as well as full license text. */
/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */
.tabbrowser-tab[fadein]{ max-width: 100vw !important }
.tabbrowser-tab[fadein]{ max-width: 100vw !important; }

View File

@ -0,0 +1,76 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Moves tabs toolbar, bookmarks toolbar and main toolbar to the bottom of the window, and makes tabs be the bottom-most toolbar */
/* By default, menubar will stay on top with two options to select it's behavior - see below */
@-moz-document url(chrome://browser/content/browser.xhtml){
#titlebar{ -moz-appearance: none !important; }
@media (-moz-os-version: windows-win10){
/* Next two variables are used by autohide_menubar.css */
#toolbar-menubar{ --uc-menubar-extra-margin: 0px }
:root[sizemode="maximized"] #toolbar-menubar{ --uc-menubar-extra-margin: 8px }
:root[sizemode="maximized"][tabsintitlebar] :where(#browser,#customization-container,#toolbar-menubar){ margin-top: 8px }
}
#mainPopupSet,
#browser,
#customization-container
/*,#nav-bar, #PersonalToolbar/* Remove this row if you want tabs to be the top-most row */
{ -moz-box-ordinal-group: 0 }
#toolbar-menubar{ position: fixed; display: flex; width: 100vw; top: 0px; }
/* Remove bottom border that won't do anything useful when at bottom of the window */
#navigator-toolbox{ border-bottom: none !important; }
#toolbar-menubar > spacer{ flex-grow: 1 }
#urlbar[breakout][breakout-extend]{
display: flex !important;
flex-direction: column-reverse;
bottom: -2px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */
top: auto !important;
}
.urlbarView-body-inner{ border-top-style: none !important; }
/* Yeah, removes window controls. Likely not wanted on bottom row */
#TabsToolbar > .titlebar-buttonbox-container{ display: none }
#toolbar-menubar > .titlebar-buttonbox-container{ order: 1000 }
/* Fix panels sizing */
.panel-viewstack{ max-height: unset !important; }
/* Fullscreen mode support */
#navigator-toolbox[inFullscreen]{ margin-top: 0 !important }
#navigator-toolbox[inFullscreen][style*="margin-top"]{ visibility: collapse }
#fullscr-toggler{ bottom: 0; top: unset !important; }
/* These three rules exist for compatibility with autohide_toolbox.css */
#navigator-toolbox{ bottom: 0px; transform-origin: bottom }
#main-window > body > box{ margin-top: 0 !important; }
#toolbar-menubar{ z-index: 1; background-color: var(--lwt-accent-color,black); }
/**************
Menubar options - By default, menubar is overlayed on top of web-content
***************/
/* Uncomment the following if you want static menubar on top of the window (make menubar enabled)
* Use when menubar is enabled to always show it */
/*
#browser,#customization-container{ padding-top: var(--uc-menubar-spacer,28px) }
*/
/* OR, if uncomment the following if you want menubar to appear below content, above tabs toolbar */
/*
#toolbar-menubar{ position: static; display: -moz-box; margin-top: 0px !important; background-color: transparent }
*/
/* set to "reverse" (without quotes) if you want tabs above menubar with the above option */
#titlebar{ -moz-box-direction: normal; }
}

View File

@ -0,0 +1,5 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_centered_text.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
#urlbar:not([focused]) #urlbar-input, /* ID for Firefox 70 */
#urlbar:not([focused]) .urlbar-input{ text-align: center !important; }

View File

@ -1,36 +1,11 @@
@import url("imports/tabs_fill_available_width.css");
@import url("imports/tabs_on_bottom.css");
@import url("imports/tabs_fill_available_width");
@import url("imports/inline_tab_audio_icons.css");
.tabbrowser-tab[fadein]:not([pinned]) {
max-width: none !important;
}
.tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
visibility: collapse !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
visibility: visible !important; display: block !important;
}
urlbar:not([focused]) .urlbar-input-box {
text-align: center;
}
urlbar .urlbar-input-box {
text-align: center;
}
tabbrowser-tab.tabs-newtab-button:hover{
background-color: var(--toolbarbutton-hover-background);
}
.tab-content:not([pinned])::before{
text-align: center;
}
@import url("imports/tab_close_button_always_on_hover.css");
@import url("imports/centered_tab_content.css");
@import url("imports/minimal_in-UI_scrollbars.css");
@import url("imports/classic_grid_main_menu_popup.css");
/* make tabs thinner :) */
:root {
--tab-min-height: 28px !important;
}
#urlbar-container {
--urlbar-container-height: 39px !important;
}
#urlbar {
margin-top: 1px;
}
.toolbarbutton{
margin-top 1px;
}