Dodaj nowe style dla kart produktów, poprawiając estetykę i responsywność, oraz aktualizuj czcionki i kolory w stylach CSS
This commit is contained in:
Roman Pyrih
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -16,10 +16,12 @@ $cBordo: #9d343b;
|
||||
$cOnyx: #0a0a0b;
|
||||
|
||||
$fScandia: 'Scandia', sans-serif;
|
||||
$fPlayfair: 'Playfair Display', serif;
|
||||
$fBebasNeuePro: 'Bebas Neue Pro', serif;
|
||||
$fPlayfair: 'Playfair Display', sans-serif;
|
||||
$fBebasNeuePro: 'Bebas Neue Pro', sans-serif;
|
||||
$fBebasNeueProExpanded: 'Bebas Neue Pro Expanded', sans-serif;
|
||||
|
||||
body {
|
||||
color: $cTxtWhite !important;
|
||||
background-color: $cBlackLight !important;
|
||||
font-family: 'Scandia', 'Poppins', sans-serif !important;
|
||||
|
||||
@@ -66,6 +68,42 @@ p {
|
||||
background: linear-gradient(119deg, #a48446 0%, #d0bf95 100%);
|
||||
}
|
||||
}
|
||||
.breadcrumbs {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
.innerbreadcrumbs {
|
||||
.breadcrumb-home {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.path {
|
||||
li {
|
||||
&.bred-1 {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
}
|
||||
span {
|
||||
color: #8d8d99;
|
||||
font-size: 12px;
|
||||
font-family: $fScandia;
|
||||
text-transform: uppercase;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
> a {
|
||||
&:hover {
|
||||
span[itemprop='name'] {
|
||||
color: $cGold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itemListElement {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
top: 15px !important;
|
||||
@@ -345,6 +383,7 @@ p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 100px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.boxhead {
|
||||
margin-bottom: 30px;
|
||||
@@ -366,7 +405,9 @@ p {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #60606b;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #60606b;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid #60606b;
|
||||
@@ -436,20 +477,57 @@ p {
|
||||
}
|
||||
|
||||
footer.footer {
|
||||
padding-top: 40px;
|
||||
margin-bottom: 0;
|
||||
background-color: $cOnyx;
|
||||
border-top: 1px solid #747480;
|
||||
|
||||
.innerfooter {
|
||||
ul {
|
||||
margin: 15px 0;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border: none !important;
|
||||
|
||||
&.head {
|
||||
color: $cTxtWhite;
|
||||
font-weight: 600;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cTxtWhite;
|
||||
|
||||
&:hover {
|
||||
color: $cGold;
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-li-content {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -932,6 +1010,202 @@ body .search__container {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Product card
|
||||
body.shop_product {
|
||||
div.wrap {
|
||||
background: rgb(10, 10, 11);
|
||||
|
||||
div.main {
|
||||
#box_productfull {
|
||||
margin-top: 40px;
|
||||
|
||||
.maininfo {
|
||||
.productimg {
|
||||
.mainimg {
|
||||
border-radius: 12px;
|
||||
border-color: #28282e;
|
||||
}
|
||||
.smallgallery {
|
||||
.innersmallgallery {
|
||||
ul {
|
||||
li {
|
||||
border-radius: 6px;
|
||||
border-color: #28282e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-main-box__info {
|
||||
.maininfo-name {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.name {
|
||||
color: $cTxtWhite;
|
||||
font-family: $fBebasNeuePro;
|
||||
font-size: 33px;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.availability {
|
||||
.availability {
|
||||
}
|
||||
.delivery {
|
||||
}
|
||||
.shipping-costs {
|
||||
.showShippingCost {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottomborder {
|
||||
.basket {
|
||||
margin-top: 32px;
|
||||
.price {
|
||||
.price__container {
|
||||
.price-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.price-wrapper,
|
||||
> em.main-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
color: $cRed;
|
||||
font-size: 20px;
|
||||
font-family: $fScandia;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
|
||||
.main-price {
|
||||
margin: 0;
|
||||
color: $cRed;
|
||||
font-size: inherit;
|
||||
}
|
||||
.price__regular {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
|
||||
.price__inactive {
|
||||
color: $cTxtWhite;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price__regular {
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.js__omnibus-price-container {
|
||||
margin-top: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
.price__inactive {
|
||||
color: $cTxtWhite;
|
||||
font-size: 15px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.form-basket {
|
||||
.quantity_wrap {
|
||||
.number-wrap {
|
||||
input[name='quantity'] {
|
||||
margin: 0;
|
||||
border: 1px solid #b79e5f;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
height: 47px;
|
||||
min-height: 47px;
|
||||
|
||||
color: $cTxtWhite;
|
||||
font-family: $fBebasNeuePro;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
.unit {
|
||||
color: $cTxtWhite;
|
||||
}
|
||||
}
|
||||
.button_wrap {
|
||||
.addtobasket {
|
||||
display: inline-block;
|
||||
padding: 10px 30px;
|
||||
background: linear-gradient(
|
||||
119deg,
|
||||
#d0bf95 0%,
|
||||
#a48446 100%
|
||||
);
|
||||
border-radius: 100px;
|
||||
transition: all 250ms ease;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
119deg,
|
||||
#a48446 0%,
|
||||
#d0bf95 100%
|
||||
);
|
||||
}
|
||||
|
||||
span {
|
||||
color: $cBlackLight;
|
||||
font-size: 20px;
|
||||
font-family: $fBebasNeueProExpanded;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.addtofav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.js__gallery_new {
|
||||
> .js__gallery-images-container {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
}
|
||||
// .storefront-search {
|
||||
// .search__bar {
|
||||
// border: 0 !important;
|
||||
|
||||
Reference in New Issue
Block a user