photonLikeProton.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_full_width.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This is just one place I pulled code from. I putt it it all together. Funtime60*/

/* Make urlbar popup appear full size like it did before urlbar re-design */
#urlbar-container, #urlbar{
    position: static !important;
    display: -moz-box !important;
}
#urlbar{
    height: auto !important;
    width: auto !important;
    box-shadow: inset 0 0 0 1px var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
    background-color: hsla(0,0%,100%,1.0);
    border-radius: var(--toolbarbutton-border-radius);
}
#urlbar[focused] {
    box-shadow: inset 0 0 0 1px var(--lwt-toolbar-field-border-focus, highlight);
}
.urlbarView {
    position: absolute !important;
    margin: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    border-width: 1px 0;
    top: var(--urlbar-toolbar-height);
    background-color: var(--lwt-toolbar-field-focus, inherit);
    z-index: 4;
    box-shadow: 0 10px 10px rgba(0,0,0,.1)
}
#urlbar > #urlbar-input-container{ padding: 0px !important; width: auto !important; height: auto !important; }
#urlbar > #urlbar-background{ display: none !important; }
/* This may seem pretty weird, but it gets around an issue where the height of urlbar may suddenly change when one starts typing into it */
/* If you are otherwise modifying the urlbar height then you might need to modify the height of this too */
#urlbar > #urlbar-input-container::before{ content: ""; display: -moz-box; height: 24px; }

/* Make seachbar the correct colors */
#searchbar {
    background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,1.0)) !important;
    --lwt-toolbar-field-background-color: white !important;
    border: 1px solid var(--lwt-toolbar-field-border-color) !important;
}
#searchbar:focus-within {
    box-shadow: 0 0 0 0px transparent !important;
    border-color: var(--lwt-toolbar-field-border-focus, highlight) !important;
}

/* Make context menu normal */
/* TODO make shorter items */
/* TODO fix colors of selected */
/* TODO fix colors of disabled */
menupopup {
    border-radius: 0px !important;
}
.menupopup-arrowscrollbox {
    border-radius: 0px !important;
}
menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] {
    /* for when about:config fails */
    /* background-color: var(--cus-menuhover) !important; */
    /* color: -moz-menuhovertext !important; */
}
menupopup > menu, menupopup > menuitem {
    padding-block: 2px !important;
}

/* Fix new tab & back button */
#TabsToolbar {
    --toolbarbutton-inner-padding: 6px !important;
}
toolbar .toolbarbutton-1 {
    padding: var(--toolbarbutton-outer-padding) !important;
}
:root #back-button {
    padding-inline: 3px 0 !important;
}
:root #back-button > .toolbarbutton-icon {
    background-color: var(--backbutton-background);
    background-origin: padding-box;
    background-clip: padding-box;
    border: 1px solid var(--backbutton-border-color) !important;
    border-radius: 100% !important;
    width: 34px !important;
    height: 34px !important;
    padding: 8px !important;
    transition-property: box-shadow;
    transition-duration: var(--toolbarbutton-hover-transition-duration);
}

/* MISC */
:host, :root {

}
:root {
    --cus-menuhover: rgba(0, 120, 215, 0.4);

    --lwt-toolbar-field-border-color: hsla(240,5%,5%,.25);
    --lwt-toolbar-field-background-color: hsla(0,0%,100%,.8);
    --backbutton-border-color: hsla(240,5%,5%,.3);

    --proton-tab-block-margin: 0px !important;
    --tab-border-radius: 0px !important;
    --inline-tab-padding: 7px !important; /* Original: 8px */
    --tab-min-height: 33px !important;

    --toolbarbutton-border-radius: 2px !important;
}

/* Tab fixes: Custom */
:root:not(:-moz-lwtheme) {
    --tab-selected-bgcolor: var(--toolbar-non-lwt-bgcolor) !important;
    --toolbar-non-lwt-bgcolor: #f9f9fa !important;
}
.tabbrowser-tab {
    margin-inline: -2px !important; /* Hack since the source made the padding !important so I couldn't override it to 0.
                                     Overrode the padding by canceling the padding with negative margins */
}

/* Fix Group 0 */
/* Adds the line between the toolbar and the tabs, applies over sides of selected tab too */
#navigator-toolbox {
    --tabs-border-color: rgba(0,0,0,.3) !important;
}
/* Removes line between toolbar and selected tab */
.tab-background {
    margin-bottom: 0px !important;
}
/* Fixes tab background of inactive tabs. They're transparent, the next thing with color is THE ROOT!!! */
#main-window {
    background-color: rgb(199, 199, 199) !important;
}
/* Fixes tab height */
#TabsToolbar * {
    max-height: 33px !important;
}
/* End Group 0 */
/* Fix Group 1 */
.identity-box-button:hover:not([open="true"]) {
    background-color: rgba(179, 179, 179, 0.2) !important;
}
.identity-box-button:not(:hover) {
    background-color: rgba(0, 0, 0, 0);
}
/* End Group 1 */

/* Tab fixes: site 2 */
.tab-close-button{
    margin-inline-start: 4px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 5px !important;
    margin-right: 0px !important;
}

/* Tab fixes: site 1 */
/* Unknown Tab Fixes: site 1 */
/* Enable to max tabs expand when hovered over, TODO fix so only expands overflow, right now expands not full and doesn't expand full enough.
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]):hover {
    max-width: none !important;
}*/
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
    max-width: 225px !important;
}

/* Unknown Tab Fixes: site 1 */
#TabsToolbar, #TabsToolbar-customization-target {
    height: 34px !important;
}
:root[uidensity=compact] #TabsToolbar * {
 max-height: 30px !important;
}
:root[uidensity=touch] #TabsToolbar * {
    max-height: 42px !important;
}
.tab-background, .tab-content {
    margin-top: 0 !important;
}
root:not([uidensity=rootuidensitytouch]) #tabs-newtab-button > .toolbarbutton-icon  {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
:root #tabbrowser-arrowscrollbox {
    --scrollbtn-vertical-padding: 3px !important;
}

/* Unknown Tab Fixes: site 1 */
.tab-context-line {
    display: -moz-inline-box !important;
    height: 2px !important;
    border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
}
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
    background-color: rgb(10, 132, 255) !important; /* Photon like color
                                                    Default: var(--tab-line-color, rgb(10, 132, 255))
                                                    Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */
}
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
    background-color: rgba(0,0,0,.2) !important;
    opacity: 1 !important;
    transform: none !important;
}
#TabsToolbar[brighttext] .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
    background-color: rgba(255,255,255,.2) !important;
}
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
    transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
}

/* Unknown Tab Fixes: site 1 */
.tabbrowser-tab::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
    content: "";
    display: block;
}
.tabbrowser-tab::after, .tabbrowser-tab::before {
    border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important;
    margin-block: 5px 4px !important;
    opacity: 0.3 !important;
}
.tabbrowser-tab::before {
    margin-inline-start: -1px !important;
}

/* Unknown Tab Fixes: site 1 */
:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, .tabbrowser-tab[multiselected]::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after {
    margin-top: var(--tabs-top-border-width) !important;
    margin-bottom: 0 !important;
}
/* Selected - Hide */
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after {
    border-color: var(--tabs-border-color) !important;
    margin-top: 0 !important;
    margin-bottom: var(--tabs-navbar-shadow-size) !important;
    opacity: 1 !important;
}