demo-audio-2
This commit is contained in:
998
demo-audio-2/css/style_pc.css
Normal file
998
demo-audio-2/css/style_pc.css
Normal file
@@ -0,0 +1,998 @@
|
||||
:root {
|
||||
--color-primary: #ff5c00;
|
||||
--color-secondary: #1f1f1f;
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
--gray: #b7b7b7;
|
||||
--gray-2: #999999;
|
||||
--box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
|
||||
--marker-color: #d9d9d9;
|
||||
}
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
body {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", sans-serif;
|
||||
color: #000;
|
||||
min-width: 1220px;
|
||||
word-break: break-word;
|
||||
line-height: 1.3;
|
||||
font-weight: 400;
|
||||
background-color: #fff;
|
||||
}
|
||||
.container {
|
||||
max-width: 1220px;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.box-w {
|
||||
border-radius: 15px;
|
||||
background-color: #fff;
|
||||
padding: 12px;
|
||||
}
|
||||
.alert-mess {
|
||||
text-align: center;
|
||||
padding: 50px 30px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: red;
|
||||
}
|
||||
.paging {
|
||||
padding: 56px 10px 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.paging-link.active,
|
||||
.paging-link:hover {
|
||||
color: #fff;
|
||||
background: var(--color-secondary);
|
||||
font-weight: 500;
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
.paging-link {
|
||||
display: -webkit-inline-box !important;
|
||||
display: -ms-inline-flexbox !important;
|
||||
display: inline-flex !important;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
background: #fff;
|
||||
text-transform: capitalize;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
color: #000;
|
||||
}
|
||||
.routing ol {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.routing-link {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
}
|
||||
.routing-link:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.routing-link:last-child {
|
||||
color: #333;
|
||||
max-width: 700px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.routing-link:not(:last-child)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
-webkit-transform: translateY(-50%) rotate(25deg);
|
||||
-ms-transform: translateY(-50%) rotate(25deg);
|
||||
transform: translateY(-50%) rotate(25deg);
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
border-right: 1px solid #dfdfdf;
|
||||
}
|
||||
.success-form {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.success-form .cart-success {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
background: #fff;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
}
|
||||
.success-form .success-form-svg {
|
||||
display: block;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.success-form .text-cart-success {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.6;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.cart:hover .cart-ttip {
|
||||
display: block;
|
||||
}
|
||||
.cart-ttip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
height: auto;
|
||||
right: 0;
|
||||
top: 24px;
|
||||
z-index: 3;
|
||||
-webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
|
||||
box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
|
||||
}
|
||||
.cart-ttip .cart-ttip-price-button {
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background: var(--color-primary);
|
||||
text-align: center;
|
||||
margin: 0 12px 12px;
|
||||
}
|
||||
.cart-ttip .cart-ttip-item-container {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
.cart-ttip .cart-ttip-item-container .compare-item {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
max-width: unset;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.cart-ttip .cart-ttip .header-null-cart {
|
||||
width: 100% !important;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cart-ttip .header-cart-item-price {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.cart-ttip .cart-ttip-price,
|
||||
.compare-item,
|
||||
.header-nav-menu a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
}
|
||||
.cart-ttip .header-cart-item-price p {
|
||||
font-weight: 700;
|
||||
width: auto;
|
||||
}
|
||||
.cart-ttip .cart-ttip-price {
|
||||
padding: 10px 20px 10px 10px;
|
||||
border-top: 3px solid var(--color-primary);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end !important;
|
||||
-ms-flex-pack: end !important;
|
||||
justify-content: flex-end !important;
|
||||
gap: 6px;
|
||||
}
|
||||
.cart-ttip .cart-ttip-price p {
|
||||
color: #000;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.cart-ttip .cart-ttip-price p:first-child {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.cart-ttip .cart-ttip-price p:nth-child(2) {
|
||||
font-size: 13px;
|
||||
font-weight: 200;
|
||||
color: var(--color-primary);
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.cart-ttip .cart-ttip-price p:last-child {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cart-ttip .compare-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: 0 1px 8px rgb(0 0 0 / 25%);
|
||||
box-shadow: 0 1px 8px rgb(0 0 0 / 25%);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
max-width: 360px;
|
||||
background: #fff;
|
||||
}
|
||||
.cart-ttip .compare-item img {
|
||||
width: 80px;
|
||||
border: 5px;
|
||||
}
|
||||
.cart-ttip .compare-item .compare-item-text {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.cart-ttip .compare-item .compare-item-text p {
|
||||
background: 0 0;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
line-height: 24px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.cart-ttip .header-null-cart {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.static-icons {
|
||||
background-image: url(../images/static-icons-map-pc.png);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
background-size: 240px 227px;
|
||||
}
|
||||
.static-icons-static-icon-category-grid {
|
||||
width: 23px;
|
||||
height: 20px;
|
||||
background-position: -2px -2px;
|
||||
}
|
||||
.static-icons-static-icon-category-list {
|
||||
width: 23px;
|
||||
height: 20px;
|
||||
background-position: -30px -2px;
|
||||
}
|
||||
.static-icons-static-icon-feature-calendar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-position: -57px -2px;
|
||||
}
|
||||
.static-icons-static-icon-feature-calendar-orange {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-position: -94px -2px;
|
||||
}
|
||||
.static-icons-static-icon-feature-delivery {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
background-position: -135px -2px;
|
||||
}
|
||||
.static-icons-static-icon-feature-delivery-orange {
|
||||
width: 46px;
|
||||
height: 36px;
|
||||
background-position: -2px -33px;
|
||||
}
|
||||
.static-icons-static-icon-feature-phone {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-position: -135px -33px;
|
||||
}
|
||||
.static-icons-static-icon-feature-wallet {
|
||||
width: 32px;
|
||||
height: 31px;
|
||||
background-position: -53px -70px;
|
||||
}
|
||||
.static-icons-static-icon-fire {
|
||||
width: 21px;
|
||||
height: 30px;
|
||||
background-position: -90px -70px;
|
||||
}
|
||||
.static-icons-static-icon-header-cart {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -116px -70px;
|
||||
}
|
||||
.static-icons-static-icon-header-cart-pro {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -141px -70px;
|
||||
}
|
||||
.static-icons-static-icon-header-cart-pro-big {
|
||||
width: 26px;
|
||||
height: 25px;
|
||||
background-position: -2px -95px;
|
||||
}
|
||||
.static-icons-static-icon-header-delivery {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
background-position: -166px -70px;
|
||||
}
|
||||
.static-icons-static-icon-header-phone {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-position: -116px -95px;
|
||||
}
|
||||
.static-icons-static-icon-header-search {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -145px -95px;
|
||||
}
|
||||
.static-icons-static-icon-header-user {
|
||||
width: 22px;
|
||||
height: 24px;
|
||||
background-position: -33px -120px;
|
||||
}
|
||||
.static-icons-static-icon-location {
|
||||
width: 13px;
|
||||
height: 14px;
|
||||
background-position: -172px -2px;
|
||||
}
|
||||
.static-icons-static-icon-phone-ct {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-position: -172px -21px;
|
||||
}
|
||||
.static-icons-static-icon-phone-ct-orange {
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
background-position: -60px -120px;
|
||||
}
|
||||
.static-icons-static-icon-red-gift {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position: -53px -40px;
|
||||
}
|
||||
.static-icons-static-icon-review-user {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
background-position: -145px -120px;
|
||||
}
|
||||
.static-icons-static-icon-social-fb {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-position: -191px -2px;
|
||||
}
|
||||
.static-icons-static-icon-social-fb-orange {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-position: -195px -49px;
|
||||
}
|
||||
.static-icons-static-icon-social-gg-news {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-position: -195px -88px;
|
||||
}
|
||||
.static-icons-static-icon-social-gg-news-orange {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-position: -91px -135px;
|
||||
}
|
||||
.static-icons-static-icon-social-instagram {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-position: -181px -135px;
|
||||
}
|
||||
.static-icons-static-icon-social-instagram-orange {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-position: -2px -182px;
|
||||
}
|
||||
.static-icons-static-icon-social-twitter {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-position: -41px -182px;
|
||||
}
|
||||
.static-icons-static-icon-social-youtube {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-position: -88px -182px;
|
||||
}
|
||||
.static-icons-static-icon-star-orange {
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
background-position: -75px -50px;
|
||||
}
|
||||
.static-icons-static-icon-thunder {
|
||||
width: 27px;
|
||||
height: 41px;
|
||||
background-position: -135px -182px;
|
||||
}
|
||||
@-webkit-keyframes gradient-bg-antimation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
@keyframes gradient-bg-antimation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
.heading-primary .title {
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
font-weight: 700;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.heading-primary .offsite-wrapper {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
border-bottom: 2px solid var(--color-secondary);
|
||||
text-align: right;
|
||||
}
|
||||
.heading-primary .view-more {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
line-height: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.heading-primary .view-more::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom: 1px solid var(--color-primary);
|
||||
}
|
||||
.global-time-deal {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
gap: 4px;
|
||||
}
|
||||
.global-time-deal p {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
background: #171717;
|
||||
border-radius: 5px;
|
||||
min-width: 26px;
|
||||
line-height: 36px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.header {
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.header .header-top .row {
|
||||
height: 40px;
|
||||
}
|
||||
.header .header-bottom .row {
|
||||
height: 105px;
|
||||
}
|
||||
.header .header-bottom .category .image {
|
||||
height: 25px;
|
||||
}
|
||||
.header .header-bottom .function .icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ebe9eb;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.homepage .swiper-section-hero .swiper-pagination-bullet {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #fff;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
.homepage .swiper-section-hero .swiper-pagination-bullet-active {
|
||||
background-color: var(--color-primary);
|
||||
border-color: transparent;
|
||||
}
|
||||
.homepage .swiper-section-hero .wrapper-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.homepage .swiper-section-hero .wrapper-content .title {
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
font-weight: 600;
|
||||
max-width: 484px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.homepage .swiper-section-hero .wrapper-content .text {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
max-width: 666px;
|
||||
margin: 12px auto 0;
|
||||
}
|
||||
.homepage .section-brand {
|
||||
border-radius: 15px;
|
||||
}
|
||||
.homepage .section-brand .swiper {
|
||||
margin: 0 30px;
|
||||
padding: 30px 0;
|
||||
}
|
||||
/* */
|
||||
.homepage .section-deal .heading-deal {
|
||||
background-color: var(--color-primary);
|
||||
border-radius: 15px;
|
||||
padding: 10px 16px;
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.homepage .section-deal .heading-deal .wrapper-title {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.homepage .section-deal .product-deal .wrapper-deal {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .deal-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(270deg, #ffb800 0%, #ff7a30 100%);
|
||||
}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .deal-line.total {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .deal-line.remaining {
|
||||
background: -o-repeating-linear-gradient(
|
||||
left,
|
||||
#ffb800 0,
|
||||
#ff7a30 50%,
|
||||
#ffb800 100%
|
||||
);
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
#ffb800 0,
|
||||
#ff7a30 50%,
|
||||
#ffb800 100%
|
||||
);
|
||||
background-size: 200% auto;
|
||||
background-position: 0 100%;
|
||||
-webkit-animation: 2s linear infinite forwards gradient-bg-antimation;
|
||||
animation: 2s linear infinite forwards gradient-bg-antimation;
|
||||
}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .static-icons {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
}
|
||||
.homepage .section-deal .product-deal .wrapper-deal .sold {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.homepage .section-deal .product-deal .p-deal-featured .p-cart {
|
||||
height: 50px;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.homepage .section-deal .product-deal .p-deal-featured .p-image {
|
||||
border-radius: 25px;
|
||||
border: 4px solid var(--color-primary);
|
||||
}
|
||||
.homepage .section-deal .product-deal .p-deal-other .p-image {
|
||||
max-width: 124px;
|
||||
width: 100%;
|
||||
padding-bottom: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.homepage .section-deal .product-deal .p-deal-other .swiper {
|
||||
height: 392px;
|
||||
}
|
||||
|
||||
.homepage .section-deal .banner-deal-image {
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.homepage .section-deal .banner-deal-image .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.homepage .section-deal .banner-deal-image .wrapper-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
max-width: 335px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.homepage .section-deal .banner-deal-image .wrapper-content .title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
font-weight: 600px;
|
||||
}
|
||||
.homepage .section-deal .banner-deal-image .wrapper-content .btn {
|
||||
padding: 13px 33px;
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* */
|
||||
.homepage .section-category .category-child {
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
.homepage .section-category .category-child .list {
|
||||
gap: 50px;
|
||||
}
|
||||
.homepage .section-category .category-child .item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-bottom: 10px;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
.homepage .section-category .category-child .item.selected {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.homepage .section-category .category-child .item.selected::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom: 1px solid var(--color-primary);
|
||||
}
|
||||
.homepage .section-customer .list {
|
||||
margin: 12px 0 38px;
|
||||
}
|
||||
.homepage .section-customer .customer-product-review {
|
||||
border-top: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.homepage .section-customer .customer-product-image {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
/* */
|
||||
.p-item .p-image {
|
||||
position: relative;
|
||||
padding-bottom: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
.p-item .p-img {
|
||||
margin: auto 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.p-item .p-name {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 600;
|
||||
margin: 12px 0 8px;
|
||||
}
|
||||
.p-item .p-price-sale {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.p-item .p-price-stock {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
color: #b7b7b7;
|
||||
text-decoration: line-through;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.p-item .p-summary {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
max-width: 190px;
|
||||
}
|
||||
.p-item .p-cart {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.footer .footer-top .features {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
height: 110px;
|
||||
}
|
||||
.footer .footer-mid {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.footer .footer-mid .row {
|
||||
height: 180px;
|
||||
}
|
||||
.footer .footer-bottom {
|
||||
padding: 30px 0 40px;
|
||||
}
|
||||
.footer .footer-bottom .list li:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.footer .footer-bottom .list a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.footer .footer-bottom .ministry-of-industry-and-trade {
|
||||
max-width: 140px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.footer .copy-right {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* */
|
||||
.category-page .banner .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
}
|
||||
.category-page .sort {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.category-page .sort .sort-by-collection select {
|
||||
width: 156px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background-color: #f0f0f0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
.category-page .filter {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 15px;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
.category-page .filter .filter-item {
|
||||
border-top: 1px solid #1f1f1f;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.category-page .filter .filter-item .list .check-box {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* */
|
||||
.color-green {
|
||||
color: #64c800;
|
||||
}
|
||||
.color-blue {
|
||||
color: #0079c8;
|
||||
}
|
||||
.gray-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
.detail-page .section-product .pro-name {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.detail-page .section-product .pro-sub-title {
|
||||
line-height: 26px;
|
||||
}
|
||||
.detail-page .section-product .pro-price .title {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
}
|
||||
.detail-page .section-product .pro-status .pro-status-item {
|
||||
padding: 8px 12px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
.detail-page .section-product .pro-gift .title {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.detail-page .section-product .pro-gift .list {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.detail-page .section-product .pro-gift .list::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -12px;
|
||||
left: 60px;
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
clip-path: polygon(50% 0%, 0 100%, 100% 100%);
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.detail-page .section-product .pro-gift .list .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.detail-page .section-product .pro-gift .list .marker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-primary);
|
||||
font-size: 12px;
|
||||
line-height: 13px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.detail-page .section-product .pro-cart .pro-cart-quantity {
|
||||
max-width: 72px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
padding: 12px 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.detail-page .section-product .pro-cart .pro-cart-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 245px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
border: 1px solid var(--color-primary);
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.detail-page .section-review .review-form {
|
||||
padding: 20px 12px 30px;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.detail-page .section-review .review-form .review-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.detail-page .section-review .review-form .review-form-item .r-input {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 10px;
|
||||
outline-color: #d7d7d7;
|
||||
}
|
||||
.detail-page .section-review .review-form .review-form-item textarea.r-input {
|
||||
height: 106px;
|
||||
resize: none;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.detail-page .section-review .review-form .review-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 212px;
|
||||
height: 42px;
|
||||
background: #1f1f1f;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
}
|
||||
Reference in New Issue
Block a user