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

/* Container scrollabile */

.timeline-container {
    height: 100%;
    overflow-y: auto;
    padding-right: 10px;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    padding-left: 40px; /* spazio per linea e cerchi */
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
}

/* Linea sopra e sotto ogni step */

.step::before,
.step::after {
    content: "";
    position: absolute;
    left: -31px;
    width: 2px;
    background: #ddd;
}

.step::after {
    top: 30%;
    bottom: -1.5rem;
}

.step:first-child::before { display: none; }

.step:last-child::after { display: none; }

/* Cerchio base */

.circle,
.in-progress {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
    margin-left: -40px;
    background-color: var(--mud-palette-tertiary);
}

/* Stato skippato */

.skipped { background: #ccc; }

/* Stato completato */

.completed {
    background: var(--mud-palette-primary);
    color: white;
    font-weight: bold;
}

/* Stato in corso con spinner */

.in-progress {
    border: 2px solid var(--mud-palette-primary);
    border-top: 2px solid transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}

/* Label con titolo + sottotitolo */

.label {
    display: flex;
    flex-direction: column;
}

.titleStep {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111;
    line-height: normal;
}

.subtitleStep {
    font-size: .90rem;
    color: #666;
    line-height: normal;
}

.timeline-container::-webkit-scrollbar { width: 6px; }

.timeline-container::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
}

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

.box {
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
    background: var(--light-card-background);
    border-radius: 16px;
    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;
    overflow: hidden;
    width: -webkit-fill-available;
}

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

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

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

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

.contentFlex ::deep > div:first-child:not(.activity-card) { display: none; }

#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);
    }
}