main_shelf.css

:root {
    --glow-l: linear-gradient(90deg, transparent, white 80%);
    --glow-d: linear-gradient(90deg, transparent, black 80%);
}

.shelf.darkModeOn .shelfLabel {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: white;
}

body:has(.context-selected-card) .shelfLabel,
body:has(.rolodex.visible) .shelfLabel {
    display: none;
}

.shelfLabel {
    background-color: rgba(255, 255, 255, 0.5) !important;
    /* backdrop-filter: blur(10px) saturate(20); */
    color: black;
    border-radius: 16px;

    font-size: 19px;
    font-weight: 500;
    padding: 7px 12px;

    pointer-events: none;

    position: absolute;
    bottom: calc(100% + 20px);
    transform: scale(.85);
    filter: blur(10px);
    opacity: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform-origin: center center;

    transition: transform .2s, filter .2s, opacity .2s;
}

.shelf:has(.card:not(.placeholderCard):hover) .shelfLabel,
.shelfLabel.show {
    transform: scale(1) !important;
    filter: blur(0) !important;
    opacity: 1 !important;
}

.shelfLabel::after {
    content: attr(subLbl);
    font-size: 13px;
    opacity: .7;

    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shelf {
    position: absolute;
    top: calc(100% - 135px);
    left: 0;
    z-index: 12;

    width: 100vw;
    height: 135px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
    padding: 15px;

    transition: .3s;

    transform: none;
    opacity: 1;
    transition-delay: 0;

    transition: .4s;
}

body:has(.rolodex.visible) .shelf {
    z-index: 51;
}

.shelf.notLoaded {
    transform: translateY(20px);
    opacity: 0;
    transition-delay: .5s;
}

.shelf.fve {
    opacity: 0 !important;
}

.shelf.float {
    width: 100vw !important;
    padding: 0;
    /* padding: 0 0 15px 0; */
    /* background: linear-gradient(transparent, black); */
}

body:has(.rolodex.visible) .shelf::after {
    /* content: 'Click a card in your shelf to move it to the deck.'; */

    position: absolute;
    bottom: 15px;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);

    color: black;

    font-size: 12px;
    font-weight: 500;
    opacity: .5;
}

body:has(.rolodex.visible):has(.darkModeOn) .shelf::after {
    color: white;
}

.shelf.left .spcLeft {
    width: 0;
}

.shelf.center .spcLeft {
    width: 100%;
}

.shelf.right .spcLeft {
    width: 100%;
}

.shelf.left .spcRight {
    width: 100%;
}

.shelf.center .spcRight {
    width: 100%;
}

.shelf.right .spcRight {
    width: 0;
}

.shelf .spacerA {
    position: relative;
    z-index: 1000;
    transition: width .45s;
    height: 20px;
    /* background: purple; */
}

.subCards {
    width: fit-content;
    max-width: 100%;
    height: fit-content;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    box-sizing: border-box;

    position: relative;
    padding: 8px;
    overflow: visible;

    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(100px) saturate(6);
    box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 22px !important;

    transition: .4s;
}

body:has(.rolodex.visible) .subCards {
    background-color: transparent !important;
    backdrop-filter: blur(0) saturate(1) !important;
    border: none !important;
    box-shadow: none !important;

    margin-bottom: 0 !important;
    padding-bottom: 10px !important;

    pointer-events: none;
}

body:has(.rolodex.visible) .shelf:not(.float) .subCards {
    margin-bottom: 40px;
}

.shelf.float .subCards {
    max-width: 100%;
    /* height: 110px; */
    padding: 20px !important;

    border-radius: 0 !important;
    background-color: transparent;
    border: none !important;
    box-shadow: none;
    backdrop-filter: unset;

    margin-bottom: 50px;
    /* overflow-x: scroll; */

    overflow: visible !important;
    gap: 25px;
}

body:has(.timeDate.ccOpen .ccb2.selected) .subCards {
    -webkit-filter: blur(7.5px) grayscale(.75);
    filter: blur(7.5px) grayscale(.75);
    opacity: .75;
    pointer-events: none;
}

body:has(.shelf.float) .subCards::after {
    opacity: 1;
    -webkit-backdrop-filter: blur(25px) saturate(2);
    backdrop-filter: blur(25px) saturate(2);
    /* filter: blur(10px); */
}

.subCards::after {
    content: '';

    opacity: 0;
    transition: .4s;
    transition-delay: .4s;
    pointer-events: none;

    overflow: hidden;

    position: absolute;
    z-index: -1;
    inset: -55px -65px;

    background-color: rgba(238, 238, 238, 0.1);

    -webkit-backdrop-filter: blur(0px) saturate(1);
    backdrop-filter: blur(0px) saturate(1);

    mask:
        linear-gradient(to top,
            transparent 0%,
            red 50px calc(100% - 50px),
            transparent 100%),
        linear-gradient(to left,
            transparent 0%,
            red 50px calc(100% - 50px),
            transparent 100%);

    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

body[browser="Firefox"] .subCards::after {
    border-radius: 70px;
    mask: none !important;
    mask-composite: unset !important;
    -webkit-mask-composite: unset !important;

    -webkit-filter: blur(10px);
    filter: blur(10px);

    width: calc(100% + 45px);
    height: calc(100% + 45px);
    margin-top: -22.5px !important;
    margin-left: -22.5px !important;

    inset: 0 !important;
}


body:has(.darkModeOn) .subCards::after {
    background-color: rgba(34, 34, 34, 0.15);
}

body:has(.contextMenuDiv.show) .subCards::after,
body:has(.rolodex.visible) .subCards::after,
body:has(.timeDate.ccOpen .ccb.selected) .subCards::after,
body:has(.about-modal.visible) .subCards::after {
    -webkit-backdrop-filter: blur(0px) saturate(1);
    backdrop-filter: blur(0px) saturate(1) !important;
    background-color: transparent !important;

    transition-delay: 0s;
}

.shelf:not(.float) .subCards.right-circle {
    border-top-right-radius: 55px !important;
    border-bottom-right-radius: 55px !important;
}

.shelf:not(.float) .subCards.left-circle {
    border-top-left-radius: 55px !important;
    border-bottom-left-radius: 55px !important;
}