Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Can I Make the Bookmarks Folders a Solid Color in FF 89? Mac OS ...

  • 1 reply
  • 2 have this problem
  • 5 views
  • Last reply by pcbjr

more options

Can I Make the Bookmarks Folders a Solid Color in FF 89? Mac OS ...

The bookmarks folders on the sidebar are all "transparent" (for lack of a better word). I'd like them to be a solid light blue. Better for my eyes. Is there an add on, an about:config setting or a rule I can add to Chrome that will allow this? I am not speaking of the bookmarks toolbar up top, but the icons for the folders in the bookmarks sidebar on the left.

If there is a solution, although I am fairly FF literate, I am not a guru, so any real basic "See Spot run" instructions are most appreciated!

If it is of any help, here are my Chrome settings for appearance:

  1. PlacesToolbarItems, #sidebar-search-container #search-box, .sidebar-placesTree {
font-size: 16px !important;
font-weight: bold !important;

} label.tab-text {

font-size: 16px !important;

} label.tab-text {

font-weight: bold !important;

}

  1. nav-bar { /* main toolbar */
 -moz-box-ordinal-group: 1 !important;
 box-shadow: none !important;

}

  1. PersonalToolbar { /* bookmarks toolbar */
 -moz-box-ordinal-group: 2 !important;

}

  1. TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
 padding-top: 0 !important;

} /* Clean up spacing */ .titlebar-placeholder {

 display: none !important;

} toolbarbutton.bookmark-item {

 padding-top: 2px !important;
 padding-bottom: 2px !important;

}

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

}

.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. */

  1. TabsToolbar {
 padding-inline-start: 15px !important;

}

.titlebar-placeholder {

 border: none !important;

}

/* Remove unneeded styles from Photon */ .tabbrowser-tab::before, .tabbrowser-tab::after {

 border: none !important;

}

/* Windows 7 specific */

  1. browser-panel .tabbrowser-tab {
 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: none !important;

}

.tab-line {

 display: none !important;

}

.tab-bottom-line {

 display: none !important;

}

/* Match height of new tab button (right svg) on hover */ .tabs-newtab-button {

 margin: 0 !important;

}

/* overlap the tab curves */ .tab-background {

 -moz-margin-end: -15px !important;
 -moz-margin-start: -15px !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;

}

  1. new-tab-button,

.tabs-newtab-button {

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

}

/* Tab hover customizations */

/* 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;

}

  1. 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 xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'>
</foreignObject></svg>"); --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'>
</foreignObject></svg>");
 --background-selected-middle:
   linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
   linear-gradient(
     transparent
     2px,
     rgb(245,246,247) 2px,
     rgb(245,246,247)
   ),
   none;
--svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='30' clip-path='url(%23tab-curve-clip-path-start)'>
</foreignObject></svg>"); --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'>
</foreignObject></svg>");
 --background-hover-middle:
   linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
   linear-gradient(
     transparent
     2px,
     rgba(0,0,0,.1) 2px,
     rgba(0,0,0,.1)
   ),
   none !important;
--newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'>
</foreignObject></svg>"),
   linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'>
</foreignObject></svg>");

}


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

 :root {
 }

}

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

 :root {
 }

}

.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;

}


/* Standard folder */

  1. bookmarks-view treechildren::-moz-tree-image(container),
  2. PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  3. PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  4. BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon,
  5. bookmarksMenu menu[container="true"] .menu-iconic-icon {
 fill: #104B87 !important; /* slightly muted gold */

}

 /* Live Bookmark (RSS Feed) */
  1. bookmarks-view treechildren::-moz-tree-image(container, livemark),
  2. PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
  3. PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
  4. BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon,
  5. bookmarksMenu menu[container="true"][livemark="true"] .menu-iconic-icon {
 fill: orange !important;

}

 /* Smart bookmark folder */
  1. bookmarks-view treechildren::-moz-tree-image(container, query),
  2. PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
  3. PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
  4. BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon,
  5. bookmarksMenu menu[container="true"][query="true"] .menu-iconic-icon {
 fill: #69c !important; /* similar to blue smart folder color */

}

 /* These "containers" are SVG in the sidebar, not yet on the menu */
  1. bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
 fill: olive !important;

}

  1. bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
 fill: olive !important;

}

  1. bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
 fill: olive !important;

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

  1. BMB_bookmarksPopup #BMB_bookmarksToolbar.menu-iconic-icon,
  2. bookmarksMenu #bookmarksToolbarFolderMenu.menu-iconic-icon {
 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;

}

  1. BMB_bookmarksPopup #BMB_unsortedBookmarks.menu-iconic-icon,
  2. bookmarksMenu #menu_unsortedBookmarks.menu-iconic-icon {
 list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png") !important;

} /*

   Display the status bar in Firefox Quantum (Firefox 57+)
   permanently at the bottom of the browser window.
   Code below works best for the Light Firefox theme and is based on:
   https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css
  • /
  1. browser-bottombox {
   height: 20px;
   border-top: solid 1px #CCC;

}

.browserContainer>statuspanel {

   left: 4px !important;
   bottom: 0;
   transition-duration: 0s !important;
   transition-delay: 0s !important;

}

.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label {

   margin-left: 0 !important;
   border: none !important;
   padding: 0 !important;

}

window[inFullscreen="true"] #browser-bottombox {

   display:none !important;

}

window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label {

   display:none !important;

}

.toolbarbutton-icon {

   fill: darkblue !important;

}


  1. main-window:not(#f) #back-button {
 list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAjUlEQVR42uWXwQrAIAxD9f8/OttlIDK2mkYrVvCYl3cQtbX4Fu5dPQBPGAIGHYaAQYchYNBhCBh0GAIGHYaAQYchYNDhv/KpApbyaQLW8ikCI+Xu1QssLe8Flpe3AiHlj0BY+TYCJVJim0MYJrHdRcRInPkYjUic/SGxSOT4lH5J5BpM3iRyDqethItxAaTNIBfhl7xRAAAAAElFTkSuQmCC") !important;

}

  1. main-window:not(#f) #forward-button {
 list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkElEQVR42sWXSw7AIAhEy/0P3ZoumtRoKyPwSFy4YObFL9ixH2cbpibLiR2ArBUJIOlFA7g1MwBculkAy9qZAEv62QC/HhUAnz5VAFOvSoChnzkFIsL6STXAC4ICeCBIgNufBsBXAAdAtwA9hOg1tOlEjO2nuAoA/YzQ7xgtSNCSDC1K0bIcbUzQ1gxtTmWdCyMiIB+7tLLnAAAAAElFTkSuQmCC") !important;

}

'''Can I Make the Bookmarks Folders a Solid Color in FF 89? Mac OS ... ''The bookmarks folders on the sidebar are all "transparent" (for lack of a better word). I'd like them to be a solid light blue. Better for my eyes. Is there an add on, an about:config setting or a rule I can add to Chrome that will allow this? I am not speaking of the bookmarks toolbar up top, but the icons for the folders in the bookmarks sidebar on the left. If there is a solution, although I am fairly FF literate, I am not a guru, so any real basic "See Spot run" instructions are most appreciated!'' If it is of any help, here are my Chrome settings for appearance:''' #PlacesToolbarItems, #sidebar-search-container #search-box, .sidebar-placesTree { font-size: 16px !important; font-weight: bold !important; } label.tab-text { font-size: 16px !important; } label.tab-text { font-weight: bold !important; } #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; box-shadow: none !important; } #PersonalToolbar { /* bookmarks toolbar */ -moz-box-ordinal-group: 2 !important; } #TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; padding-top: 0 !important; } /* Clean up spacing */ .titlebar-placeholder { display: none !important; } toolbarbutton.bookmark-item { padding-top: 2px !important; padding-bottom: 2px !important; } :root { --tab-curve-width: 30px; --tabs-border: transparent !important; } .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; } .titlebar-placeholder { border: none !important; } /* Remove unneeded styles from Photon */ .tabbrowser-tab::before, .tabbrowser-tab::after { border: none !important; } /* Windows 7 specific */ #browser-panel .tabbrowser-tab { 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: none !important; } .tab-line { display: none !important; } .tab-bottom-line { display: none !important; } /* Match height of new tab button (right svg) on hover */ .tabs-newtab-button { margin: 0 !important; } /* overlap the tab curves */ .tab-background { -moz-margin-end: -15px !important; -moz-margin-start: -15px !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; } #new-tab-button, .tabs-newtab-button { width: calc(36px + 30px) !important; margin-inline-start: -15px !important; margin-top: 1px !important; } /* Tab hover customizations */ /* 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 xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(245,246,247);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(245,246,247);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --background-selected-middle: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgb(245,246,247) 2px, rgb(245,246,247) ), none; --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='30' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(0,0,0, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(0,0,0,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --background-hover-middle: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) ), none !important; --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(0,0,0,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"), linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(0,0,0,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); } /* OS-specific color variables */ @media screen and (-moz-windows-theme) { :root { } } @media not screen and (-moz-windows-theme) { :root { } } .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; } /* Standard folder */ #bookmarks-view treechildren::-moz-tree-image(container), #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon, #bookmarksMenu menu[container="true"] .menu-iconic-icon { fill: #104B87 !important; /* slightly muted gold */ } /* Live Bookmark (RSS Feed) */ #bookmarks-view treechildren::-moz-tree-image(container, livemark), #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon, #bookmarksMenu menu[container="true"][livemark="true"] .menu-iconic-icon { fill: orange !important; } /* Smart bookmark folder */ #bookmarks-view treechildren::-moz-tree-image(container, query), #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon, #bookmarksMenu menu[container="true"][query="true"] .menu-iconic-icon { fill: #69c !important; /* similar to blue smart folder color */ } /* These "containers" are SVG in the sidebar, not yet on the menu */ #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) { fill: olive !important; } #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) { fill: olive !important; } #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) { fill: olive !important; } /* 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; } /* Display the status bar in Firefox Quantum (Firefox 57+) permanently at the bottom of the browser window. Code below works best for the Light Firefox theme and is based on: https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css */ #browser-bottombox { height: 20px; border-top: solid 1px #CCC; } .browserContainer>statuspanel { left: 4px !important; bottom: 0; transition-duration: 0s !important; transition-delay: 0s !important; } .browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label { margin-left: 0 !important; border: none !important; padding: 0 !important; } window[inFullscreen="true"] #browser-bottombox { display:none !important; } window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label { display:none !important; } .toolbarbutton-icon { fill: darkblue !important; } #main-window:not(#f) #back-button { list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAjUlEQVR42uWXwQrAIAxD9f8/OttlIDK2mkYrVvCYl3cQtbX4Fu5dPQBPGAIGHYaAQYchYNBhCBh0GAIGHYaAQYchYNDhv/KpApbyaQLW8ikCI+Xu1QssLe8Flpe3AiHlj0BY+TYCJVJim0MYJrHdRcRInPkYjUic/SGxSOT4lH5J5BpM3iRyDqethItxAaTNIBfhl7xRAAAAAElFTkSuQmCC") !important; } #main-window:not(#f) #forward-button { list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkElEQVR42sWXSw7AIAhEy/0P3ZoumtRoKyPwSFy4YObFL9ixH2cbpibLiR2ArBUJIOlFA7g1MwBculkAy9qZAEv62QC/HhUAnz5VAFOvSoChnzkFIsL6STXAC4ICeCBIgNufBsBXAAdAtwA9hOg1tOlEjO2nuAoA/YzQ7xgtSNCSDC1K0bIcbUzQ1gxtTmWdCyMiIB+7tLLnAAAAAElFTkSuQmCC") !important; }

Modified by pcbjr

All Replies (1)

more options

PS - Example screenshot ...