uc-search-one-offs.css

/* this is how we get the scrolling search one-offs in the urlbar.
it also changes the appearance of the one-offs in the searchbar. */

#PopupSearchAutoComplete .search-one-offs {
    -moz-box-orient: horizontal !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
}

#PopupSearchAutoComplete .search-one-offs > * {
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    max-width: -moz-available !important;
    min-width: 0 !important;
}

#PopupSearchAutoComplete .search-panel-one-offs-container {
    padding-inline: 4px;
    clip-path: inset(0 4px 0 4px);
    display: flex !important;
}

#PopupSearchAutoComplete .search-panel-one-offs {
    display: flex !important;
    background: none !important;
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;
    height: unset !important;
    flex-wrap: nowrap !important;
    scroll-behavior: smooth;
    scrollbar-width: none !important;
    min-width: min-content !important;
    max-width: unset !important;
}

#PopupSearchAutoComplete .search-panel-one-offs-header {
    margin-inline: var(--arrowpanel-menuitem-inline-margin) 0 !important;
    min-width: -moz-fit-content !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

#PopupSearchAutoComplete .search-panel-one-offs-header:before {
    content: "Search with:";
    display: inline-block;
    margin-block: 2px 3px;
    margin-inline: 10px 4px;
    color: var(--panel-shortcut-color);
}

#PopupSearchAutoComplete .search-one-offs .button-icon {
    fill-opacity: 1 !important;
}

#PopupSearchAutoComplete .searchbar-engine-one-off-item {
    margin: 0 !important;
    padding: 2px !important;
    background: none !important;
}

#PopupSearchAutoComplete
    :is(.searchbar-engine-one-off-item, .addengine-item)
    > :is(stack, .button-box) {
    border-radius: var(--toolbarbutton-border-radius);
}

#PopupSearchAutoComplete
    :is(.searchbar-engine-one-off-item, .addengine-item):hover:not([selected])
    > :is(stack, .button-box) {
    background-color: var(--autocomplete-popup-hover-background) !important;
}

#PopupSearchAutoComplete
    :is(.searchbar-engine-one-off-item, .addengine-item)[selected]
    > :is(stack, .button-box) {
    background-color: var(--autocomplete-popup-highlight-background) !important;
}

#PopupSearchAutoComplete #searchbar-one-offs-header-label,
#PopupSearchAutoComplete .search-one-offs > .searchbar-separator {
    display: none !important;
}

#PopupSearchAutoComplete .search-setting-button,
#PopupSearchAutoComplete .search-add-engines {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

#PopupSearchAutoComplete .search-add-engines {
    gap: 4px;
    display: flex;
}

#PopupSearchAutoComplete .search-setting-button label,
#PopupSearchAutoComplete .search-add-engines label {
    display: none;
}

#PopupSearchAutoComplete .addengine-item {
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    background: none !important;
    margin: 0 !important;
}

#PopupSearchAutoComplete .addengine-item .toolbarbutton-badge-stack {
    width: 28px !important;
    height: 28px !important;
    margin: unset !important;
    display: flex !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
}

#PopupSearchAutoComplete .addengine-item .toolbarbutton-badge {
    justify-self: start !important;
    margin: 0px -5.5px !important;
}

#PopupSearchAutoComplete .search-setting-button {
    width: 28px !important;
    min-height: 28px !important;
    margin-inline: 0 !important;
}

#PopupSearchAutoComplete .search-add-engines:not(:empty) ~ .search-setting-button {
    margin-left: 4px !important;
}

#PopupSearchAutoComplete .search-one-offs-spacer {
    display: none !important;
}

#PopupSearchAutoComplete .search-setting-button > .button-box {
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#PopupSearchAutoComplete .search-setting-button .button-icon {
    width: 16px !important;
    height: 16px !important;
    list-style-image: url("chrome://global/skin/icons/settings.svg");
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
    fill-opacity: var(--urlbar-icon-fill-opacity);
}

.searchbar-separator {
    margin: calc(var(--arrowpanel-menuitem-inline-margin) - 1px)
        var(--arrowpanel-menuitem-inline-margin) !important;
}

.urlbarView .search-panel-header {
    display: none !important;
}

/* .urlbarView .search-one-offs-context-menu {
    display: none !important;
} */

.urlbarView :is(.searchbar-engine-one-off-item, .addengine-item) {
    min-width: var(--urlbar-one-offs-engine-width) !important;
    height: var(--urlbar-one-offs-engine-width) !important;
    padding: 0 !important;
    margin-inline: 0 !important;
    background: none !important;
    position: relative !important;
    background-color: transparent !important;
    pointer-events: none !important;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
    fill-opacity: 1 !important;
}

#nav-bar:not([overflowing="true"])
    .urlbarView
    :is(.searchbar-engine-one-off-item, .addengine-item) {
    fill-opacity: var(--urlbar-icon-fill-opacity) !important;
}

:root:not([customizing])
    .urlbarView
    :is(.searchbar-engine-one-off-item, .addengine-item):not(:hover, [selected]):-moz-window-inactive {
    opacity: 0.7 !important;
}

.urlbarView :is(.searchbar-engine-one-off-item, .addengine-item) > .button-box {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: var(--toolbarbutton-border-radius) !important;
}

.urlbarView
    :is(.searchbar-engine-one-off-item, .addengine-item):is([selected], :hover)
    > .button-box {
    fill-opacity: 1 !important;
}

.searchbar-engine-one-off-add-engine[image] .button-icon {
    opacity: 1 !important;
}

.searchbar-engine-one-off-add-engine[image]:not(:hover, [selected]) > .button-box {
    opacity: 0.6 !important;
}

.searchbar-engine-one-off-add-engine > .button-box:after {
    background: url(chrome://userchrome/content/skin/search-indicator-badge-add.svg) no-repeat
        center/contain !important;
    -moz-context-properties: fill, fill-opacity, stroke !important;
    fill: var(--update-badge-bg) !important;
    stroke: var(--update-badge-color) !important;
    height: 12px !important;
    width: 12px !important;
    margin-inline: -6px -6px !important;
    margin-top: -16px !important;
}

#urlbar-engine-one-off-item-bookmarks:not([selected]) {
    fill: currentColor !important;
}

/* replace google search icon since updates keep resetting the custom icon in search.json.mozlz4 */
.searchbar-engine-one-off-item[image="moz-extension://cd4aad93-9726-49dd-a5cd-9e5f5c4d76f4/favicon.ico"] .button-icon
{
    display: none;
}

.searchbar-engine-one-off-item[image="moz-extension://cd4aad93-9726-49dd-a5cd-9e5f5c4d76f4/favicon.ico"] .button-box:before
{
    content: url(chrome://userchrome/content/engines/google.svg);
    display: block;
    width: 16px;
    height: 16px;
}

/* search one-offs in urlbar */
.urlbarView .search-one-offs {
    position: absolute !important;
    z-index: 12;
    min-height: var(--urlbar-height) !important;
    max-width: var(--urlbar-one-offs-width) !important;
    padding: 0 !important;
    top: calc(-3px - var(--urlbar-height)) !important;
    right: 5px !important;
    scroll-behavior: smooth !important;
    box-sizing: border-box !important;
    border: none !important;
    /* clip-path: inset(0 2px 0 0); */
}

.urlbarView .search-panel-one-offs {
    flex-wrap: nowrap !important;
}

#urlbar:is([usertyping], [searchmode], [open][pageproxystate="invalid"]) #urlbar-input {
    margin-right: var(--urlbar-one-offs-width) !important;
}

#urlbar[textoverflow]:is([usertyping], [searchmode], [open][pageproxystate="invalid"])
    #urlbar-input {
    margin-right: 258px !important;
}

#urlbar[textoverflow="both"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
    mask-image: linear-gradient(
        to right,
        transparent,
        black 3ch,
        black calc(100% - 3ch),
        transparent
    );
}

#urlbar[textoverflow="right"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
    mask-image: linear-gradient(to left, transparent, black 3ch);
}

#urlbar[textoverflow="left"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
    mask-image: linear-gradient(to right, transparent, black 3ch);
}

#urlbar[textoverflow="both"][usertyping="true"] #urlbar-input {
    mask-image: linear-gradient(
        to right,
        transparent,
        black 3ch,
        black calc(100% - 55px),
        transparent calc(100% - 5px)
    ) !important;
}

#urlbar[textoverflow="right"][usertyping="true"] #urlbar-input {
    mask-image: linear-gradient(to left, transparent 5px, black 55px) !important;
}

#urlbar .search-one-offs:not([scrolledtostart], [scrolledtoend]) {
    mask-image: linear-gradient(to right, transparent 10px, black 30px);
}

#urlbar .search-panel-one-offs {
    min-height: var(--urlbar-height);
    align-items: center;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    opacity: 0 !important;
    transform: translateX(90px) !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    transform-origin: right !important;
    pointer-events: none !important;
}

#urlbar .search-one-offs,
#urlbar .search-one-offs * {
    pointer-events: none !important;
}

#urlbar:is([usertyping], [searchmode], [open][pageproxystate="invalid"]) .search-panel-one-offs {
    opacity: 1 !important;
    transform: none !important;
}

#userContext-icons,
#userContext-icons > * {
    pointer-events: none !important;
}

/* #page-action-buttons,
#urlbar-input-container > .urlbar-icon {
    pointer-events: none !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
} */

#urlbar:is([usertyping], [searchmode], [open][pageproxystate="invalid"]) #page-action-buttons,
#urlbar:is([usertyping], [searchmode], [open][pageproxystate="invalid"])
    #urlbar-input-container
    > .urlbar-icon {
    /* opacity: 0 !important;
    pointer-events: none !important;
    transform-style: flat !important;
    backface-visibility: hidden !important;
    transform: translateX(50px) scale(0.5) !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important; */
    display: none;
}

#urlbar #page-action-buttons,
#urlbar #urlbar-input-container > .urlbar-icon {
    animation: slideinUrlbar 0.1s linear 0s;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    transform-origin: right !important;
}

:root[customizing="true"] #urlbar :is(#page-action-buttons, #search-one-offs),
:root[customizing="true"] #urlbar #urlbar-input-container > .urlbar-icon,
toolbarpaletteitem > #urlbar-container :is(#page-action-buttons, #search-one-offs) {
    animation: none !important;
    transition: none !important;
}

@keyframes slideinUrlbar {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

#page-action-buttons > *:not([hidden]) {
    display: -moz-inline-box !important;
}

#urlbar[searchmode] #page-action-buttons * {
    pointer-events: none !important;
}

#urlbar[searchmode] #page-action-buttons {
    opacity: 0 !important;
}

#urlbar:not([usertyping], [searchmode], [open][pageproxystate="invalid"]) #pageActionButton {
    display: -moz-inline-box !important;
}

#urlbar:not([usertyping], [searchmode], [open][pageproxystate="invalid"]) #star-button-box {
    display: -moz-box !important;
}
#urlbar:is([usertyping], [searchmode], [open][pageproxystate="invalid"])
    .searchbar-engine-one-off-item,
#urlbar:is([usertyping], [searchmode], [open][pageproxystate="invalid"]) .search-one-offs *,
#urlbar:is([usertyping], [searchmode], [open][pageproxystate="invalid"]) .search-one-offs {
    pointer-events: auto !important;
}

#nav-bar:not([overflowing="true"]) #urlbar:not([open][breakout="true"]) > .urlbarView {
    display: block !important;
}

#urlbar:not([open][breakout="true"]) .urlbarView-results {
    display: none !important;
}

#nav-bar[overflowing="true"] #urlbar .search-one-offs {
    position: static !important;
    max-width: unset !important;
    clip-path: inset(0 2px 0 2px);
    mask-image: none !important;
    --desaturate-dimmed: var(--arrowpanel-dimmed);
    --desaturate-dimmed-further: var(--arrowpanel-dimmed-further);
}

#nav-bar[overflowing="true"] #urlbar .search-one-offs * {
    opacity: 1 !important;
    transition: none !important;
    pointer-events: auto !important;
    transform: none !important;
}

#nav-bar[overflowing="true"] :is(.searchbar-engine-one-off-item, .addengine-item) {
    min-width: 32px !important;
    height: 32px !important;
    padding: 2px !important;
    color: var(--panel-description-color) !important;
}

#nav-bar[overflowing="true"]
    :is(.searchbar-engine-one-off-item, .addengine-item):not([selected]):hover
    > .button-box {
    background-color: var(--arrowpanel-dimmed) !important;
}

#nav-bar[overflowing="true"]
    :is(.searchbar-engine-one-off-item, .addengine-item)[selected]
    > .button-box {
    background-color: var(--arrowpanel-faint) !important;
    color: var(--lwt-text-color) !important;
}

#nav-bar[overflowing="true"] #urlbar #page-action-buttons,
#nav-bar[overflowing="true"] #urlbar #urlbar-input-container > .urlbar-icon {
    animation: none;
    display: -moz-box;
}

#nav-bar[overflowing="true"]
    #urlbar[textoverflow]:is([usertyping], [searchmode], [open][pageproxystate="invalid"])
    #urlbar-input,
#nav-bar[overflowing="true"]
    #urlbar:is([usertyping], [searchmode], [open][pageproxystate="invalid"])
    #urlbar-input {
    margin-right: unset !important;
}

/* individual search one off adjustments */
.searchbar-engine-one-off-item[image="chrome://userchrome/content/engines/gatherer.svg"] .button-icon,
.searchbar-engine-one-off-item[image="chrome://userchrome/content/engines/scryfall.svg"] .button-icon
{
    width: 17.5px !important;
    height: 17.5px !important;
}

.searchbar-engine-one-off-item:is([image="chrome://userchrome/content/engines/wiki.svg"], [image="moz-extension://19649ec6-a7ee-4eeb-bff8-84c72584edba/favicon.svg"])
    .button-icon
{
    width: 19px !important;
    height: 19px !important;
    margin-left: -0.3px !important;
    margin-top: 0.7px !important;
}

.searchbar-engine-one-off-item:is([image="chrome://userchrome/content/engines/amazon.svg"], [image="moz-extension://c2a6335f-fd4d-4206-bae7-b755cc686f59/favicon.svg"])
    .button-icon
{
    margin-top: 0.7px !important;
}

:root[lwt-toolbar-field-brighttext] :is(.searchbar-engine-one-off-item, .addengine-item) {
    color: var(--lwt-toolbarbutton-icon-fill) !important;
}