OneTab card style (for Overriding onetab.css) by KABA

/* ==UserStyle==
@name         OneTab details card style
@version      20241220.17.37
@namespace    https://userstyles.world/user/KABA
@description  Please refer to the following and override onetab.css with Override web content.ref: https://developer.chrome.com/docs/devtools/overrides#make-changes
@author       KABA
@license      No License
==/UserStyle== */

@-moz-document url-prefix("chrome-extension://chphlpgkkbolifaimnlloiipkdnihall/onetab.html") {
:root {
    --drop-area-border: 1px dashed #4061a7;

    @media (prefers-color-scheme: light) {
        --link-color: #234da7;
        --text-color: #444;
        --text-color-weak: #777;
        --text-color-em: #333;
        --bg-color: #fff;
        --border-color: #ccc;
        --dash-color: #ddd;

        --drop-area-gradient:
            repeating-linear-gradient(
                -45deg,
                #f5f9ff,
                #f5f9ff 10px,
                #0000   10px,
                #0000   20px
            );
        --dragged-element-bg: #ffffff4d;
        --dragged-element-box-shadow: 2px 2px 16px var(--dash-color);
    }
    @media (prefers-color-scheme: dark) {
        --link-color: #8ab4f8;
        --text-color: #e8eaed;
        --text-color-weak: #a4a5a8;
        --text-color-em: #fff;
        --bg-color: #35363a;
        --border-color: #ccc;
        --shadow-color: #ddd;
        --dash-color: #60666b;

        --drop-area-gradient:
            repeating-linear-gradient(
                -45deg,
                #3b4054,
                #3b4054 10px,
                #0000   10px,
                #0000   20px
            );
        --dragged-element-bg: rgba(255, 255, 255, 0.15);
        --dragged-element-box-shadow: none;
    }
}

body {
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size:14px;
}

a { color: var(--link-color) }

input, select, textarea, button { font-family: inherit }
textarea {
    color: var(--text-color);
    background-color: var(--bg-color);
}
input[type=text] {
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    outline: 0;
    -webkit-appearance: textfield;
}

.clickable {
    cursor: pointer;
    color: var(--link-color);
}
.tabGroupTitleText {
    color: var(--text-color);
}

.spinner {
    margin-top: 32px;
    margin-left: 32px;
    width: 70px;
    text-align: center;
    display: inline-block;
    
    > div {
        background-color: var(--text-color-weak);
        width: 3px;
        height: 3px;
        border-radius: 100%;
        display: inline-block;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    div {
        margin-left: 6px;

        &:nth-child(1) { animation-delay: -.72s }
        &:nth-child(2) { animation-delay: -.64s }
        &:nth-child(3) { animation-delay: -.48s }
        &:nth-child(4) { animation-delay: -.32s }
        &:nth-child(5) { animation-delay: -.16s }
    }
}

@keyframes sk-bouncedelay {
     0%,
    80% { transform: scale(0) }
    40% { transform: scale(1) }
}


/* Card styles */
:root {
    interpolate-size: allow-keywords; /* for Height animation */
    --border-color: #eee;
}

#settingsDiv {
    --w-logo-space: 432px;

    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    max-width: min(100% - var(--w-logo-space), 680px);
}
#tabGroupsDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
    padding: .25rem 1.25rem 0;

    /* Card */
    .tabGroup {
        border: solid 1px var(--border-color);
        padding-right: 1rem;
        border-radius: .5rem;

        > div {
            /* Header */
            &:nth-child(1) {
                position: relative;
                margin-inline: -1rem 3rem;

                & > div {
                    /* Actions */
                    > :last-child {
                        position: absolute;
                        top: 0;
                        right: -1rem;
                        z-index: 1;

                        display: grid !important;
                        padding-left: 0 !important;

                        border-radius: .5rem;
                        outline: solid 1px #0000;

                        &::before, &::after {
                            position: absolute;
                            right: -2rem;
                            aspect-ratio: 1;
                        }
                        /* Pseudo Button */
                        &::before {
                            display: flex;
                            place-content: center;

                            box-sizing: border-box;
                            border-radius: .5rem;
                            border: solid 1px #0001;
                            width: 2rem;

                            font-size: 1rem;
                            content: "…";
                            transition: .2s;
                        }
                        /* Expand hover area */
                        &::after {
                            margin: -.5rem;
                            border-radius: .5rem;
                            width: 3rem;

                            content: "";
                            cursor: context-menu;
                        }
                        & > * {
                            padding-right: 0 !important;
                            overflow: hidden;
                            white-space: nowrap;
                        }

                        /* States */
                        &:hover, :focus-within {
                            outline-color: #0001;
                            background: #fff;
                            padding: .5rem .75rem;
                            padding-left: .75rem !important;

                            &::before { background: #0001 }
                        }
                        &:not(:hover, :focus-within) {
                            & > * { width: 0 }
                        }
                    }
                }
            }

            /* Contents and Last drop zone  */
            &:nth-child(n + 2) {
                margin-left: .75rem;
                overflow: hidden;
                transition: .2s;
            }
        }

        &:not(:hover, :focus-within) {
            > div {
                &:nth-child(n + 2) { height: 0 }
                &:nth-child(2) { padding-top: 0 !important }
            }
        }
    }
}
}