userContent.css

@import "./style.css";

/* ---------------------------- General ---------------------------- */
@-moz-document url-prefix(about:) {

    :root {
        /* Sidebar */
        --background-color-canvas: var(--CUSTOM-ABOUT-COLOR-SIDEBAR-BG) !important;
        --color-accent-primary: var(--CUSTOM-ABOUT-COLOR-SIDEBAR-BUTTON-TEXT) !important;
        --color-accent-primary-active: var(--CUSTOM-ABOUT-COLOR-SIDEBAR-BUTTON-TEXT) !important;
        --in-content-button-background-active: color-mix(in srgb, var(--CUSTOM-ABOUT-COLOR-SIDEBAR-BUTTON-TEXT) 21%, transparent) !important;

        /* Content */
        --in-content-page-color: var(--CUSTOM-ABOUT-COLOR-CONTENT-TEXT) !important;
        --text-color-deemphasized: var(--CUSTOM-ABOUT-COLOR-CONTENT-TEXT) !important;
        --button-text-color: var(--CUSTOM-ABOUT-COLOR-CONTENT-TEXT) !important;
        --text-color: var(--CUSTOM-ABOUT-COLOR-CONTENT-TEXT) !important;
        ---in-content-button-background-active: var(--CUSTOM-ABOUT-COLOR-SIDEBAR-BUTTON-TEXT) !important;

        /* Input boxes */
        --background-color-box: var(--CUSTOM-ABOUT-COLOR-CONTENT-BOX-BG) !important;
        --in-content-box-info-background: var(--CUSTOM-ABOUT-COLOR-CONTENT-BOX-BG) !important;

        /* Borders */
        --border-color-deemphasized: var(--CUSTOM-ABOUT-COLOR-CONTENT-BOX-BG) !important;
        --in-content-box-border-color: hsl(from var(--CUSTOM-ABOUT-COLOR-CONTENT-BG) h s calc(l + 10)) !important;
        --in-content-border-color: hsl(from var(--CUSTOM-ABOUT-COLOR-CONTENT-BG) h s calc(l + 10)) !important;
        --in-content-table-border-color: hsl(from var(--CUSTOM-ABOUT-COLOR-CONTENT-BG) h s calc(l + 35)) !important;

        /* FF link buttons */
        --in-content-primary-button-background: var(--CUSTOM-ABOUT-COLOR-BUTTON-FF-BG) !important;
        --in-content-primary-button-background-hover: hsl(from var(--CUSTOM-ABOUT-COLOR-BUTTON-FF-BG) calc(h + 10) s l) !important;
        --in-content-primary-button-background-active: hsl(from var(--CUSTOM-ABOUT-COLOR-BUTTON-FF-BG) calc(h + 10) s l) !important;

        /* Tables */
        --in-content-table-header-background: var(--CUSTOM-ABOUT-COLOR-CONTENT-BOX-BG) !important;
        --in-content-table-background: hsl(from var(--CUSTOM-ABOUT-COLOR-CONTENT-BOX-BG) h s calc(l + 5)) !important;
        --in-content-table-header-color: var(--CUSTOM-ABOUT-COLOR-CONTENT-TEXT) !important;
        --in-content-text-color: var(--CUSTOM-ABOUT-COLOR-CONTENT-TEXT) !important;
        --table-row-background-color: var(--CUSTOM-ABOUT-COLOR-CONTENT-BOX-BG) !important;
        --table-row-background-color-alternate: hsl(from var(--CUSTOM-ABOUT-COLOR-CONTENT-BOX-BG) h s calc(l + 5)) !important;
    }

    :root,
    :root * {
        /* Dropdown options */
        --in-content-item-selected: var(--CUSTOM-ABOUT-COLOR-CONTENT-DROPDOWN-SELECTED) !important;
        --in-content-item-hover: var(--CUSTOM-ABOUT-COLOR-CONTENT-DROPDOWN-HOVER) !important;
    }
}

/* ------------------------------- Preferences ------------------------------ */
@-moz-document url-prefix(about:preferences) {

    /*
    - Change content to a different color than the sidebar
    (Highest content containers)
    */
    vbox.main-content,
    hbox.sticky-container {
        background: var(--CUSTOM-ABOUT-COLOR-CONTENT-BG) !important;
    }

    /*
    - Add division between sidebar and content
    (Highest sidebar container)
    */
    vbox.navigation {
        border-right: 1px solid black !important;
    }

    /*
    - Change cursor to pointer
    (Blue buttons used to direct to other urls)
    */
    button.primary.small-button {
        cursor: pointer !important;
    }
}

/* --------------------------------- Addons --------------------------------- */
@-moz-document url-prefix(about:addons) {

    /*
    - Change content to a different color than the sidebar
    (Highest content containers)
    */
    div#content,
    div.sticky-container,
    div.sticky-container>div {
        background: var(--CUSTOM-ABOUT-COLOR-CONTENT-BG) !important;
    }

    /*
    - Add division between sidebar and content
    (Highest sidebar container)
    */
    div#sidebar {
        border-right: 1px solid black !important;
    }

    /*
    - Change cursor to pointer
    (Blue buttons used to direct to other urls)
    */
    button.primary {
        cursor: pointer !important;
    }

    div.card.addon {
        box-shadow: none !important;
    }

    div.card.addon:hover {
        box-shadow: 0 0 0 5px var(--CUSTOM-ABOUT-COLOR-SIDEBAR-BUTTON-TEXT) !important;
    }
}

/* --------------------------------- Newtab --------------------------------- */
@-moz-document url-prefix(about:home), url-prefix(about:newtab) {

    /*
    - Add background image with gradient fallback
    */
    body {
        background: var(--CUSTOM-NEWTAB-URL-BGIMAGE) !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }

    /*
    - Move the cog closer to the edge
    (The settings cog button for the entire page)
    */
    menu.personalizeButtonWrapper {
        inset-block-end: 5px !important;
        inset-inline-end: 5px !important;
    }

    /*
    - Remove everything except shortcuts
    */
    div.non-collapsible-section {
        display: none !important;
    }

    /*
    - Remove the padding at the top, so lower elements can get flush
    (Container for everything)
    */
    div.outer-wrapper {
        padding-top: 0px !important;
    }

    /*
    - Allign all elements to the very top
    (Container for everything)
    */
    main.newtab-main {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    /*
    - Remove the padding at the top
    (High level container around shorts)
    */
    section.collapsible-section.top-sites {
        padding: 0px !important;
    }

    /*
    - Make the elements flush with the top, and make them move away as the
    page page gets larger
    - Remove the hard-coded width so shorts allign properly
    (The main container for the entire shorts)
    */
    div.body-wrapper.on {
        position: relative !important;
        top: clamp(5px, 25px, 5vh) !important;
        width: auto !important;
    }

    /*
    - Remove the margin at the bottom
    (High level container around shorts)
    */
    section.collapsible-section {
        margin-bottom: 0px !important;
    }

    /*
    - Set the gap between shorts
    (The main grid containing short elements)
    */
    ul.top-sites-list {
        gap: var(--CUSTOM-NEWTAB-SIZE-SHORTS-GAP) !important;
    }

    /*
    - Remove the margin from the bottom
    - Remove the calculated width and just match the content size
    - Remove white background on hover
    (Each top-site-outer is the highest short element container)
    */
    li.top-site-outer {
        margin-block-end: 0px !important;
        width: fit-content !important;
        background: none !important;
    }

    /*
    - Remove existing padding
    - Change background to chrome toolbar
    - Increase border radius
    - Set the shorts width and height
    (The actual short link to click)
    */
    a.top-site-button {
        position: relative !important;
        padding: 0px !important;
        background: var(--CUSTOM-NEWTAB-COLOR-SHORTS-BG) !important;
        border-radius: 23px !important;
        width: var(--CUSTOM-NEWTAB-SIZE-SHORTS-CONTAINER) !important;
        height: var(--CUSTOM-NEWTAB-SIZE-SHORTS-CONTAINER) !important;
        overflow: hidden !important;
    }

    /*
    - Remove the outlines around elements that appear after clicking a short
    */
    a.top-site-button:focus * {
        outline: none !important;
    }

    /*
    - Push the icons toward the middle
    - Remove the white background
    - Remove the shadow around the icons
    (Container for the icon of the short)
    */
    div.tile {
        margin-top: 15px !important;
        background: none !important;
        box-shadow: none !important;
    }

    /*
    - Set icon sizes
    - Remove the background
    (Selector for all icons and their containers)
    */
    div.icon-wrapper,
    div.icon-wrapper>div {
        width: var(--CUSTOM-NEWTAB-SIZE-SHORTS-ICON) !important;
        height: var(--CUSTOM-NEWTAB-SIZE-SHORTS-ICON) !important;
        background-color: transparent !important;
        color-scheme: none !important;
    }

    /*
    - Remove the placeholder icons entirely
    */
    div.tile>div::before {
        content: none !important;
    }

    /*
    - Limit the width to the contaier
    - Set height to the container edge
    - Force the text color to be tab-text
    (Container for the text of the short)
    */
    div.title {
        width: 100% !important;
        height: 100% !important;
        color: var(--CUSTOM-NEWTAB-COLOR-SHORTS-TEXT) !important;
    }

    /*
    - Set the width to the container to center the text
    - Pad to clear the text more from the sides
    - For the text to always show two lines
    (The text of the short)
    */
    span.title-label {
        width: 100% !important;
        padding: 0 13px !important;
        text-wrap-mode: wrap !important;
        -webkit-line-clamp: 2 !important;
    }

    /*
    - Remove the pin icon shown before the short text
    */
    div.icon-pin-small {
        display: none !important;
    }

    /*
    - Make the + icon smaller
    - Adjust the icon and the text to match other shorts
    - Force the background image to be the same as text color
    (Selector for the add short button specifically)
    */
    li.add-button div.icon-wrapper {
        width: 25px !important;
        height: 25px !important;
        margin-top: 9px !important;
        margin-bottom: 6px !important;
        fill: var(--CUSTOM-NEWTAB-COLOR-SHORTS-TEXT) !important;
    }

    /*
    Make all elements of the add short also turn the cursor a pointer, the same as other elements
    */
    li.add-button>div * {
        cursor: pointer !important;
    }

    /*
    - Position the button inside of the container
    (Context menu button for the shorts)
    */
    button.context-menu-button.icon {
        top: 7px !important;
        right: 7px !important;
    }

    /*
    - Move the menu further right
    - Increase border radius
    - Set the background to be the same as shorts
    - Increase padding from all sides
    (The highest container for the context menu)
    */
    span.context-menu {
        margin-inline-start: 7px !important;
        border-radius: 20px !important;
        background: var(--CUSTOM-NEWTAB-COLOR-CONTEXT-BG) !important;
        color: var(--CUSTOM-NEWTAB-COLOR-CONTEXT-TEXT) !important;
        padding: 4px 9px !important;
    }

    /*
    - Padding between elements
    (Containers for each option in the context menu)
    */
    li.context-menu-item {
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    /*
    - Change the background color on hovering over context menu options
    */
    li.context-menu-item:hover {
        background: var(--CUSTOM-NEWTAB-COLOR-CONTEXT-HOVER-BG) !important;
    }

    /*
    - Increase the width of the option
    - Configure the text to be in the middle
    (Text of the context menu options)
    */
    li.context-menu-item span {
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
    }

    /*
    - Disable the lines
    (Separator lines within the context menu)
    */
    span.context-menu li.separator {
        display: none !important;
    }

    /*
    - Change background
    (Add shortcut popup background)
    */
    div.modalOverlayOuter.active {
        background: var(--CUSTOM-NEWTAB-COLOR-POPUP-OUTSIDE-BG) !important;
    }

    /*
    - Change background
    (Add shortcut popup)
    */
    div.modal {
        background: var(--CUSTOM-CHROME-COLOR-TOOLBAR-BG) !important;
        border: 2px solid var(--CUSTOM-NEWTAB-COLOR-POPUP-BORDER) !important;
    }

    /*
    - Change border
    (Add shortcut popup bottom portion)
    */
    section.actions {
        border-top: 2px solid var(--CUSTOM-NEWTAB-COLOR-POPUP-BORDER) !important;
    }

    /*
    - Change background text
    (Add shortcut popup text color)
    */
    div.modal h3,
    div.modal span {
        color: var(--CUSTOM-CHROME-COLOR-TAB-TEXT) !important;
    }

    /*
    - Change background and text
    - Remove outline on focus
    (Add shortcut popup input boxes)
    */
    div.modal input {
        background: var(--CUSTOM-NEWTAB-COLOR-POPUP-BOX-BG) !important;
        border: 1px solid var(--CUSTOM-NEWTAB-COLOR-POPUP-BORDER) !important;
        color: white !important;
        outline: none !important;
    }

    div.modal input::selection {
        background: var(--CUSTOM-NEWTAB-COLOR-POPUP-BOX-SELECT-BG) !important;
        color: var(--CUSTOM-NEWTAB-COLOR-POPUP-BOX-SELECT-TEXT) !important;
    }

    /*
    - Add new border
    (Add shortcut popup preview container)
    */
    div.modal .top-site-inner {
        border: 1px solid var(--CUSTOM-NEWTAB-COLOR-POPUP-BORDER) !important;
        border-radius: 20px !important;
    }

    /*
    - Remove white preview border
    (Add shortcut popup preview)
    */
    div.modal .tile {
        border: none !important;
    }

    /*
    - Change background and text
    - Remove border
    - Remove the halo on hover
    (Add shortcut popup buttons)
    */
    div.modal button:not(.a11y-link-button.enable-custom-image-input) {
        background: var(--CUSTOM-NEWTAB-COLOR-POPUP-BUTTON-BG1) !important;
        color: var(--CUSTOM-NEWTAB-COLOR-POPUP-BUTTON-TEXT) !important;
        border: none !important;
        box-shadow: none !important;
    }

    div.modal button:not(.a11y-link-button.enable-custom-image-input):hover {
        background: hsl(from var(--CUSTOM-NEWTAB-COLOR-POPUP-BUTTON-BG1) h s calc(l + 15)) !important;
    }

    /*
    - Remove the buttons
    (Add shortcut popup clear box buttons)
    */
    button.icon.icon-clear-input.icon-button-style {
        display: none !important;
    }

    /*
    
    (Add shortcut popup buttons that look like links)
    */
    button.a11y-link-button.enable-custom-image-input {
        color: var(--CUSTOM-NEWTAB-COLOR-POPUP-BUTTON-BG2) !important;
    }

    /*
    
    (Main settings containers)
    */
    div.customize-menu.customize-animate-enter-done,
    div.customize-menu.customize-animate-enter-done>div.close-button-wrapper {
        background: var(--CUSTOM-NEWTAB-COLOR-SETTINGS-BG) !important;
    }

    /*
    (Main settings container all text)
    */
    div.customize-menu.customize-animate-enter-done * {
        color: var(--CUSTOM-NEWTAB-COLOR-SETTINGS-TEXT) !important;
    }

    /*
    (Main settings cog icon)
    */
    button#settings-link {
        fill: var(--CUSTOM-NEWTAB-COLOR-SETTINGS-TEXT) !important;
    }

    select#row-selector {
        background: var(--CUSTOM-NEWTAB-COLOR-SETTINGS-SELECT-BG) !important;
        border: 2px solid var(--CUSTOM-NEWTAB-COLOR-SETTINGS-TEXT) !important;
    }

    select#row-selector>option {
        background: var(--CUSTOM-NEWTAB-COLOR-SETTINGS-SELECT-BG) !important;
    }
}