testing userchrome ideas

firefox-release-test.css

@import url(integrated_searchbar_popup.css);
@import url(compact-bookmarks.css);
@import url(sliding-bookmarks-bar.css);

/*================ GLOBAL COLORS ================*/

:root {
    --accent-color: 60, 56, 54;
    --tab-color: 240, 240, 244;
    --tab-text: 0, 0, 0;
    --secondary-accent-color: 235, 219, 178;
    --third-accent-color: 235, 219, 178;
    --light-color: 255, 255, 255;
    --dark-color: 60, 56, 54;
    --url-back: 249, 249, 251;
    --caption-min-color: 215, 153, 33;
    --caption-max-color: 69, 133, 136;
    --caption-close-color: 177, 98, 134;
}


/*================== MAIN HEADER ==================*/

toolbox#navigator-toolbox {
    border: 0 !important;
}


/*================== TABS BAR ==================*/

#titlebar #TabsToolbar {
    padding: 0px 0px 0px 0px !important;
}

.titlebar-spacer[type="pre-tabs"] {
    /* border: 0 !important; */
    display: none;
}

.tab-line {
    height: 0px !important;
}

.tabbrowser-tab {
    margin-right: 0px !important;
}

tab[selected="true"] .tab-content {}

tab[selected="true"] .tab-background {}

.tab-line {
    height: 0px !important;
}

.tabbrowser-tab {
    margin-right: 0px !important;
}

.tab-close-button {
    transition: all 0.2s ease !important;
    border-radius: 10px !important;
}

.tab-close-button:hover {
    fill-opacity: 4 !important;
}

.tabbrowser-tab>.tab-stack>.tab-background {
    border-radius: 10px !important;
}


/*================== NEW TAB BUTTON ==================*/

toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active)>.toolbarbutton-icon,
toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-icon,
toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :active)>.toolbarbutton-icon {
    transition: all 0.3s ease !important;
    border-radius: 10px !important;
}


/*================== SEARCH BAR ==================*/

searchbar#searchbar {
    margin-top: 4px !important;
    border-radius: 10px !important;
    border: 1 !important;
    box-shadow: none !important;
}


/*================== NAV BAR ==================*/

toolbar#nav-bar {
    box-shadow: none !important;
    padding-bottom: 4px !important;
}

toolbar#nav-bar toolbarbutton .toolbarbutton-icon,
toolbar#nav-bar toolbarbutton #fxa-avatar-image {
    transition: all 0.3s ease !important;
    border-radius: 10px !important;
}

#urlbar>#urlbar-background #urlbar>#urlbar-input-container {
    border-radius: 10px !important;
}

#urlbar:not([focused="true"])>#urlbar-background,
#urlbar>#urlbar-input-container {
    border-radius: 10px !important;
}


/*Fixes the funky Reload/Stop button*/

box.toolbarbutton-animatable-box {
    margin-top: -2px !important;
}


/*Vibrancy-for-macOS*/

#main-window {
    background: transparent !important;
}

#TabsToolbar,
.table-widget-empty-text {
    appearance: -moz-mac-source-list !important;
}

#TabsToolbar:-moz-lwtheme-brighttext,
.table-widget-empty-text:-moz-lwtheme-brighttext {
    appearance: -moz-mac-source-list !important;
}

.tabbrowser-tab[selected="true"] .tab-label:-moz-lwtheme-brighttext {
    color: white !important;
}

.tabbrowser-tab .tab-label:-moz-lwtheme-brighttext {
    color: rgba(255, 255, 255, 0.7) !important;
}

.tabbrowser-tab[selected="true"] .tab-background:-moz-lwtheme-brighttext {
    box-shadow: inset 0em -4em 0em var(--toolbar-bgcolor) !important;
}

#navigator-toolbox {
    background-color: transparent !important;
}


/* white flash fix */

browser[type="content-primary"],
browser[type="content"] {
    background: #1d1d3bfa !important;
    /*#222355*/
}

.tabbrowser-tab[selected="true"][class*="identity-color-"] .tab-label {
    color: var(--identity-tab-color) !important;
    font-weight: bold !important;
}


/* different tab shadows in various states. to produce the illusion of modulated depth *

.tabbrowser-tab .tab-content {
    box-shadow: 0px 0px 15px 0px hsla(0, 0%, 0%, 0.2), 0px 0px 5px 0px hsla(0, 0%, 0%, 0.1) !important;
}

.tabbrowser-tab:not([selected], [multiselected]):is(:hover, .keyboard-focused-tab, [open]) .tab-content,
.tabbrowser-tab:is([multiselected], [pinned]) .tab-content {
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.25) !important;
}

.tabbrowser-tab[selected] .tab-content,
.tabbrowser-tab:is([multiselected], [pinned])[selected] .tab-content {
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.35) !important;
}

.tabbrowser-tab:focus:not([aria-activedescendant]) .tab-content {
    box-shadow: 0px 0px 25px 3px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.35) !important;
}


/* highlight unread tabs; requires italicizeUnreadTabs.uc.js */

:root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload]:not([pending]),
:root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload][pending][busy] {
    font-style: italic !important;
}


/* Container tabs *

.tabbrowser-tab[usercontextid] .tab-background {
    background-color: color-mix( in srgb, var(--identity-tab-color) 20%, transparent) !important;
}


/* Dim discarded tabs*/

.tabbrowser-tab[pending] .tab-content:not(:hover) .tab-label {
    opacity: 0.6 !important;
}


/* Gray out the favicon icon on the inactive tab */

.tabbrowser-tab .tab-icon-image:not([selected="true"]):not([pinned]) {
    filter: opacity(40%) saturate(30%) !important;
}


/* Small fix for Firefox complete themes (added in 2016/03/09) */

.private-browsing-indicator,
#private-browsing-indicator-titlebar,
#private-browsing-indicator,
.private-browsing-indicator {
    visibility: collapse !important;
}


/* Glowing line at top. *

.tabbrowser-tab>.tab-stack>.tab-background>.tab-context-line {
    background-color: var(--identity-icon-color) !important;
    height: 2px !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 18px 2px var(--identity-icon-color) !important;
}*/

.tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line {
    background-image: linear-gradient( to right, transparent 5%, var(--identity-tab-color) 5%, var(--identity-tab-color) 95%, transparent 95%) !important;
    height: 2px !important;
    margin-bottom: 0px !important;
    border-radius: 10px !important;
}


/* Show Tab close button on hover */

.tabbrowser-tab:not([pinned]) .tab-close-button {
    display: -moz-box !important;
    opacity: 0;
    visibility: collapse !important;
    transition: opacity 0.25s, visibility 0.25s ease-in !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-close-button {
    opacity: 1;
    visibility: visible !important;
    border-radius: 10px 10px 10px 10px !important;
}

#PlacesToolbarItems {
    -moz-box-pack: center !important;
}


/* ========================= Proton Height fixes ========================= */


/* ----- Tabs Bar height ----- *

:root {
    --tab-min-height: 30px !important;
}

:root #tabbrowser-tabs {
    --tab-min-height: 30px !important;
}


/* Remove the fill when loading on the tab which
isnt formated for different border radius */

#tabbrowser-tabs {
    --tab-loading-fill: transparent !important;
    margin-left: 2px !important;
    /* fix the left tab being too close to the edge */
}

.tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-icon-image {
    opacity: 0.8 !important;
}


/* Bookmarks bar with BLUR need layout.css.backdrop-filter.enabled = true rgba(50, 50, 52, 0.85)*/

#PersonalToolbar {
    background-image: url(image/noise-512x512.png) !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: blur(32px) !important;
    backdrop-filter: blur(32px) !important;
}

#PersonalToolbar {
    -moz-box-ordinal-group: 3 !important;
}

#titlebar {
    -moz-box-ordinal-group: 2 !important;
}

#nav-bar {
    -moz-box-ordinal-group: 1 !important;
    background-color: transparent !important;
}

:root[tabsintitlebar]:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode]) #navigator-toolbox-background {
    appearance: -moz-mac-source-list !important;
}

:root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode]) #navigator-toolbox-background {
    appearance: -moz-mac-source-list !important;
}

#main-window:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode]) #navigator-toolbox {
    background-color: transparent !important;
}


/***  Glowing line at bottom. */

.tabbrowser-tab>.tab-stack>.tab-background>.tab-context-line {
    background-color: var(--identity-icon-color) !important;
    height: 2px !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 18px 2px var(--identity-icon-color) !important;
}

.tab-context-line {
    -moz-box-ordinal-group: 2;
    margin-block: 0 !important;
}


/* Blend Inactive tabs favicon */

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content:not(:hover) .tab-icon-image {
    filter: grayscale(70%) !important;
    transition: filter 0.2s ease-in;
    opacity: 0.7 !important;
}

.tabbrowser-tab[usercontextid] .tab-content {
    border-bottom: 2px solid var(--identity-icon-color) !important;
}

.tabbrowser-tab[usercontextid] .tab-content>* {
    margin-bottom: -2px !important
}