style changes
This commit is contained in:
sdarbinyan
@@ -2,8 +2,9 @@
|
||||
.cart-container.dexar {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 200px);
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
// Novo theme - Modern green design
|
||||
@@ -16,38 +17,44 @@
|
||||
}
|
||||
|
||||
.cart-container.dexar .cart-header {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1e3c38;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.clear-cart-btn {
|
||||
padding: 8px 16px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
background: transparent;
|
||||
color: #697777;
|
||||
border: 1px solid #d3dad9;
|
||||
border-radius: 13px;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #dc2626;
|
||||
background: #fef2f2;
|
||||
border-color: #ef4444;
|
||||
color: #ef4444;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -114,41 +121,51 @@
|
||||
justify-content: center;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
background: #f5f3f9;
|
||||
border-radius: 13px;
|
||||
border: 1px solid #d3dad9;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
|
||||
svg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #1e3c38;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
color: #6b7280;
|
||||
margin: 0 0 24px 0;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: #697777;
|
||||
margin: 0 0 28px 0;
|
||||
}
|
||||
|
||||
.shop-btn {
|
||||
padding: 12px 24px;
|
||||
background: #a855f7;
|
||||
padding: 14px 32px;
|
||||
background: #497671;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
border-radius: 13px;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
|
||||
&:hover {
|
||||
background: #9333ea;
|
||||
transform: translateY(-1px);
|
||||
background: #3a5f5b;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(73, 118, 113, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -256,26 +273,30 @@
|
||||
// Dexar cart item
|
||||
.cart-container.dexar .cart-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #d3dad9;
|
||||
border-radius: 13px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:hover {
|
||||
border-color: #d1d5db;
|
||||
border-color: #a1b4b5;
|
||||
box-shadow: 0 4px 12px rgba(73, 118, 113, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.item-image {
|
||||
flex-shrink: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 13px;
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
background: #f5f3f9;
|
||||
border: 1px solid #d3dad9;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@@ -283,6 +304,12 @@
|
||||
object-fit: contain;
|
||||
background: white;
|
||||
display: block;
|
||||
padding: 6px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -302,25 +329,26 @@
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 1rem;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
color: #1e3c38;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #a855f7;
|
||||
color: #497671;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 4px;
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
color: #a1b4b5;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
@@ -330,8 +358,9 @@
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
color: #697777;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -462,9 +491,10 @@
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 1.1rem;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
color: #497671;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -473,16 +503,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 20px;
|
||||
padding: 4px 8px;
|
||||
background: #f5f3f9;
|
||||
border-radius: 13px;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #d3dad9;
|
||||
|
||||
.qty-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #a855f7;
|
||||
color: #497671;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -491,7 +522,7 @@
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #a855f7;
|
||||
background: #497671;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -502,10 +533,11 @@
|
||||
}
|
||||
|
||||
.qty-value {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
min-width: 20px;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #1e3c38;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -582,19 +614,21 @@
|
||||
// Dexar Cart Summary
|
||||
.cart-container.dexar .cart-summary {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
top: 90px;
|
||||
background: #f5f3f9;
|
||||
border: 1px solid #d3dad9;
|
||||
border-radius: 13px;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
|
||||
.summary-header h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #1e3c38;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
@@ -602,8 +636,9 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 0.95rem;
|
||||
color: #6b7280;
|
||||
color: #697777;
|
||||
|
||||
&.delivery {
|
||||
display: flex;
|
||||
@@ -611,35 +646,38 @@
|
||||
|
||||
&.total {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
border-top: 1px solid #d3dad9;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: #1e3c38;
|
||||
margin-top: 8px;
|
||||
|
||||
.total-price {
|
||||
font-size: 1.25rem;
|
||||
color: #1a1a1a;
|
||||
font-size: 1.35rem;
|
||||
color: #497671;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
|
||||
padding: 16px;
|
||||
background: #497671;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 13px;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-top: 8px;
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 16px rgba(168, 85, 247, 0.3);
|
||||
background: #3a5f5b;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(73, 118, 113, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -790,7 +828,7 @@
|
||||
line-height: 1.4;
|
||||
|
||||
a {
|
||||
color: #a855f7;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@@ -804,13 +842,36 @@
|
||||
// Dexar checkbox colors
|
||||
.cart-container.dexar .terms-agreement .checkbox-container {
|
||||
input[type="checkbox"]:checked ~ .checkmark {
|
||||
background: #a855f7;
|
||||
border-color: #a855f7;
|
||||
background: #497671;
|
||||
border-color: #497671;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
border: 2px solid #d3dad9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.terms-text {
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 0.85rem;
|
||||
color: #697777;
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
color: #497671;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: #3a5f5b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Novo checkbox colors - green
|
||||
@@ -861,13 +922,15 @@
|
||||
|
||||
.payment-modal {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
border-radius: 13px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #d3dad9;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.close-modal-btn {
|
||||
position: absolute;
|
||||
@@ -980,8 +1043,8 @@
|
||||
.spinner-small {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #a855f7;
|
||||
border: 4px solid #d3dad9;
|
||||
border-top: 4px solid #497671;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto;
|
||||
@@ -1032,9 +1095,9 @@
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #a855f7, transparent);
|
||||
background: linear-gradient(90deg, transparent, #497671, transparent);
|
||||
animation: scan 2s linear infinite;
|
||||
box-shadow: 0 0 10px #a855f7;
|
||||
box-shadow: 0 0 10px #497671;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
@@ -1084,7 +1147,7 @@
|
||||
.pulse-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a855f7;
|
||||
background: #497671;
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@@ -1132,12 +1195,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
|
||||
box-shadow: 0 4px 12px rgba(73, 118, 113, 0.25);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
|
||||
box-shadow: 0 6px 16px rgba(73, 118, 113, 0.35);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -1198,8 +1261,8 @@
|
||||
transition: all 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: #a855f7;
|
||||
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
|
||||
border-color: #497671;
|
||||
box-shadow: 0 0 0 3px rgba(73, 118, 113, 0.1);
|
||||
}
|
||||
|
||||
&.valid {
|
||||
@@ -1225,12 +1288,13 @@
|
||||
|
||||
.submit-email-btn {
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
|
||||
background: #497671;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 13px;
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1239,8 +1303,9 @@
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #3a5f5b;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
||||
Reference in New Issue
Block a user