691 lines
12 KiB
CSS
691 lines
12 KiB
CSS
:root {
|
|
--primary-color: #24a5cc;
|
|
--secondary-color: #353236;
|
|
--text-color: #fff;
|
|
--border-color: #2b556f;
|
|
--font-family: sans-serif;
|
|
--font-size-small: 11px;
|
|
--font-size-medium: 13px;
|
|
--font-size-large: 17px;
|
|
--padding-small: 4px;
|
|
--padding-medium: 10px;
|
|
--padding-large: 20px;
|
|
--menu-option-width: 100px;
|
|
--checkmark-size: 20px;
|
|
--texture-radio-width: 16.666666667%;
|
|
--texture-radio-width-mobile: 25%;
|
|
}
|
|
|
|
::-webkit-scrollbar:horizontal,
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track:horizontal,
|
|
::-webkit-scrollbar-track {
|
|
background: gainsboro;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-track:horizontal,
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgb(79, 79, 79);
|
|
}
|
|
|
|
|
|
html {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
font-size: 11px;
|
|
background-color: #24a5cc;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
.container-fluid {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#left-container {
|
|
|
|
background: #24a5cc;
|
|
height: 100%;
|
|
}
|
|
|
|
.menu-scroll {
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#canvas-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 10px;
|
|
color: #ffffff;
|
|
background-color: #5d5d5d;
|
|
padding: 4px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#cart-container {
|
|
z-index: 99;
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 0px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.errore-misure {
|
|
background-color: white;
|
|
border-radius: 5px;
|
|
color: red;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.titolo {
|
|
position: absolute;
|
|
top: 20px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: #535657;
|
|
}
|
|
|
|
.copyright {
|
|
color: #fff;
|
|
}
|
|
|
|
.copyright a {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#cart-container .prezzo {
|
|
background-color: #24a5cc;
|
|
color: #fff;
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
padding: 0px 8px;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#cart-container .prezzo span {
|
|
font-size: 9px;
|
|
display: block;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.quantity-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.quantity-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #24a5cc;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 3px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.quantity-btn:hover {
|
|
background-color: var(--border-color);
|
|
}
|
|
|
|
.quantity-input {
|
|
width: 60px;
|
|
height: 40px;
|
|
text-align: center;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 3px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.cart-button {
|
|
background-color: #ffd700;
|
|
/* Colore giallo */
|
|
color: #000;
|
|
/* Testo nero */
|
|
font-size: var(--font-size-medium);
|
|
font-weight: bold;
|
|
padding: var(--padding-medium);
|
|
border: none;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s, transform 0.2s;
|
|
width: 200px;
|
|
/* Larghezza fissa */
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.cart-button:hover {
|
|
background-color: #e6c200;
|
|
/* Colore giallo scuro al passaggio del mouse */
|
|
transform: scale(1.05);
|
|
/* Leggera animazione di ingrandimento */
|
|
}
|
|
|
|
.cart-button:active {
|
|
background-color: #cca300;
|
|
/* Colore più scuro quando cliccato */
|
|
transform: scale(0.95);
|
|
/* Leggera riduzione durante il clic */
|
|
}
|
|
|
|
.cart-button.disabled {
|
|
background-color: #cccccc;
|
|
/* Colore grigio per il bottone disabilitato */
|
|
color: #666666;
|
|
/* Testo grigio scuro */
|
|
cursor: not-allowed;
|
|
/* Cambia il cursore per indicare che non è cliccabile */
|
|
transform: none;
|
|
/* Rimuove qualsiasi trasformazione */
|
|
}
|
|
|
|
.button-180 img {
|
|
cursor: pointer;
|
|
width: 50px;
|
|
}
|
|
|
|
.main-menu hr {
|
|
border: 0;
|
|
height: 1px;
|
|
background-color: #c3c3c3;
|
|
margin: 5px;
|
|
}
|
|
|
|
.menu-header {
|
|
background-color: #353236;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
padding: 4px;
|
|
padding-left: 10px;
|
|
margin-bottom: 0px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.menu-header-sistema{
|
|
background-color: #24a5cc;
|
|
padding: 0px 0px;
|
|
}
|
|
.menu-header-sistema .v-divider{
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 14px;
|
|
background-color: #ececec;
|
|
margin: 0px 3px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.menu-header-sistema a{
|
|
color: #383737;
|
|
padding: 4px 10px;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menu-header-sistema a.selected{
|
|
|
|
background-color: #353236;
|
|
color: #fff;
|
|
}
|
|
|
|
.menu-container {
|
|
text-align: center;
|
|
color: white;
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
.misure-menu {
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
|
|
.menu-container h6 {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.menu-options {
|
|
display: flex;
|
|
justify-content: start;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.menu-option {
|
|
position: relative;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lista-modelli {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
|
|
.radio-button {
|
|
width: 92px;
|
|
}
|
|
|
|
.menu-option input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.option-content {
|
|
position: relative;
|
|
border: 2px solid transparent;
|
|
background-color: #fff;
|
|
padding: 0px;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
#menu-mobile {
|
|
background-color: #24a5cc;
|
|
padding: 0px;
|
|
}
|
|
|
|
.option-content img {
|
|
width: 100%;
|
|
max-width: 100px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.option-content .checkmark {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: white;
|
|
background: url('./img/menu/checkmark.png') no-repeat center center;
|
|
background-size: contain;
|
|
display: none;
|
|
}
|
|
|
|
.btn-categoria {
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-categoria p {
|
|
font-size: 11px;
|
|
color: #151515;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.lista-opzioni p{
|
|
color: white;
|
|
}
|
|
|
|
.texture-radio {
|
|
/*width: 16.666666667%;*/
|
|
width: 21%;
|
|
}
|
|
|
|
.option-label {
|
|
margin-top: 0px;
|
|
font-size: 11px;
|
|
line-height: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.menu-option input[type="radio"]:checked+.option-content {
|
|
border-color: #2b556f;
|
|
}
|
|
|
|
.menu-option input[type="radio"]:checked+.option-content .checkmark {
|
|
display: block;
|
|
}
|
|
|
|
.cart-button.desktop {
|
|
display: block;
|
|
}
|
|
|
|
.cart-button.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.lista-modelli,
|
|
.lista-opzioni {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow-x: visible;
|
|
overflow-y: hidden;
|
|
padding: 10px;
|
|
padding-bottom: 0px;
|
|
gap: 20px;
|
|
background-color: #fff;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: thin;
|
|
/* Per browser compatibili */
|
|
}
|
|
|
|
.lista-opzioni {
|
|
background: inherit;
|
|
/*justify-content: center;*/
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.lista-modelli img {
|
|
height: 80px;
|
|
/* Altezza delle immagini */
|
|
object-fit: cover;
|
|
cursor: pointer;
|
|
border: 2px solid #ffffff;
|
|
}
|
|
|
|
.lista-modelli img.selected,
|
|
.lista-modelli img:hover {
|
|
border-color: #2b556f;
|
|
/* Effetto zoom al passaggio del mouse */
|
|
}
|
|
|
|
|
|
.lista-modelli::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
|
|
/* Stile per scrollbar - Compatibile con Webkit (Chrome, Safari, Edge) */
|
|
.lista-modelli::-webkit-scrollbar {
|
|
height: 8px;
|
|
/* Altezza della scrollbar */
|
|
background: transparent;
|
|
/* Sfondo trasparente */
|
|
}
|
|
|
|
.lista-modelli::-webkit-scrollbar-thumb {
|
|
background: #4f4f4f;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.lista-modelli::-webkit-scrollbar-thumb:hover {
|
|
background-color: #333;
|
|
/* Colore più scuro al passaggio del mouse */
|
|
}
|
|
|
|
.lista-modelli::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
/* Sfondo trasparente per la traccia */
|
|
}
|
|
|
|
/* Stile per scrollbar - Compatibile con Firefox */
|
|
.lista-modelli {
|
|
scrollbar-width: thin;
|
|
/* Scrollbar sottile */
|
|
scrollbar-color: #4f4f4f transparent;
|
|
/* Pollice nero e sfondo trasparente */
|
|
}
|
|
|
|
/* Stile per scrollbar - Compatibile con Windows (Edge e IE) */
|
|
.lista-modelli {
|
|
-ms-overflow-style: none;
|
|
/* Nasconde la scrollbar predefinita su IE */
|
|
}
|
|
|
|
.lista-modelli::-ms-scrollbar {
|
|
width: 6px;
|
|
/* Larghezza della scrollbar */
|
|
background: transparent;
|
|
/* Sfondo trasparente */
|
|
}
|
|
|
|
.lista-modelli::-ms-scrollbar-thumb {
|
|
background-color: #000;
|
|
/* Colore nero per il pollice */
|
|
border-radius: 3px;
|
|
/* Angoli arrotondati */
|
|
}
|
|
|
|
#popup {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 9999;
|
|
padding: 10px;
|
|
}
|
|
|
|
#popup:not(.d-none) {
|
|
animation: fadeIn 0.2s ease-in-out;
|
|
}
|
|
|
|
.mobile-popup {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 9999;
|
|
padding: 0px;
|
|
|
|
}
|
|
|
|
.mobile-popup .popup-content {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.btn-popup {
|
|
text-align: left;
|
|
}
|
|
|
|
.mobile-popup-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.84);
|
|
z-index: 9998;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#popup .close {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 1460px) {
|
|
.menu-options.half {
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 666px) {
|
|
|
|
.mobile-popup {
|
|
display: block;
|
|
width: 98%;
|
|
/*height: 70%;*/
|
|
}
|
|
|
|
.mobile-popup .popup-content {
|
|
background-color: #24a5cc;
|
|
}
|
|
|
|
.titolo {
|
|
top: 1px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.button-180 {
|
|
position: absolute;
|
|
bottom: 128px;
|
|
right: 25px;
|
|
}
|
|
|
|
#cart-container {
|
|
bottom: 30px;
|
|
}
|
|
|
|
#left-container {
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.lista-modelli img,
|
|
.lista-opzioni img {
|
|
height: 50px;
|
|
padding: 4px;
|
|
/* Altezza delle immagini */
|
|
object-fit: cover;
|
|
cursor: pointer;
|
|
border: 2px solid #ffffff;
|
|
}
|
|
|
|
.lista-opzioni img {
|
|
border: none;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 8px;
|
|
}
|
|
|
|
#left-container {
|
|
height: 50%;
|
|
order: 2 !important;
|
|
}
|
|
|
|
#canvas-container {
|
|
height: 80%;
|
|
order: 1 !important;
|
|
}
|
|
|
|
.col-lg-4,
|
|
.col-lg-8 {
|
|
flex: 0 0 auto !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.quantity-btn {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.quantity-input {
|
|
width: 30px;
|
|
height: 23px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
|
|
#altezza,
|
|
#larghezza {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.menu-header {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.btn-categoria p {
|
|
font-size: 10px;
|
|
line-height: 10px;
|
|
}
|
|
|
|
.row.mb-3 {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
#cart-container {
|
|
justify-content: space-around;
|
|
gap: 0px;
|
|
}
|
|
|
|
#cart-container .prezzo {
|
|
min-width: auto;
|
|
}
|
|
|
|
.cart-button.desktop {
|
|
display: none;
|
|
}
|
|
|
|
.cart-button.mobile {
|
|
display: block;
|
|
width: 60px;
|
|
}
|
|
|
|
.menu-container h6 {
|
|
text-align: left;
|
|
}
|
|
|
|
.menu-options {
|
|
justify-content: space-evenly;
|
|
padding-bottom: 13px;
|
|
}
|
|
|
|
.lista-modelli {
|
|
padding: 4px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.option-content img {
|
|
max-width: 120px;
|
|
}
|
|
|
|
.texture-radio {
|
|
width: 25%;
|
|
}
|
|
|
|
#popup {
|
|
position: absolute;
|
|
top: 0%;
|
|
left: 0%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
.info-popup {
|
|
margin-top: 2px;
|
|
display: block;
|
|
}
|
|
|
|
} |