wavefox.css

/* ---------------------------------------- Firefox 89 and newer ---------------------------------------- */
/* ---------------------------------------- Windows 10 / Windows 8 / Windows 7 / Linux / MacOS ---------------------------------------- */



/* ---------------------------------------- User preferences ---------------------------------------- */

:root
{

/* Fixes by Robijntje */
    --inline-tab-padding: 16px !important;

/* ---------- Density ---------- */

    --tabbar-head-compact: 2px;

    --tabbar-head-normal: 2px;

    --tabbar-head-touch: 2px;

/* ---------- System / White / Dark ---------- */

    --first-shadow-color: black;

    --first-shadow-blur: 2px;    /* Even values only */

    --first-shadow-intensity-light: 10%;

    --first-shadow-intensity-dark: 25%;

    --second-shadow-color: black;

    --second-shadow-blur: 8px;    /* Even values only */

    --second-shadow-intensity-light: 20%;

    --second-shadow-intensity-dark: 50%;

/* ---------- Alpenglow / Repository ---------- */

    /* --tab-indicator-color: var(--toolbarbutton-icon-fill); */

    --tab-indicator-intensity: 100%;
}

/* ---------------------------------------- SVG ---------------------------------------- */

:root
{
    --left-side-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='context-fill' d='m 0,100 c 16.666667,0 33.334333,0 41.667167,-16.666167 C 50,66.667667 50,33.334333 58.333833,16.667167 66.667667,0 83.333333,0 100,0 c 0,0 0,100 0,100 0,0 -100,0 -100,0 z'/><path fill='transparent' stroke='context-stroke' stroke-width='4px' d='M 0,98 C 16.666667,98 33.334333,98 41.667167,82.0005 50,66.001 50,34.001 58.333833,18.0005 66.667667,2 83.333333,2 100,2'/></svg>");

    --middle-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='transparent' stroke='context-stroke' stroke-width='4px' d='M 0,2 C 0,2 100,2 100,2'/></svg>");

    --right-side-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='context-fill' d='M 100,100 C 83.333333,100 66.667667,100 58.333833,83.333833 50,66.667667 50,33.334333 41.667167,16.667167 33.334333,0 16.666667,0 0,0 c 0,0 0,100 0,100 0,0 100,0 100,0 z'/><path fill='transparent' stroke='context-stroke' stroke-width='4px' d='M 0,2 C 16.666667,2 33.334333,2 41.667167,18.0005 50,34.001 50,66.001 58.333833,82.0005 66.667667,98 83.333333,98 100,98'/></svg>");
}

/* ---------------------------------------- Unneeded styles ---------------------------------------- */

:root
{
    --tab-selected-bgcolor: unset !important;

    --lwt-selected-tab-background-color: unset !important;

    --tabs-border-color: unset !important;
}

/* ---------------------------------------- Density ---------------------------------------- */

/* ---------- Compact mode ---------- */

:root[uidensity="compact"]
{
    --tab-min-height: 30px !important;
}

:root[uidensity="compact"][sizemode="normal"],
:root[uidensity="compact"]:not([tabsintitlebar]),
:root[uidensity="compact"] #toolbar-menubar:not([autohide][inactive]) + #TabsToolbar
{
    --tabbar-head: var(--tabbar-head-compact);
}

/* ---------- Normal mode ---------- */

:root:not([uidensity="compact"])
{
    --tabbar-head: var(--tabbar-head-normal);
}

/* ---------- Touch mode ---------- */

:root[uidensity="touch"]
{
    --tab-min-height: 42px !important;

    --tabbar-head: var(--tabbar-head-touch);
}

/* ---------------------------------------- Alpenglow / Repository ---------------------------------------- */

:root:not([lwtheme-mozlightdark])
{
    --indicator-color: color-mix(in srgb, var(--tab-indicator-color) var(--tab-indicator-intensity), transparent);
}

:root:not([lwtheme-mozlightdark]) .tabbrowser-tab[selected] .tab-background::before,
:root:not([lwtheme-mozlightdark]) .tabbrowser-tab[selected] .tab-background::after
{
    stroke: var(--indicator-color);
}

:root:not([lwtheme-mozlightdark]) .tabbrowser-tab[selected] .tab-background
{
    background-color: var(--toolbar-bgcolor) !important;
    background-image: var(--middle-svg) !important;
    stroke: var(--indicator-color);
    -moz-context-properties: stroke;
}

/* ---------------------------------------- Color scheme ---------------------------------------- */

@media (prefers-color-scheme: light)
{
    :root[lwtheme-mozlightdark]
    {
        --first-shadow: color-mix(in srgb, var(--first-shadow-color) var(--first-shadow-intensity-light), transparent);

        --second-shadow: color-mix(in srgb, var(--second-shadow-color) var(--second-shadow-intensity-light), transparent);
    }

    :root[lwtheme-mozlightdark]:-moz-lwtheme-brighttext
    {
        --first-shadow: color-mix(in srgb, var(--first-shadow-color) var(--first-shadow-intensity-dark), transparent);

        --second-shadow: color-mix(in srgb, var(--second-shadow-color) var(--second-shadow-intensity-dark), transparent);
    }
}

@media (prefers-color-scheme: dark)
{
    :root[lwtheme-mozlightdark]
    {
        --first-shadow: color-mix(in srgb, var(--first-shadow-color) var(--first-shadow-intensity-dark), transparent);

        --second-shadow: color-mix(in srgb, var(--second-shadow-color) var(--second-shadow-intensity-dark), transparent);
    }

    :root[lwtheme-mozlightdark]:-moz-lwtheme-darktext
    {
        --first-shadow: color-mix(in srgb, var(--first-shadow-color) var(--first-shadow-intensity-light), transparent);

        --second-shadow: color-mix(in srgb, var(--second-shadow-color) var(--second-shadow-intensity-light), transparent);
    }
}

/* ---------------------------------------- Context menus (Not os related) ---------------------------------------- */

:root[uidensity="compact"]
{
    --arrowpanel-menuitem-margin: 0 2px !important;
    --arrowpanel-menuitem-padding-block: 0 2px !important;
    --panel-separator-margin: 2px 2px !important;
    --panel-subview-body-padding: 2px 0 !important;
    --arrowpanel-padding: 2px !important;
}

:root[uidensity="compact"] .panel-subview-footer-button
{
    margin-bottom: 2px !important;
}

:root[uidensity="compact"] .panel-header
{
    padding: 0 !important;
}

:root[uidensity="compact"] .subviewbutton-back
{
    padding: 0 !important;
    margin: 2px 0 0 2px !important;
}

:root[uidensity="compact"] #allTabsMenu-allTabsViewTabs > .all-tabs-item
{
    margin-inline: 2px !important;
}

:root[uidensity="compact"] #allTabsMenu-allTabsViewTabs
{
    padding-bottom: 2px !important;
}

:root[uidensity="compact"] #emptyDownloads
{
    padding: 0 !important;
    margin: 6px 2px !important;
}

:root[uidensity="compact"] #downloadsListBox
{
    margin: 0px !important;
}

:root[uidensity="compact"] #downloadsListBox > richlistitem
{
    padding: 0 2px !important;
    margin: 2px 0 !important;
}

:root[uidensity="compact"] #downloadsListBox > richlistitem:last-child
{
    margin-bottom: 0 !important;
}

:root[uidensity="compact"] #downloadsPanel-blockedSubview,
:root[uidensity="compact"] #downloadsPanel-mainView
{
    padding: 0 2px !important;
}

/* ---------------------------------------- Context menus (Os related) ---------------------------------------- */

@media (-moz-os-version: windows-win10)
{
    @media (-moz-windows-non-native-menus)
    {
        :root[uidensity="compact"] menupopup
        {
            --panel-padding: 2px 0 !important;
        }

        :root[uidensity="compact"] menupopup > menuitem,
        :root[uidensity="compact"] menupopup > menu
        {
            padding-block: 2px !important;
        }
    }
}

/* ---------------------------------------- Rounded corners (SVG) ---------------------------------------- */

.tab-background::before,
.tab-background::after
{
    content: "";
    position: absolute;
    width: var(--tab-min-height);
    height: var(--tab-min-height);
    bottom: 0%;
    fill: transparent;
    z-index: -1;
    background-repeat: no-repeat;
    pointer-events: none;
    -moz-context-properties: fill, stroke;
}

.tab-background::before
{
    right: 100%;
    background-image: var(--left-side-svg);
}

.tab-background::after
{
    left: 100%;
    background-image: var(--right-side-svg);
}

.tabbrowser-tab[selected] .tab-background::before,
.tabbrowser-tab[selected] .tab-background::after
{
    fill: var(--toolbar-bgcolor) !important;
}

.tabbrowser-tab:hover .tab-background::before,
.tabbrowser-tab:hover .tab-background::after
{
    fill: var(--toolbarbutton-hover-background);
}

.tabbrowser-tab[multiselected] .tab-background::before,
.tabbrowser-tab[multiselected] .tab-background::after
{
    fill: var(--toolbarbutton-active-background);
}

/* ---------------------------------------- Titlebar ---------------------------------------- */

:root[lwtheme-mozlightdark] #titlebar
{
    --toolbarbutton-icon-fill: currentColor;

    --toolbarbutton-hover-background: color-mix(in srgb, currentColor 10%, transparent) !important;

    --toolbarbutton-active-background: color-mix(in srgb, currentColor 20%, transparent) !important;
}

/* ---------------------------------------- Tabs ---------------------------------------- */

.tabbrowser-tab
{
    margin-top: var(--tabbar-head) !important;
    padding-inline: unset !important;
    color: unset !important;
    --tab-label-mask-size: 2em !important;
}

.tabbrowser-tab[selected] .tab-stack
{
    color: var(--lwt-tab-text, var(--toolbar-color)) !important;
}

#tabbrowser-tabs[overflow] .tabbrowser-tab:is([selected],:hover,[multiselected]):not([pinned]) .tab-stack
{
    margin-inline: calc(var(--tab-min-height) / 2) !important;
}

.tab-background
{
    position: relative !important;
    margin: 0 calc(var(--tab-min-height) / 2) !important;
    border: unset !important;
    border-radius: unset !important;
    box-shadow: unset !important;
    opacity: unset !important;
}

.tabbrowser-tab:hover:not([selected],[multiselected]) .tab-background
{
    background: var(--toolbarbutton-hover-background) !important;
}

.tabbrowser-tab[multiselected]:not([selected]) .tab-background
{
    background: var(--toolbarbutton-active-background) !important;
}

.tab-context-line
{
    margin: calc(var(--tab-min-height) - 2px) 0 0 0 !important;
}

:root[uidensity="compact"] .tabbrowser-tab[pinned] .tab-context-line
{
    margin-top: calc(var(--tab-min-height) - 6px) !important;
    margin-inline: -5px !important;
}

.tabbrowser-tab[pinned] .tab-context-line
{
    margin-top: calc(var(--tab-min-height) - 8px) !important;
    margin-inline: -6px !important;
}

:root[uidensity="touch"] .tabbrowser-tab[pinned] .tab-context-line
{
    margin-top: calc(var(--tab-min-height) - 10px) !important;
    margin-inline: -7px !important;
}

.tabbrowser-tab:is([image],[pinned]):not([selected]) .tab-content[attention],
.tabbrowser-tab:not([selected]) .tab-content[pinned][titlechanged]
{
    background-position: center top !important;
}

.tab-content[pinned]
{
    padding-inline: calc(var(--tab-min-height) / 3) !important;
}

.tab-loading-burst
{
    display: none !important;
}

.tab-close-button
{
    width: 24px !important;
    padding: 7px !important;
}

.tab-icon-overlay:is([pinned],[sharing]):not([crashed])
{
    --tab-icon-overlay-stroke: var(--toolbarbutton-hover-background);
    color: currentColor !important;
    stroke: unset !important;
    top: -6px !important;
}

:root[lwtheme-mozlightdark] .tabbrowser-tab[selected] .tab-icon-overlay:is([pinned],[sharing]):not([crashed])
{
    background-color: var(--toolbar-bgcolor);
}

/* ---------------------------------------- Tabbar ---------------------------------------- */

#TabsToolbar
{
    --toolbarbutton-inner-padding: unset !important;
    --attention-icon-color: currentColor !important;
    position: relative;
    clip-path: fill-box;
}

#TabsToolbar::before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    bottom: 0%;
    z-index: 1;
    background-repeat: no-repeat;
    pointer-events: none;
}

#TabsToolbar .toolbarbutton-1
{
    margin-top: var(--tabbar-head) !important;
}

#TabsToolbar #search-container
{
    margin-top: var(--tabbar-head) !important;
    padding-block: unset !important;
}

#TabsToolbar #personal-bookmarks
{
    margin-top: var(--tabbar-head) !important;
}

.accessibility-indicator,
.private-browsing-indicator
{
    margin-top: var(--tabbar-head) !important;
}

#scrollbutton-up,
#scrollbutton-down
{
    margin-top: var(--tabbar-head) !important;
    padding: unset !important;
}

spacer[part="overflow-start-indicator"],
spacer[part="overflow-end-indicator"]
{
    margin-top: var(--tabbar-head) !important;
}

.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"]
{
    display: none !important;
}

/* ---------------------------------------- Indents ---------------------------------------- */

#tabbrowser-tabs[haspinnedtabs]:not([overflow]) .tabbrowser-tab[first-visible-tab],
#tabbrowser-tabs[positionpinnedtabs],
.tabbrowser-tab[first-visible-unpinned-tab]
{
    margin-left: 11px !important; /* Margin on first tab */
}

.tabbrowser-tab[last-visible-tab]
{
    margin-right: 4px !important;
}

#tabs-newtab-button {
    margin-bottom: 3px !important;
}

/* ---------------------------------------- Shadows ---------------------------------------- */

.tabbrowser-tab[selected] .tab-background
{
    filter: drop-shadow(0 0 calc(var(--first-shadow-blur) / 2) var(--first-shadow)) drop-shadow(0 0 calc(var(--second-shadow-blur) / 2) var(--second-shadow));
}

#TabsToolbar::before
{
    box-shadow: inset 0 calc(-1 * var(--first-shadow-blur)) var(--first-shadow-blur) calc(-1 * var(--first-shadow-blur)) var(--first-shadow),
                inset 0 calc(-1 * var(--second-shadow-blur)) var(--second-shadow-blur) calc(-1 * var(--second-shadow-blur)) var(--second-shadow);
}

/* ---------------------------------------- Separators ---------------------------------------- */

.tabbrowser-tab:not([pinned],[first-visible-tab])::before,
.tabbrowser-tab[last-visible-tab]:not([pinned])::after
{
    content: "";
    display: inherit;
    position: absolute;
    width: 1px;
    background-color: color-mix(in srgb, currentColor 50%, transparent);
    margin-block: calc(var(--tab-min-height) / 3 - 3px);
}

#tabbrowser-tabs:not([overflow])
    .tabbrowser-tab:is(
        [selected],
        :hover,
        :hover:not([pinned]) + .tabbrowser-tab,
        [selected]:not([pinned]) + .tabbrowser-tab:not([selected]),
        [multiselected])::before,
#tabbrowser-tabs:not([overflow])
    .tabbrowser-tab:is(
        [selected],
        [last-visible-tab]:not([pinned]):hover,
        [multiselected])::after
{
    background-color: transparent;
}

.tabbrowser-tab::after
{
    margin-left: -1px;
}

#tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-unpinned-tab]::before,
#tabbrowser-tabs[overflow] .tabbrowser-tab[last-visible-tab]::after
{
    background-color: transparent;
}

#tabbrowser-tabs[overflow] .tabbrowser-tab:active::before
{
    background-color: transparent;
    transition-delay: 0.25s;
}

@media (min-resolution: 1.25dppx)
{
    .tabbrowser-tab::before,
    .tabbrowser-tab::after
    {
        width: 0.8px !important;
    }
}

@media (min-resolution: 1.5dppx)
{
    .tabbrowser-tab::before,
    .tabbrowser-tab::after
    {
        width: 0.66px !important;
    }
}

/* ---------------------------------------- Linux ---------------------------------------- */

@media (-moz-gtk-csd-available)
{
    :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-background::before,
    :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-background::after
    {
        fill: color-mix(in srgb, var(--toolbar-bgcolor), white 15%) !important;
    }

    :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-icon-overlay:is([pinned],[sharing]):not([crashed])
    {
        background-color: color-mix(in srgb, var(--toolbar-bgcolor), white 15%);
    }

    @media (prefers-contrast)
    {
        :root:not(:-moz-lwtheme) .tab-background
        {
            outline: unset !important;
        }
    }
}

/* ---------------------------------------- Windows 10 / Windows 8 / Windows 7 ---------------------------------------- */

@media (-moz-os-version: windows-win10),
       (-moz-os-version: windows-win8),
       (-moz-os-version: windows-win7)
{
    @media (prefers-contrast)
    {
        :root:not(:-moz-lwtheme) .tab-background
        {
            outline: unset !important;
        }

        :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-background::before,
        :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-background::after
        {
            fill: color-mix(in srgb, var(--toolbar-bgcolor), white 15%) !important;
        }

        :root:not(:-moz-lwtheme) .tabbrowser-tab[selected] .tab-icon-overlay:is([pinned],[sharing]):not([crashed])
        {
            background-color: color-mix(in srgb, var(--toolbar-bgcolor), white 15%);
        }
    }
}

/* ---------------------------------------- Windows 10 ---------------------------------------- */

@media (-moz-os-version: windows-win10)
{
    @media not (prefers-contrast)
    {
        @media (-moz-windows-accent-color-in-titlebar)
        {
            :root:is(:not(:-moz-lwtheme),[lwt-default-theme-in-dark-mode]) #toolbar-menubar,
            :root:is(:not(:-moz-lwtheme),[lwt-default-theme-in-dark-mode]) #TabsToolbar
            {
                background: -moz-accent-color !important;
            }

            :root:is(:not(:-moz-lwtheme),[lwt-default-theme-in-dark-mode]) #titlebar
            {
                color: -moz-accent-color-foreground !important;
            }
        }

        .titlebar-buttonbox-container
        {
            -moz-box-align: start !important;
        }

        .titlebar-button:not(.titlebar-close):hover
        {
            background-color: var(--toolbarbutton-hover-background) !important;
        }

        .titlebar-button:not(.titlebar-close):hover:active
        {
            background-color: var(--toolbarbutton-active-background) !important;
        }
    }
}

/* ---------------------------------------- Windows 7 ---------------------------------------- */

@media (-moz-os-version: windows-win7)
{
    @media (-moz-windows-compositor)
    {
        :root:not(:-moz-lwtheme) #toolbar-menubar,
        :root:not(:-moz-lwtheme) #TabsToolbar
        {
            background: color-mix(in srgb, white 50%, transparent) !important;
        }

        :root:not(:-moz-lwtheme) #toolbar-menubar[autohide][inactive] + #TabsToolbar
        {
            background: linear-gradient(transparent, color-mix(in srgb, white 75%, transparent)) !important;
        }

        :root[lwtheme-mozlightdark]:is(:-moz-lwtheme-darktext,:-moz-lwtheme-brighttext) #TabsToolbar
        {
            background: unset !important;
        }

        :root:-moz-lwtheme #TabsToolbar
        {
            color: unset !important;
        }
    }

    @media (-moz-windows-compositor: 0)
    {
        :root[lwtheme-mozlightdark] #TabsToolbar
        {
            background: unset !important;
        }
    }
}