uc-bookmarks.css

/* this stylesheet exclusively deals with the bookmarks toolbar popup panel and the "edit bookmark" panel and dialog. */

#main-window #editBookmarkPanel input:focus {
    background-color: var(--ui-textbox-focus-bgcolor) !important;
}

#main-window #editBMPanel_tagsField,
#main-window #editBMPanel_namePicker,
#editBookmarkPanel input {
    appearance: none !important;
    -moz-user-select: text !important;
    user-select: text !important;
    background-color: var(--ui-textbox-bgcolor) !important;
    color: #fff !important;
    border: none !important;
    padding-block: 2px !important;
    padding-inline: 6px !important;
    outline: none !important;
    border-radius: 2px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
}

#main-window #editBookmarkPanel input::placeholder {
    color: var(--panel-description-color) !important;
    opacity: 1 !important;
}

/* 'add bookmark' popup menu formatting */
#editBookmarkPanel {
    min-width: 25em !important;
    --panel-width: 25em !important;
}

#editBookmarkPanelRows {
    padding-inline: 14px !important;
    padding-block: 8px 0 !important;
}

#editBookmarkPanelBottomContent {
    padding-inline: 10px !important;
    padding-block: 6px 8px !important;
}

#editBookmarkPanelRows > vbox {
    margin-block: 0 !important;
    padding-block: 8px 0 !important;
}

#editBookmarkPanel menulist {
    appearance: none !important;
    background-color: var(--ui-textbox-bgcolor) !important;
    line-height: normal;
    padding-block: 2px !important;
    padding-inline: 3px 5px !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

#editBookmarkPanel menulist[open="true"] {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

#editBookmarkPanel menulist[open="true"] menupopup {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

#main-window #editBMPanel_folderTree {
    min-width: unset !important;
    max-width: 27em !important;
}

#editBookmarkPanel tree {
    appearance: none !important;
    background-color: var(--ui-textbox-bgcolor) !important;
    line-height: normal;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin: 0 !important;
    font-weight: var(--uc-font-weight-thin, 400);
}

#editBookmarkPanel richlistbox[id] {
    border-radius: 2px !important;
    overflow: hidden !important;
    margin: 0 !important;
}

#editBookmarkPanel treechildren::-moz-tree-row(hover),
#editBookmarkPanel treechildren::-moz-tree-cell(hover) {
    appearance: none !important;
    background-color: var(--ebmp-hover-bgcolor) !important;
    line-height: normal;
    color: #fff !important;
    border: none !important;
}

#editBookmarkPanel treechildren::-moz-tree-row(selected),
#editBookmarkPanel treechildren::-moz-tree-cell(selected) {
    appearance: none !important;
    background-color: var(--ebmp-focus-bgcolor) !important;
    line-height: normal;
    color: #fff !important;
    border: none !important;
    outline: none !important;
}

#editBookmarkPanel treechildren::-moz-tree-row(selected):hover,
#editBookmarkPanel treechildren::-moz-tree-cell(selected):hover {
    appearance: none !important;
    background-color: var(--ebmp-focus-bgcolor) !important;
    line-height: normal;
    color: #fff !important;
    border: none !important;
}

/* #editBookmarkPanel treechildren::-moz-tree-row(hover)(selected),
#editBookmarkPanel treechildren::-moz-tree-cell(hover)(selected) {
    appearance: none !important;
    background-color: var(--ebmp-focus-bgcolor) !important;
    line-height: normal;
    color: #fff !important;
    border: none !important;
} */

#editBookmarkPanel treechildren::-moz-tree-cell-text(selected),
#editBookmarkPanel treechildren::-moz-tree-image(selected),
#editBookmarkPanel treechildren::-moz-tree-twisty(selected) {
    appearance: none !important;
    background-color: var(--ebmp-focus-bgcolor) !important;
    line-height: normal;
    color: #fff !important;
    border: none !important;
    outline: none !important;
}

#editBMPanel_newFolderBox {
    margin-block: 6px 0 !important;
}

#editBookmarkPanel menuitem,
#editBookmarkPanel menu {
    appearance: none !important;
    background-color: hsl(232, 24%, 32%) !important;
    line-height: normal !important;
    padding-bottom: 3px;
    padding-inline-start: 2px !important;
    padding-left: 0px !important;
    padding-right: 2px;
    padding-top: 2px;
    color: #fff !important;
    border: none !important;
}

#editBookmarkPanel menupopup {
    padding: 0px !important;
    appearance: none !important;
    background-color: hsl(232, 24%, 32%) !important;
    line-height: normal !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    --menupopup-inner-padding: 0 !important;
    --context-menuitem-border-radius: 0 !important;
}

#editBookmarkPanel menulist menupopup {
    margin: 0 !important;
    --menupopup-border-radius: 0 0 2px 2px !important;
}

/* this goes in userChrome.au.css */
#editBookmarkPanelDropMarker,
#editBMPanel_folderMenuList::part(dropmarker) {
    appearance: none !important;
    list-style-image: url(chrome://userchrome/content/devtools/select-arrow.svg) !important;
    margin-block: 0 !important;
}

#editBookmarkPanel #editBookmarkPanelContent button {
    appearance: none !important;
    background-color: var(--ui-textbox-bgcolor) !important;
    line-height: normal;
    padding-inline: 10px;
    min-height: 24px;
    margin: 0 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
}

#editBookmarkPanel #editBookmarkPanelContent button:is(:hover, :focus-visible) {
    appearance: none !important;
    background-color: var(--ebmp-hover-bgcolor) !important;
}

/* #editBookmarkPanel #editBookmarkPanelContent button:hover:active {
    appearance: none !important;
    background-color: var(--ebmp-focus-bgcolor) !important;
} */

#editBookmarkPanelBottomButtons {
    margin: 0 14px 14px 14px !important;
    gap: 8px !important;
    min-width: unset !important;
}

#editBookmarkPanel .panel-footer > button {
    border: 1px solid transparent !important;
    flex-grow: 5 !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    flex-basis: 25% !important;
    border-radius: var(--arrowpanel-menuitem-border-radius) !important;
}

#editBookmarkPanel .panel-footer > button:not([default]) {
    background-color: transparent !important;
    border-color: var(--button-hover-bgcolor) !important;
}

#editBookmarkPanel .panel-footer > button:not([default], [disabled], :active):is(:hover, :focus-visible) {
    background-color: var(--button-hover-bgcolor) !important;
    border-color: transparent !important;
}

#editBookmarkPanel .panel-footer > button:not([default], [disabled]):is(:hover:active, [open]) {
    background-color: var(--button-active-bgcolor) !important;
    border-color: transparent !important;
}

#editBookmarkPanel .panel-footer > button[default] {
    flex-grow: 3 !important;
    background-color: var(--button-hover-bgcolor) !important;
}

#editBookmarkPanel .panel-footer > button[default]:not([disabled], :active):is(:hover, :focus-visible) {
    background-color: var(--button-primary-hover-bgcolor) !important;
}

#editBookmarkPanel .panel-footer > button[default]:not([disabled]):is(:hover:active, [open]) {
    background-color: var(--button-primary-active-bgcolor) !important;
}

#editBMPanel_tagsField {
    display: -moz-inline-box !important;
}

#editBookmarkPanel #editBookmarkPanelContent .expander-up,
#editBookmarkPanel #editBookmarkPanelContent .expander-down {
    appearance: none !important;
    background-color: var(--ui-textbox-bgcolor) !important;
    padding: 0 !important;
    min-width: 24px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    margin-left: 6px !important;
    color: #fff !important;
    border: none !important;
    transform: none !important;
}

#editBookmarkPanel #editBookmarkPanelContent :is(.expander-up, .expander-down) .button-box {
    padding: 0 !important;
}

#editBookmarkPanel .expander-down image {
    list-style-image: url(chrome://userchrome/content/devtools/arrowhead-down.svg) !important;
    width: 17px !important;
}

#editBookmarkPanel .expander-up image {
    list-style-image: url(chrome://userchrome/content/devtools/arrowhead-up.svg) !important;
    width: 17px !important;
}

#editBookmarkPanel :is(menu, menuitem) {
    padding-left: 0 !important;
    padding-block: 2px !important;
}

#editBookmarkPanel .in-menulist :is(menu, menuitem) {
    min-height: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

#editBookmarkPanel .in-menulist .menuitem-iconic .menu-iconic-text {
    padding-inline: 0 !important;
}

#editBookmarkPanel .in-menulist :is(menu, menuitem)[_moz-menuactive="true"]:not([disabled="true"]) {
    appearance: none !important;
    background-color: hsl(232, 21%, 40%) !important;
    color: #fff !important;
    border: none !important;
}

#editBookmarkPanel menulist:is(:focus-visible, [open="true"]) {
    appearance: none !important;
    background-color: hsl(232, 24%, 32%) !important;
}

#editBookmarkPanel :is(toolbarseparator, menuseparator) {
    display: none !important;
}

#editBookmarkPanel richlistbox[id],
#editBookmarkPanel richlistbox[id] richlistitem {
    appearance: none !important;
    -moz-user-select: text !important;
    user-select: text !important;
    background-color: var(--ui-textbox-bgcolor) !important;
    color: #fff !important;
}

#bookmarkpropertiesdialog #editBMPanel_tagsSelector {
    padding: revert !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel) richlistbox[id] richlistitem {
    padding-inline-start: 2px !important;
    -moz-box-align: center !important;
    min-height: 22px !important;
}

#bookmarkpropertiesdialog richlistbox[id] richlistitem {
    margin-bottom: revert !important;
    padding-block: 2.5px !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel) richlistbox[id] richlistitem image {
    appearance: none !important;
    display: -moz-inline-box;
    width: 14px;
    height: 14px;
    padding: 0 !important;
    margin-inline: var(--context-checkbox-margin) !important;
    fill: currentColor;
    -moz-context-properties: fill, fill-opacity, stroke;
    border: 1px solid var(--checkbox-border-color) !important;
    border-radius: 2px;
    background-color: var(--checkbox-unchecked-bgcolor) !important;
    color: var(--in-parent-primary-button-text-color) !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel) richlistbox[id] richlistitem label {
    margin-inline: 0 5px !important;
    display: -moz-box !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel)
    richlistbox[id]
    richlistitem[checked="true"]
    image {
    background-color: var(--checkbox-checked-bgcolor) !important;
    border-color: var(--checkbox-checked-border-color) !important;
    list-style-image: url(chrome://userchrome/content/check.svg) !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel)
    richlistbox[id]
    richlistitem[checked="true"]
    image {
    background-color: var(--checkbox-checked-bgcolor) !important;
    border-color: var(--checkbox-checked-border-color) !important;
    list-style-image: url(chrome://userchrome/content/check.svg) !important;
}

#editBookmarkPanel richlistbox[id] richlistitem:hover image {
    background-color: var(--checkbox-unchecked-hover-bgcolor) !important;
}

#editBookmarkPanel
    richlistbox[id]
    richlistitem:is(:hover:active, [selected="true"], [current="true"])
    image {
    background-color: var(--checkbox-unchecked-active-bgcolor) !important;
}

#editBookmarkPanel richlistbox[id] richlistitem[checked="true"]:hover image {
    background-color: var(--checkbox-checked-hover-bgcolor) !important;
}

#editBookmarkPanel
    richlistbox[id]
    richlistitem[checked="true"]:is(:hover:active, [selected="true"], [current="true"])
    image {
    background-color: var(--checkbox-checked-active-bgcolor) !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel) richlistbox[id] richlistitem:hover > image {
    opacity: 1 !important;
}

#editBookmarkPanel richlistbox[id] richlistitem:is(:hover, [selected="true"], [current="true"]) {
    background-color: var(--arrowpanel-faint) !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel) checkbox {
    margin-inline-start: 4px !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel) checkbox .checkbox-check {
    margin-inline-end: 6px !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel)
    checkbox:focus-visible:not(:active)
    .checkbox-check {
    background-color: var(--checkbox-unchecked-hover-bgcolor) !important;
}

:is(#bookmarkpropertiesdialog, #editBookmarkPanel)
    checkbox:focus-visible:not(:active)
    .checkbox-check[checked] {
    background-color: var(--checkbox-checked-hover-bgcolor) !important;
}

richlistbox[id]:not(#categories) > richlistitem[selected] {
    --in-content-button-background: revert !important;
    --in-content-button-background-hover: revert !important;
    --in-content-button-background-active: revert !important;
    --in-content-button-text-color-hover: revert !important;
}

#bookmarkpropertiesdialog
    richlistbox[id]
    richlistitem:is(:hover, [selected="true"], [current="true"]) {
    background-color: var(--in-content-button-background) !important;
}

#editBookmarkPanelImage,
#editBookmarkPanel html {
    height: 140px !important;
}

#editBookmarkPanelFavicon[src] {
    box-sizing: content-box;
    width: 32px;
    height: 32px;
    padding: 5px;
    background: hsla(232, 24%, 26%, 50%) !important;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.05) !important;
    border-radius: 3px !important;
    margin-top: 10px;
    margin-inline-start: 10px;
    margin-bottom: -52px;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
}

/* bookmarks toolbar button's popup */
@-moz-document url(chrome://browser/content/browser.xhtml)
{
    .panel-subview-footer.openintabs-menuitem {
        display: none !important;
    }

    #BMB_bookmarksPopup menupopup {
        margin-inline-start: var(--menupopup-child-margin-inline-start) !important;
        margin-block-start: var(--menupopup-child-margin-block-start) !important;
    }

    #BMB_bookmarksPopup :is(menu, menuitem) {
        margin: var(--arrowpanel-menuitem-margin) !important;
        min-height: var(--subviewbutton-height) !important;
        padding: 0 var(--arrowpanel-menuitem-padding) !important;
        border-radius: var(--arrowpanel-menuitem-border-radius) !important;
    }

    #BMB_bookmarksPopup menuseparator {
        margin: var(--panel-separator-margin) !important;
    }

    #BMB_bookmarksPopup menupopup :is(menuitem, menu) .menu-iconic-icon {
        margin-inline: unset;
    }
}

#BMB_bookmarksPopup {
    --panel-separator-color: var(--desaturate-dimmed) !important;
}

#BMB_bookmarksPopup .subviewbutton > .menu-iconic-text {
    padding-inline-start: 0 !important;
}

#BMB_bookmarksPopup .subviewbutton > .menu-iconic-left {
    margin-inline-end: 8px !important;
}

#BMB_bookmarksPopup :is(.menu-accel, .menu-iconic-accel)[value] {
    margin-inline-end: 4px !important;
    padding-block: 0 !important;
}

#BMB_viewBookmarksSidebar {
    list-style-image: url(chrome://userchrome/content/skin/sidebars-right.svg) !important;
}

#BMB_viewBookmarksSidebar[positionend="true"] {
    list-style-image: url(chrome://userchrome/content/skin/sidebars-right.svg) !important;
}

#BMB_bookmarksPopup .subviewbutton > .menu-iconic-text,
#PlacesToolbar menu > .menu-iconic-text,
#PlacesToolbar menuitem > .menu-iconic-text,
menuitem.subviewbutton-iconic > .toolbarbutton-text,
#BMB_bookmarksPopup #BMB_viewBookmarksSidebar:not(.menuitem-iconic, .menu-iconic) .menu-text {
    padding-inline-start: 0 !important;
}

#BMB_viewBookmarksSidebar:not(.menuitem-iconic, .menu-iconic):before {
    content: "" !important;
    position: relative !important;
    display: -moz-inline-box !important;
    width: 16px !important;
    height: 16px !important;
    padding-inline: 0 !important;
    margin-inline: 0 8px !important;
    fill: currentColor !important;
    background-image: url(chrome://userchrome/content/skin/sidebars.svg) !important;
    -moz-context-properties: fill, fill-opacity, stroke !important;
}

#BMB_viewBookmarksSidebar:not(.menuitem-iconic, .menu-iconic)[positionend="true"]:before {
    background-image: url(chrome://userchrome/content/skin/sidebars-right.svg) !important;
}

#BMB_bookmarkThisPage[data-l10n-id="bookmarks-current-tab"] {
    list-style-image: url(chrome://userchrome/content/skin/bookmark-hollow.svg) !important;
}

#BMB_bookmarkThisPage[data-l10n-id="bookmarks-bookmark-edit-panel"] {
    list-style-image: url(chrome://userchrome/content/skin/bookmark.svg) !important;
}

#BMB_bookmarksShowAll {
    display: none !important;
}

#BMB_bookmarksPopup #BMB_bookmarksShowAllTop .menu-text {
    padding-inline-start: 0 !important;
}

#BMB_bookmarksShowAllTop:before,
menuitem#bookmarksShowAll:before {
    content: "" !important;
    position: relative !important;
    display: -moz-inline-box !important;
    width: 16px !important;
    height: 16px !important;
    padding-inline: 0 !important;
    margin-inline: 0 6px !important;
    fill: currentColor !important;
    background-image: url(chrome://userchrome/content/skin/library.svg) !important;
    transform: scaleX(-1);
    -moz-context-properties: fill, fill-opacity, stroke !important;
}

#BMB_bookmarksShowAllTop:before {
    margin-inline-end: 8px !important;
}

menuitem#bookmarksShowAll .menu-text,
menuitem#menu_bookmarkThisPage .menu-text {
    padding-inline-start: 0 !important;
}

menuitem#bookmarksShowAll:before {
    margin-inline: 6px !important;
}

menuitem#menu_bookmarkThisPage:before {
    content: "" !important;
    position: relative !important;
    display: -moz-inline-box !important;
    width: 16px !important;
    height: 16px !important;
    padding-inline: 0 !important;
    margin-inline: 6px !important;
    fill: currentColor !important;
    background-image: url(chrome://userchrome/content/skin/bookmark-hollow.svg) !important;
    -moz-context-properties: fill, fill-opacity, stroke !important;
}

menuitem#menu_bookmarkThisPage[data-l10n-id="menu-bookmark-edit"]:before {
    background-image: url(chrome://userchrome/content/skin/bookmark.svg) !important;
}

#BMB_bookmarksPopup .bookmark-item[container]:not(.menuitem-iconic, .menu-iconic):before {
    content: "" !important;
    position: relative !important;
    display: -moz-inline-box !important;
    width: 16px !important;
    height: 16px !important;
    padding-inline: 0 !important;
    margin-inline: 0 8px !important;
    fill: currentColor !important;
    background-image: url("chrome://global/skin/icons/folder.svg") !important;
    -moz-context-properties: fill, fill-opacity, stroke !important;
}

#BMB_bookmarksPopup .bookmark-item[container]:not(.menuitem-iconic, .menu-iconic) .menu-text,
#BMB_bookmarksPopup
    :is(#bookmarksToolbarFolderMenu, #BMB_bookmarksToolbar, #panelMenu_bookmarksToolbar, #BMB_viewBookmarksToolbar) .menu-text {
    padding-inline-start: 0 !important;
}

#BMB_bookmarksPopup
    :is(#bookmarksToolbarFolderMenu, #BMB_bookmarksToolbar, #panelMenu_bookmarksToolbar, #BMB_viewBookmarksToolbar):not(.menuitem-iconic, .menu-iconic):before {
    content: "" !important;
    position: relative !important;
    display: -moz-inline-box !important;
    width: 16px !important;
    height: 16px !important;
    padding-inline: 0 !important;
    margin-inline: 0 8px !important;
    fill: currentColor !important;
    background-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
    -moz-context-properties: fill, fill-opacity, stroke !important;
}

#BMB_viewBookmarksToolbar:not(.menuitem-iconic, .menu-iconic)[data-l10n-args*='{"isVisible":true}']:before {
    fill-opacity: 0.5;
}

menupopup[emptyplacesresult="true"] #BMB_viewBookmarksToolbar + menuseparator {
    display: none;
}

menupopup .openintabs-menuitem:not(.menuitem-iconic, .menu-iconic):before {
    content: "" !important;
    position: relative !important;
    display: -moz-inline-box !important;
    width: 16px !important;
    height: 16px !important;
    padding-inline: 0 !important;
    margin-inline: var(--context-iconic-margin) !important;
    fill: currentColor !important;
    background-image: url("chrome://userchrome/content/skin/duplicate-tab.svg") !important;
    -moz-context-properties: fill, fill-opacity, stroke !important;
}

menupopup .openintabs-menuitem:not(.menuitem-iconic, .menu-iconic) .menu-text {
    padding-inline-start: 0 !important;
}

#BMB_bookmarksPopup .openintabs-menuitem:not(.menuitem-iconic, .menu-iconic):before {
    margin-inline: 0 8px !important;
}

#BMB_bookmarksPopup .openintabs-menuitem:not(.menuitem-iconic, .menu-iconic) .menu-text {
    padding-inline-start: 0 !important;
}