.constructor-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
#select-translations {
display: none;
}
.texture-preview-block, .base-texture-block, .texture-colors-block, .stroke-colors-block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
margin: 10px 0px;
max-width: 448px;
}
#texture-preview-block {
display: none;
}
.block-title {
text-align: left;
padding: 2px 0px 10px 0px;
}
img#texture-sota-big,
img#texture-sota-small,
img#texture-kaplya,
img#texture-romb {
width: 100px;
height: 100px;
cursor: pointer;
}
img#texture-sota-big:hover,
img#texture-sota-small:hover,
img#texture-kaplya:hover,
img#texture-romb:hover {
transform: scale(1.05);
}
img.texture-base-color, img.texture-stroke-color {
width: 50px;
height: 50px;
cursor: pointer;
border-radius: 50px;
}
img.texture-base-color.selected, img.texture-stroke-color.selected {
transform: scale(1.25);
}
img.texture-base-color:hover, img.texture-stroke-color:hover {
transform: scale(1.2);
}
img.texture-base-color:active, img.texture-stroke-color:active {
transform: scale(1.3);
}
#texture-sota-big-colors-block,
#texture-sota-small-colors-block,
#texture-kaplya-colors-block,
#texture-romb-colors-block,
#mat-strokes-colors-block {
display: none;
}
div.mat-preview {
display: none;
}
div.mat-preview.mat-active {
display: block;
}
img.texture-selected {
transform: scale(1.05);
border-bottom: 5px solid transparent;
border-image: linear-gradient(to right, #663399, #ff4e2b);
border-image-slice: 1;
}
.image-column, .dropdown-column {
flex: 1;
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
text-align: center;
gap: 20px;
}
.image-column {
align-items: center;
justify-content: center;
border: 1px dashed #663399;
border-radius: 8px;
max-width: 1000px;
}
.dropdown-column {
max-width: 448px;
}
.image-column svg {
fill: white;
stroke: black;
stroke-width: 1px;
width: 700px;
height: 700px;
}
select, button {
margin: 10px 0;
padding: 8px;
font-size: 16px;
}
button {
background-color: #0073aa;
color: white;
border: none;
cursor: pointer;
padding: 10px 20px;
}
button:hover {
background-color: #005177;
}
#selection-output {
margin-top: 20px;
font-size: 16px;
}
#price-box {
font-size: 24px;
font-weight: 700;
color: #663399;
padding: 5px 0px 0px 0px;
}
.initial-price {
color: #bdbdbd;
font-size: 16px;
text-decoration: line-through;
}
.sale-label {
color: #ffffff;
padding: 5px;
font-size: 14px;
border-radius: 8px;
background-color: #67C23A;
line-height: 2;
}
.sale-info-box {
display: flex;
flex-direction: row;
gap: 10px;
}
#car-info-box {
font-size: 14px;
font-weight: 600;
color: #424242;
margin: 5px 0px;
}
@media (max-width: 768px) {
.constructor-container {
flex-direction: column;
}
.image-column, .dropdown-column {
width: 100%;
}
.image-column svg {
width: 350px;
height: 350px;
}
img#texture-sota-big,
img#texture-sota-small,
img#texture-kaplya,
img#texture-romb {
width: 74px;
height: 74px;
}
}