TaskHybrid/salesbook.Shared/Components/Pages/User.razor.css

.tab-section {
    width: 100%;
    border-radius: var(--mud-default-borderradius);
    background: var(--light-card-background);
}

.container-primary-info {
    background: var(--light-card-background);
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 16px;
}

.container-primary-info .divider {
    margin: 0 0 0 7rem;
    width: unset;
}

.section-primary-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: .8rem 1.2rem .4rem;
}

.personal-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: normal;
}

.info-nome {
    color: var(--mud-palette-text-primary);
    font-weight: 800;
    font-size: medium;
}

.info-section {
    color: var(--mud-palette-gray-default);
    font-size: small;
    font-weight: 600;
}

.section-info {
    display: flex;
    flex-direction: row;
    padding: .4rem 1.2rem .8rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.section-personal-info {
    display: flex;
    flex-direction: column;
}

.section-personal-info > div {
    display: flex;
    flex-direction: column;
    line-height: normal;
    margin: .25rem 0;
}

.info-title {
    color: var(--mud-palette-gray-darker);
    font-weight: 800;
}

.info-text {
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    font-size: small;
}

.content ::deep .user-button { border: 1px solid var(--card-border-color) !important; }

.user-button > i { font-size: large; }

.user-button > span {
    font-size: medium;
    font-weight: 600;
}

.status { font-weight: 700; }

.status.online { color: var(--mud-palette-success); }

.status.offline { color: var(--mud-palette-error); }

.container-button {
    width: 100%;
    background: var(--light-card-background);
    padding: 0 !important;
    padding-bottom: .5rem !;
    border-radius: 16px;
    margin-bottom: 0 !important;
}

.container-button .divider {
    margin: .5rem 0 .5rem 3rem;
    width: unset;
}

.container-button ::deep .button-settings { border: none !important; }

.container-button ::deep .button-settings .mud-icon-root {
    border-radius: 6px;
    padding: 2px;
    min-width: 25px;
    min-height: 25px;
}

.container-button ::deep .button-settings.infoText { color: var(--mud-palette-info); }

.container-button ::deep .button-settings.green-icon .mud-icon-root {
    border: 1px solid var(--mud-palette-success);
    background: hsl(from var(--mud-palette-success-lighten) h s 95%);
    color: var(--mud-palette-success-darken);
}

.container-button ::deep .button-settings.red-icon .mud-icon-root {
    border: 1px solid var(--mud-palette-error);
    background: hsl(from var(--mud-palette-error-lighten) h s 95%);
    color: var(--mud-palette-error-darken);
}

.container-button ::deep .button-settings .mud-button-label {
    justify-content: flex-start;
    text-transform: capitalize;
    font-size: 1rem;
}

.container-button ::deep .button-settings.exit { padding: 0; }

.container-button ::deep .button-settings.exit .mud-button-label {
    justify-content: center;
    font-size: 1.1rem;
    line-height: normal;
}

.container-pers-rif {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--light-card-background);
    border-radius: 16px;
    max-height: 32vh;
    overflow: auto;
    scrollbar-width: none;
    padding: 1rem 0;
}

.container-pers-rif::-webkit-scrollbar { width: 3px; }

.container-pers-rif::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 2px;
}

.container-pers-rif .divider {
    margin: 0 0 0 3.5rem;
    width: unset;
}

.custom-tab-panel {
    width: 100%;
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.commesse-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.attivita-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/*--------------
    TabPanel
----------------*/

.box {
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
    background: var(--light-card-background);
    border-radius: 20px 20px 0 0;
    border-bottom: .1rem solid var(--card-border-color);
    overflow: clip;
    margin-bottom: 1rem;
}

/* nascondo gli input */

.tab-toggle { display: none; }

.tab-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    position: relative;
    z-index: 1;
}

/* la lineetta */

.tab-list::before {
    content: '';
    display: block;
    height: 3px;
    width: calc(100% / 3);
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--mud-palette-primary);
    transition: transform .3s;
}

.tab-item {
    flex: 1;
    text-align: center;
    transition: .3s;
    opacity: 0.5;
}

.tab-trigger {
    display: block;
    padding: 10px 0;
    cursor: pointer;
}

/* tab attivo */

#tab1:checked ~ .box .tab-list .tab-item:nth-child(1),
#tab2:checked ~ .box .tab-list .tab-item:nth-child(2),
#tab3:checked ~ .box .tab-list .tab-item:nth-child(3) {
    opacity: 1;
    font-weight: bold;
    display: block;
}

/* spostamento lineetta */

#tab1:checked ~ .box .tab-list::before { transform: translateX(0%); }

#tab2:checked ~ .box .tab-list::before { transform: translateX(100%); }

#tab3:checked ~ .box .tab-list::before { transform: translateX(200%); }

.tab-container {
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
}

.tab-content {
    display: none;
    flex: 1;
    overflow-y: hidden;
    animation: fade .3s ease;
    padding: .5rem;
}

.tab-content::-webkit-scrollbar { width: 3px; }

.tab-content::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 2px;
}

#tab1:checked ~ .tab-container .tab-content:nth-child(1),
#tab2:checked ~ .tab-container .tab-content:nth-child(2),
#tab3:checked ~ .tab-container .tab-content:nth-child(3) { display: block; }

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-pagination ::deep ul { padding-left: 0 !important; }

.SelectedPageSize { width: 100%; }

.FilterSection { display: flex; }