Bubble.css for Firefox

:root {
    --bubble-panel-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    --bubble-panel-gap: 4px;
    --bubble-panel-width: 40px;
    --bubble-radius-1: 6px;
    --bubble-background-image: linear-gradient(60deg, #2879ff, #f295e4);
}
body {
    background-image: var(--bubble-background-image);
}

/* 001: tabs */

#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon, #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
    box-shadow: var(--bubble-panel-shadow) !important;
}

.tab-background {
    border-radius: var(--bubble-radius-1);
    margin-block: var(--bubble-panel-gap);
    min-height: var(--bubble-panel-width);
}

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

/* 001 */

/* 002: address bar */

#nav-bar {
    margin: var(--bubble-panel-gap);
    margin-top: 0;
    border-radius: var(--bubble-radius-1);
    box-shadow: var(--bubble-panel-shadow) !important;
}
html:not([sizemode="fullscreen"]) #navigator-toolbox {
    border-bottom: none !important;
    margin-bottom: calc(var(--bubble-panel-gap) * -1);
}

#navigator-toolbox {
    transition: margin-top 150ms ease-out;
}

/* 002 */

/* 003: webpage container */

html:not([sizemode="fullscreen"]) #browser {
    margin: var(--bubble-panel-gap);
    border-radius: var(--bubble-radius-1);
    box-shadow: var(--bubble-panel-shadow);
    overflow: clip;
}

#tabbrowser-tabpanels {
    background: transparent !important;
}