restructure user side css to improve scalability
This commit is contained in:
parent
9a0b631c78
commit
c506b7517d
|
|
@ -646,16 +646,17 @@ .katalogbuket-card:hover .img-wrapper img {
|
|||
}
|
||||
|
||||
.katalogbuket-product-title {
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
font-size: var(--subheading-font);
|
||||
margin-bottom: 4px;
|
||||
color: var(--bs-black);
|
||||
}
|
||||
|
||||
.katalogbuket-product-price {
|
||||
font-size: var(--nav-font);
|
||||
font-size: var(--body-font);
|
||||
color: var(--bs-gray-600);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.btn-pagination {
|
||||
|
|
@ -744,20 +745,18 @@ .bookingfoto-card:hover .img-wrapper img {
|
|||
}
|
||||
|
||||
.bookingfoto-product-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-size: var(--subheading-font);
|
||||
margin-bottom: 4px;
|
||||
color: var(--bs-heading-color);
|
||||
color: var(--bs-black);
|
||||
}
|
||||
|
||||
.bookingfoto-product-price {
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--body-font);
|
||||
color: var(--bs-gray-600);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =========================================
|
||||
7. DETAIL PAGES
|
||||
========================================= */
|
||||
|
|
@ -784,33 +783,24 @@ .detailbuket-price {
|
|||
|
||||
.detailbuket-spec-label {
|
||||
font-size: var(--body-font);
|
||||
/* Pengganti style="font-size: 0.75rem" */
|
||||
font-weight: 600;
|
||||
/* Pengganti style="font-weight: 600" */
|
||||
color: var(--bs-gray-600);
|
||||
/* Pengganti class text-muted */
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Value Besar (Fresh Flowers / Medium) */
|
||||
.detailbuket-spec-val {
|
||||
font-weight: 600;
|
||||
/* Pengganti class fw-bold */
|
||||
color: black;
|
||||
font-size: var(--body-font);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Garis Pemisah Vertical Custom */
|
||||
.detailbuket-vr {
|
||||
width: 1px;
|
||||
height: 35px;
|
||||
/* Pengganti style="height: 35px" */
|
||||
background-color: var(--bs-gray-400);
|
||||
/* Warna abu */
|
||||
opacity: 0.5;
|
||||
margin: 0 1.5rem;
|
||||
/* Memberi jarak kiri-kanan otomatis */
|
||||
}
|
||||
|
||||
.detailbuket-desc {
|
||||
|
|
@ -826,7 +816,6 @@ .detailbuket-note {
|
|||
text-align: justify;
|
||||
}
|
||||
|
||||
/* Image Frame */
|
||||
.detailbuket-img-frame {
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
|
|
@ -841,7 +830,6 @@ .detailbuket-img-frame img {
|
|||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
/* Specs & Note */
|
||||
.detailbuket-specs .icon-box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -868,7 +856,6 @@ .detailbuket-note {
|
|||
border-left: 4px solid var(--bs-primary);
|
||||
}
|
||||
|
||||
/* Detail Foto */
|
||||
.detailfoto-card {
|
||||
background: var(--bs-white);
|
||||
border: 1px solid var(--bs-gray-200);
|
||||
|
|
@ -879,7 +866,7 @@ .detailfoto-thumb {
|
|||
width: 120px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.detailfoto-addon-item {
|
||||
|
|
@ -893,11 +880,68 @@ .detailfoto-addon-item {
|
|||
background: var(--bs-white);
|
||||
}
|
||||
|
||||
/* Counter & Date */
|
||||
.detailfoto-product-title {
|
||||
font-weight: 700;
|
||||
font-size: var(--heading3-font);
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.detailfoto-product-price {
|
||||
font-weight: 600;
|
||||
font-size: var(--nav-font);
|
||||
color: var(--bs-gray-800);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detailfoto-product-desc {
|
||||
font-size: var(--body-font);
|
||||
color: var(--bs-gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detailfoto-addons-title {
|
||||
font-weight: 600;
|
||||
font-size: var(--heading3-font);
|
||||
color: var(--bs-heading-color);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detailfoto-addon-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--bs-gray-200);
|
||||
border-radius: 12px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.detailfoto-addon-item:hover {
|
||||
border-color: var(--bs-primary);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.detailfoto-addon-name {
|
||||
font-weight: 600;
|
||||
font-size: var(--nav-font);
|
||||
color: var(--bs-heading-color);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.detailfoto-addon-price {
|
||||
font-size: var(--body-font);
|
||||
font-weight: 500;
|
||||
color: var(--bs-gray-600);
|
||||
}
|
||||
|
||||
.detailfoto-counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detailfoto-counter input {
|
||||
|
|
@ -905,8 +949,9 @@ .detailfoto-counter input {
|
|||
border: none;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
font-size: var(--nav-font);
|
||||
}
|
||||
|
||||
.btn-counter {
|
||||
|
|
@ -936,49 +981,235 @@ .detailfoto-date-grid {
|
|||
gap: 10px;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
margin: 0 auto;
|
||||
/* KALENDER */
|
||||
.detailfoto-calendar-box {
|
||||
padding: 0px 25px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* 1. Teks Peringatan Timer (Kiri Atas) */
|
||||
.timer-alert-text {
|
||||
font-size: var(--body-font);
|
||||
font-weight: 500;
|
||||
color: var(--bs-heading-color);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* 2. Badge Timer (Kanan Atas - Merah Solid) */
|
||||
.timer-badge {
|
||||
display: inline-block;
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
padding: 4px 12px !important;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
font-size: var(--body-font);
|
||||
font-family: monospace;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: 0 2px 5px rgba(220, 53, 69, 0.2);
|
||||
}
|
||||
|
||||
/* 3. Judul Utama "Pilih Tanggal..." */
|
||||
.schedule-title {
|
||||
font-weight: 600;
|
||||
font-size: var(--nav-font);
|
||||
color: var(--bs-heading-color);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.schedule-desc {
|
||||
font-size: var(--body-font);
|
||||
color: var(--bs-gray-600);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cal-month-label {
|
||||
font-size: var(--nav-font);
|
||||
font-weight: 500;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.cal-nav-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
color: var(--bs-gray-600);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.date-item:hover:not(.disabled) {
|
||||
background-color: var(--bs-gray-200);
|
||||
.cal-nav-btn i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cal-nav-btn:hover {
|
||||
background-color: var(--bs-primary);
|
||||
border-color: var(--bs-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cal-nav-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* --- BAGIAN KIRI: KALENDER --- */
|
||||
.detailfoto-date-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: var(--body-font);
|
||||
font-weight: 500;
|
||||
color: #aaa;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--body-font);
|
||||
font-weight: 500;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
color: var(--bs-heading-color);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.date-item:hover:not(.disabled):not(.selected) {
|
||||
background-color: var(--bs-gray-100);
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.date-item.selected {
|
||||
background-color: var(--bs-primary);
|
||||
color: var(--bs-white);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.date-item.disabled {
|
||||
color: var(--bs-gray-400);
|
||||
cursor: default;
|
||||
color: #ddd;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* --- BAGIAN KANAN: JAM --- */
|
||||
.time-slot-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.time-slot-container::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.time-slot-container::-webkit-scrollbar-thumb {
|
||||
background: #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-time {
|
||||
width: 100%;
|
||||
border: 1px solid var(--bs-primary);
|
||||
color: var(--bs-primary);
|
||||
width: 90px;
|
||||
padding: 8px 4px;
|
||||
font-size: var(--body-font);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
border-radius: 50px;
|
||||
padding: 8px;
|
||||
font-size: 0.9rem;
|
||||
background: #fff;
|
||||
color: var(--bs-heading-color);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.btn-time:hover {
|
||||
border-color: var(--bs-primary);
|
||||
color: var(--bs-primary);
|
||||
background: var(--bs-gray-50);
|
||||
}
|
||||
|
||||
.btn-time:hover,
|
||||
.btn-time.active {
|
||||
background-color: var(--bs-primary);
|
||||
background: var(--bs-primary);
|
||||
color: #fff;
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.btn-time.disabled {
|
||||
background: var(--bs-gray-100);
|
||||
color: #ccc;
|
||||
border-color: var(--bs-gray-200);
|
||||
pointer-events: none;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.btn-action-cancel,
|
||||
.btn-action-submit {
|
||||
border-radius: 50px;
|
||||
/* Bentuk Pil Bulat */
|
||||
padding: 12px 0;
|
||||
/* Tinggi tombol */
|
||||
font-weight: 600;
|
||||
/* Teks Semi-Bold */
|
||||
font-size: 0.95rem;
|
||||
/* Ukuran font pas */
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
/* Hilangkan garis bawah link */
|
||||
transition: all 0.3s ease;
|
||||
/* Animasi halus */
|
||||
display: inline-block;
|
||||
/* Biar rapi */
|
||||
}
|
||||
|
||||
.btn-action-cancel {
|
||||
background-color: #fff;
|
||||
color: var(--bs-primary);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
font-weight: 500;
|
||||
font-size: var(--body-font);
|
||||
border-radius: 50px;
|
||||
padding: 12px 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-action-cancel:hover {
|
||||
color: var(--bs-white);
|
||||
}
|
||||
|
||||
.btn-action-submit {
|
||||
background-color: var(--bs-primary);
|
||||
border: 1px solid var(--bs-primary);
|
||||
color: #fff;
|
||||
font-size: var(--body-font);
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 6px rgba(59, 129, 129, 0.2);
|
||||
}
|
||||
|
||||
/* Hover Pesan Sekarang */
|
||||
.btn-action-submit:hover {
|
||||
background-color: var(--bs-primary-hover);
|
||||
/* Teal Lebih Gelap */
|
||||
border-color: var(--bs-primary-hover);
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
/* Efek Naik Sedikit */
|
||||
box-shadow: 0 6px 12px rgba(59, 129, 129, 0.3);
|
||||
/* Bayangan makin nyata */
|
||||
}
|
||||
|
||||
/* Detail Buttons */
|
||||
.btn-detailbuket-primary,
|
||||
.btn-detailfoto-primary {
|
||||
|
|
@ -1003,10 +1234,11 @@ .btn-detailfoto-primary:hover {
|
|||
.btn-detailbuket-secondary,
|
||||
.btn-detailfoto-outline {
|
||||
background-color: var(--bs-white);
|
||||
border: 1px solid #dee2e6;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
color: var(--bs-primary);
|
||||
padding: 12px 24px;
|
||||
border-radius: 50px;
|
||||
font-size: var(--body-font);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1074,20 +1306,23 @@ .formulirfoto-input:focus {
|
|||
box-shadow: 0 0 0 4px rgba(59, 129, 129, 0.1);
|
||||
}
|
||||
|
||||
.formulirbuket-payment-box h5 {
|
||||
.formulirbuket-payment-box h5,
|
||||
.formulirfoto-payment-box h5 {
|
||||
font-weight: 600;
|
||||
color: var(--bs-black);
|
||||
font-size: var(--subheading-font);
|
||||
}
|
||||
|
||||
.formulirbuket-payment-box .text-muted {
|
||||
.formulirbuket-payment-box .text-muted,
|
||||
.formulirfoto-payment-box .text-muted {
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
color: var(--bs-gray-600) !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
/* 3. Teks Instruksi ("Transfer ke Rekening Berikut", "Upload Bukti") */
|
||||
.formulirbuket-payment-box p.small {
|
||||
.formulirbuket-payment-box p.small,
|
||||
.formulirfoto-payment-box p.small {
|
||||
font-weight: 600;
|
||||
/* Bold */
|
||||
color: var(--bs-heading-color);
|
||||
|
|
@ -1102,13 +1337,23 @@ .formulirbuket-payment-box .d-flex.justify-content-between.mb-4 {
|
|||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.formulirfoto-payment-box .d-flex.justify-content-between.mb-4 {
|
||||
border-bottom: 1px solid var(--bs-gray-300);
|
||||
border-top: 1px solid var(--bs-gray-300);
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.formulirfoto-card,
|
||||
.formulirbuket-card,
|
||||
.formulirfoto-payment-box,
|
||||
.formulirbuket-payment-box,
|
||||
.formulirbuket-product-summary {
|
||||
background: var(--bs-white);
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.formulirbuket-product-summary {
|
||||
|
|
@ -1191,7 +1436,8 @@ .form-label.small {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.formulirbuket-input {
|
||||
.formulirbuket-input,
|
||||
.formulirfoto-input {
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
border-radius: 12px;
|
||||
|
|
@ -1202,13 +1448,15 @@ .formulirbuket-input {
|
|||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.formulirbuket-input:focus {
|
||||
.formulirbuket-input:focus,
|
||||
.formulirfoto-input:focus {
|
||||
background-color: #fff;
|
||||
border-color: var(--bs-gray-500);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.formulirbuket-input::placeholder {
|
||||
.formulirbuket-input::placeholder,
|
||||
.formulirfoto-input::placeholder {
|
||||
color: var(--bs-gray-600);
|
||||
/* Abu muda */
|
||||
font-size: 0.9rem;
|
||||
|
|
@ -1227,6 +1475,72 @@ input[type="time"].formulirbuket-input {
|
|||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-left {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.summary-qty {
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
font-size: var(--nav-font);
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
font-size: var(--nav-font);
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: var(--nav-font);
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.summary-subtext {
|
||||
text-align: left;
|
||||
font-size: var(--nav-font);
|
||||
padding-right: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* --- TOTAL ROW --- */
|
||||
.summary-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--bs-gray-300);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-weight: 800;
|
||||
font-size: 1.4rem;
|
||||
color: var(--bs-primary);
|
||||
/* Warna Teal */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.formulirbuket-btn-submit,
|
||||
.formulirfoto-btn-submit {
|
||||
background-color: var(--bs-primary);
|
||||
|
|
@ -1246,11 +1560,14 @@ .formulirfoto-btn-submit:hover {
|
|||
.formulirbuket-btn-cancel,
|
||||
.formulirfoto-btn-cancel {
|
||||
background-color: var(--bs-white);
|
||||
color: var(--bs-gray-600);
|
||||
color: var(--bs-primary);
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
font-size: var(--body-font);
|
||||
padding: 12px;
|
||||
border-radius: 50px;
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1381,6 +1698,10 @@ .social-icon:hover {
|
|||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
11. BACK TO TOP BUTTON
|
||||
========================================= */
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
visibility: hidden;
|
||||
|
|
|
|||
Loading…
Reference in New Issue