search

wilfredwee / photon-australis

Bringing sexy curves back to Firefox Photon.
MIT License
461 stars 69 forks source link

Changing the color on the background of the selected tab isn't working (or i'm not doing it right) #92

Closed tiaa4c closed 4 years ago

tiaa4c commented 4 years ago

I'd like my selected tab to be gray (vs black all my tabs are) so the page i'm on stands out. i tinkered with some settings but i don't know if i'm doing it wrong (99.9%) or if the feature isn't working (0.1%,)

MyuserChrome.txt

tiaa4c commented 4 years ago

nav-bar {

background-color:transparent !important;
background-image:none !important;
border-color:transparent !important;
box-shadow:none !important;

}

PersonalToolbar {

background-color:transparent !important;
background-image:none !important;
border-color:transparent !important;
box-shadow:none !important;

}

:root { --tab-curve-width: 30px; --tabs-border: !important; }

.tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox { padding-inline-start: 10px !important; }

/ To be able to see the top border of the tab / .tab-stack { margin-top: 2px !important; }

/ When the window is maximized, the first pinned tab is properly displayed. /

TabsToolbar {

padding-inline-start: 15px !important; }

.tabbrowser-tab[first-visible-tab="true"] { padding-left: 12px !important; }

tabbrowser-tabs {

margin-left: -15px !important; }

.titlebar-placeholder { border: none !important; }

.titlebar-spacer { border: none !important; }

/ Styles to account for when window is resized small, and margin-inline-start kicks in / .tabbrowser-tab[pinned="true"] { width: 40px !important; / Actual photon pinned tab is 41px, but 40px removes pixelated artifact from pinned tab favicon / }

.tabbrowser-tab[pinned="true"][style^="margin-inline-start"] { padding-left: 12px !important; }

/ Remove unneeded styles from Photon / .tabbrowser-tab::before, .tabbrowser-tab::after { border: none !important; }

/ Windows 7 specific / @media (-moz-os-version: windows-win7) { .tabbrowser-tab { background-color: transparent !important; border: none !important; }

@media (-moz-windows-default-theme) { .tabbrowser-tab:not(:-moz-lwtheme) { background-color: transparent !important; border: none !important; } } }

.tabbrowser-tab > .tab-stack > .tab-background { background-image: none !important; -moz-box-orient: horizontal !important; background-color: transparent !important; margin-top: 1px !important; }

.tab-background[selected="true"] { border: transparent !important; }

.tab-background { pointer-events: none !important; }

.tab-line { display: none !important; }

.tab-bottom-line { display: none !important; }

/ Match height of new tab button (right svg) on hover /

new-tab-button {

margin: 0 !important; }

/ overlap the tab curves / .tab-background { -moz-margin-end: -15px !important; -moz-margin-start: -15px !important; }

/ Remove blue animation on tab on page load complete / .tab-loading-burst { display: none !important; }

/ Begin tab background customizations / .tab-background[selected="true"]::before { border: none !important; content: "" !important; width: 30px !important; min-height: 30px !important; display: -moz-box !important; background-repeat: no-repeat !important; }

.tab-background[selected="true"]::after { border: none !important; content: "" !important; width: 30px !important; min-height: 30px !important; display: -moz-box !important; background-repeat: no-repeat !important; }

.tab-background[selected="true"] > spacer { margin-top: 0px !important; }

tabs-newtab-button,

new-tab-button {

width: calc(36px + 30px) !important; margin-inline-start: -15px !important; margin-top: 1px !important; }

/ Tab hover customizations / .close-icon:hover { border-radius: 50% !important; }

/ Regular tabs / .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before { display: -moz-box !important; background-repeat: no-repeat !important; content: "" !important; width: 30px !important; max-height: 30px !important; background-color: transparent !important; }

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after { display: -moz-box !important; background-repeat: no-repeat !important; content: "" !important; width: 30px !important; max-height: 30px !important; background-color: transparent !important; }

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer { margin-top: 0px !important; }

/* #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),

tabs-newtab-button:hover,

tabs-newtab-button:hover::before,

tabs-newtab-button:hover::after {

background-color: transparent !important; }

/ New tab hover customizations / .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),

tabs-newtab-button:hover {

background-position: 0px 2px, 30px 4px , 36px 2px !important; background-repeat: no-repeat !important; background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important; }

tabs-newtab-button:hover > .toolbarbutton-icon {

background: none !important; background-color: transparent !important; }

/ Color specific customizations / :root { --svg-selected-before: url("data:image/svg+xml;utf8,</svg:clipPath></svg:clipPath></svg:clipPath>
");

--svg-selected-after: url("data:image/svg+xml;utf8,</svg:clipPath></svg:clipPath></svg:clipPath>
");

--background-selected-middle: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgb(50, 50, 52) 2px, rgb(50, 50, 52) ), none !important;

--svg-hover-before: url("data:image/svg+xml;utf8,</svg:clipPath></svg:clipPath></svg:clipPath>
");

--svg-hover-after: url("data:image/svg+xml;utf8,</svg:clipPath></svg:clipPath></svg:clipPath>
");

--background-hover-middle: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgba(255,255,255,.1) 2px, rgba(255,255,255,.1) ), none;

--newtab-hover: url("data:image/svg+xml;utf8,</svg:clipPath></svg:clipPath></svg:clipPath>
"), linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)), url("data:image/svg+xml;utf8,</svg:clipPath></svg:clipPath></svg:clipPath>
"); }

/ OS-specific color variables / @media screen and (-moz-windows-theme) { :root {

} }

@media not screen and (-moz-windows-theme) { :root {

} }

@media (-moz-windows-accent-color-in-titlebar) { :root[tabsintitlebar]:not(:-moz-window-inactive) { background-color: #000000 !important; } }

.tab-background[selected="true"]::before { background-image: var(--svg-selected-before) !important; } .tab-background[selected="true"]::after { background-image: var(--svg-selected-after) !important; }

.tab-background[selected="true"] > spacer { background-image: var(--background-selected-middle) !important; }

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before { background-image: var(--svg-hover-before) !important; }

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after { background-image: var(--svg-hover-after) !important; }

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer { background-image: var(--background-hover-middle) !important; }

tabs-newtab-button:hover {

background-image: var(--newtab-hover) !important; }

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/ Colored folders for bookmark sidebar, toolbar, menu button, classic menu Updated for Firefox 60 on May 10, 2018 https://www.userchrome.org/what-is-userchrome-css.html / / Updated for Firefox 62 on Sep 15, 2018 [/questions/1232447#answer-1151074] How to change bookmark folder icons color in Library window? /

/ Standard folder /

PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,

:-moz-any(

PlacesToolbarItems,

PlacesChevronPopup,

BMB_bookmarksPopup,

bookmarksMenu)

menu[container="true"] > .menu-iconic-left > .menu-iconic-icon { fill: #e8bb00 !important; / slightly muted gold / }

/ Live Bookmark (RSS Feed) /

PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,

:-moz-any(

PlacesToolbarItems,

PlacesChevronPopup,

BMB_bookmarksPopup,

bookmarksMenu)

menu[container="true"][livemark="true"] > .menu-iconic-left > .menu-iconic-icon { fill: orange !important; }

/ Smart bookmark folder /

PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,

:-moz-any(

PlacesToolbarItems,

PlacesChevronPopup,

BMB_bookmarksPopup,

bookmarksMenu)

menu[container="true"][query="true"] > .menu-iconic-left > .menu-iconic-icon { fill: #69c !important; / similar to blue smart folder color / }

/ NEW code for treechildren /

/ Standard folder / :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container) { fill: #960 !important; background-color: #eee !important; }

/ Live Bookmark (RSS Feed) / :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, livemark) { fill: orange !important; }

/ Smart bookmark folder / :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, query) { fill: #69c !important; / similar to blue smart folder color / }

/ These "containers" are SVG in the sidebar and in the menu / :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu), :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_menu____) { fill: olive !important; }

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar), :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFoldertoolbar____) { fill: olive !important; }

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks), :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolderunfiled____) { fill: olive !important; } / END of code for treechildren /

/ Avoid overriding classic Bookmarks Toolbar and Other Bookmarks icons in menus /

BMB_bookmarksPopup #BMB_bookmarksToolbar.menu-iconic-icon,

bookmarksMenu #bookmarksToolbarFolderMenu.menu-iconic-icon {

list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important; }

BMB_bookmarksPopup #BMB_unsortedBookmarks.menu-iconic-icon,

bookmarksMenu #menu_unsortedBookmarks.menu-iconic-icon {

list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png") !important; }

wilfredwee commented 4 years ago

Hi, I can't help much with debugging your issue. Maybe the kind folks over at https://www.reddit.com/r/FirefoxCSS/ might be able to lend a hand. Thanks.