301 lines
6.1 KiB
CSS
301 lines
6.1 KiB
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 !important;
|
|
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; } |