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 {
|
.katalogbuket-product-title {
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
font-size: var(--subheading-font);
|
font-size: var(--subheading-font);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
color: var(--bs-black);
|
color: var(--bs-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.katalogbuket-product-price {
|
.katalogbuket-product-price {
|
||||||
font-size: var(--nav-font);
|
font-size: var(--body-font);
|
||||||
color: var(--bs-gray-600);
|
color: var(--bs-gray-600);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-pagination {
|
.btn-pagination {
|
||||||
|
|
@ -744,20 +745,18 @@ .bookingfoto-card:hover .img-wrapper img {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bookingfoto-product-title {
|
.bookingfoto-product-title {
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
font-size: 1.1rem;
|
font-size: var(--subheading-font);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
color: var(--bs-heading-color);
|
color: var(--bs-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bookingfoto-product-price {
|
.bookingfoto-product-price {
|
||||||
font-size: 0.95rem;
|
font-size: var(--body-font);
|
||||||
color: var(--bs-gray-600);
|
color: var(--bs-gray-600);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* =========================================
|
/* =========================================
|
||||||
7. DETAIL PAGES
|
7. DETAIL PAGES
|
||||||
========================================= */
|
========================================= */
|
||||||
|
|
@ -784,33 +783,24 @@ .detailbuket-price {
|
||||||
|
|
||||||
.detailbuket-spec-label {
|
.detailbuket-spec-label {
|
||||||
font-size: var(--body-font);
|
font-size: var(--body-font);
|
||||||
/* Pengganti style="font-size: 0.75rem" */
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
/* Pengganti style="font-weight: 600" */
|
|
||||||
color: var(--bs-gray-600);
|
color: var(--bs-gray-600);
|
||||||
/* Pengganti class text-muted */
|
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Value Besar (Fresh Flowers / Medium) */
|
|
||||||
.detailbuket-spec-val {
|
.detailbuket-spec-val {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
/* Pengganti class fw-bold */
|
|
||||||
color: black;
|
color: black;
|
||||||
font-size: var(--body-font);
|
font-size: var(--body-font);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Garis Pemisah Vertical Custom */
|
|
||||||
.detailbuket-vr {
|
.detailbuket-vr {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
/* Pengganti style="height: 35px" */
|
|
||||||
background-color: var(--bs-gray-400);
|
background-color: var(--bs-gray-400);
|
||||||
/* Warna abu */
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
margin: 0 1.5rem;
|
margin: 0 1.5rem;
|
||||||
/* Memberi jarak kiri-kanan otomatis */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailbuket-desc {
|
.detailbuket-desc {
|
||||||
|
|
@ -826,7 +816,6 @@ .detailbuket-note {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Image Frame */
|
|
||||||
.detailbuket-img-frame {
|
.detailbuket-img-frame {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
@ -841,7 +830,6 @@ .detailbuket-img-frame img {
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Specs & Note */
|
|
||||||
.detailbuket-specs .icon-box {
|
.detailbuket-specs .icon-box {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -868,7 +856,6 @@ .detailbuket-note {
|
||||||
border-left: 4px solid var(--bs-primary);
|
border-left: 4px solid var(--bs-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Detail Foto */
|
|
||||||
.detailfoto-card {
|
.detailfoto-card {
|
||||||
background: var(--bs-white);
|
background: var(--bs-white);
|
||||||
border: 1px solid var(--bs-gray-200);
|
border: 1px solid var(--bs-gray-200);
|
||||||
|
|
@ -879,7 +866,7 @@ .detailfoto-thumb {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailfoto-addon-item {
|
.detailfoto-addon-item {
|
||||||
|
|
@ -893,11 +880,68 @@ .detailfoto-addon-item {
|
||||||
background: var(--bs-white);
|
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 {
|
.detailfoto-counter {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailfoto-counter input {
|
.detailfoto-counter input {
|
||||||
|
|
@ -905,8 +949,9 @@ .detailfoto-counter input {
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
font-size: var(--nav-font);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-counter {
|
.btn-counter {
|
||||||
|
|
@ -936,49 +981,235 @@ .detailfoto-date-grid {
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-item {
|
/* KALENDER */
|
||||||
height: 35px;
|
.detailfoto-calendar-box {
|
||||||
width: 35px;
|
padding: 0px 25px;
|
||||||
margin: 0 auto;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 50%;
|
background-color: #fff;
|
||||||
font-size: 0.9rem;
|
border: 1px solid var(--bs-gray-300);
|
||||||
cursor: pointer;
|
color: var(--bs-gray-600);
|
||||||
transition: all 0.2s;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-item:hover:not(.disabled) {
|
.cal-nav-btn i {
|
||||||
background-color: var(--bs-gray-200);
|
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);
|
color: var(--bs-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-item.selected {
|
.date-item.selected {
|
||||||
background-color: var(--bs-primary);
|
background-color: var(--bs-primary);
|
||||||
color: var(--bs-white);
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-item.disabled {
|
.date-item.disabled {
|
||||||
color: var(--bs-gray-400);
|
color: #ddd;
|
||||||
cursor: default;
|
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 {
|
.btn-time {
|
||||||
width: 100%;
|
width: 90px;
|
||||||
border: 1px solid var(--bs-primary);
|
padding: 8px 4px;
|
||||||
color: var(--bs-primary);
|
font-size: var(--body-font);
|
||||||
|
font-weight: 500;
|
||||||
|
border: 1px solid var(--bs-gray-300);
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
padding: 8px;
|
background: #fff;
|
||||||
font-size: 0.9rem;
|
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 {
|
.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);
|
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 */
|
/* Detail Buttons */
|
||||||
.btn-detailbuket-primary,
|
.btn-detailbuket-primary,
|
||||||
.btn-detailfoto-primary {
|
.btn-detailfoto-primary {
|
||||||
|
|
@ -1003,10 +1234,11 @@ .btn-detailfoto-primary:hover {
|
||||||
.btn-detailbuket-secondary,
|
.btn-detailbuket-secondary,
|
||||||
.btn-detailfoto-outline {
|
.btn-detailfoto-outline {
|
||||||
background-color: var(--bs-white);
|
background-color: var(--bs-white);
|
||||||
border: 1px solid #dee2e6;
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||||
color: var(--bs-primary);
|
color: var(--bs-primary);
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
|
font-size: var(--body-font);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -1074,20 +1306,23 @@ .formulirfoto-input:focus {
|
||||||
box-shadow: 0 0 0 4px rgba(59, 129, 129, 0.1);
|
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;
|
font-weight: 600;
|
||||||
color: var(--bs-black);
|
color: var(--bs-black);
|
||||||
font-size: var(--subheading-font);
|
font-size: var(--subheading-font);
|
||||||
}
|
}
|
||||||
|
|
||||||
.formulirbuket-payment-box .text-muted {
|
.formulirbuket-payment-box .text-muted,
|
||||||
|
.formulirfoto-payment-box .text-muted {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
color: var(--bs-gray-600) !important;
|
color: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 3. Teks Instruksi ("Transfer ke Rekening Berikut", "Upload Bukti") */
|
/* 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;
|
font-weight: 600;
|
||||||
/* Bold */
|
/* Bold */
|
||||||
color: var(--bs-heading-color);
|
color: var(--bs-heading-color);
|
||||||
|
|
@ -1102,13 +1337,23 @@ .formulirbuket-payment-box .d-flex.justify-content-between.mb-4 {
|
||||||
margin-bottom: 10px !important;
|
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,
|
.formulirfoto-card,
|
||||||
|
.formulirbuket-card,
|
||||||
.formulirfoto-payment-box,
|
.formulirfoto-payment-box,
|
||||||
|
.formulirbuket-payment-box,
|
||||||
.formulirbuket-product-summary {
|
.formulirbuket-product-summary {
|
||||||
background: var(--bs-white);
|
background: var(--bs-white);
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 24px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formulirbuket-product-summary {
|
.formulirbuket-product-summary {
|
||||||
|
|
@ -1191,7 +1436,8 @@ .form-label.small {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formulirbuket-input {
|
.formulirbuket-input,
|
||||||
|
.formulirfoto-input {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid var(--bs-gray-300);
|
border: 1px solid var(--bs-gray-300);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
@ -1202,13 +1448,15 @@ .formulirbuket-input {
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formulirbuket-input:focus {
|
.formulirbuket-input:focus,
|
||||||
|
.formulirfoto-input:focus {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-color: var(--bs-gray-500);
|
border-color: var(--bs-gray-500);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formulirbuket-input::placeholder {
|
.formulirbuket-input::placeholder,
|
||||||
|
.formulirfoto-input::placeholder {
|
||||||
color: var(--bs-gray-600);
|
color: var(--bs-gray-600);
|
||||||
/* Abu muda */
|
/* Abu muda */
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
|
@ -1227,6 +1475,72 @@ input[type="time"].formulirbuket-input {
|
||||||
font-size: 0.9rem;
|
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,
|
.formulirbuket-btn-submit,
|
||||||
.formulirfoto-btn-submit {
|
.formulirfoto-btn-submit {
|
||||||
background-color: var(--bs-primary);
|
background-color: var(--bs-primary);
|
||||||
|
|
@ -1246,11 +1560,14 @@ .formulirfoto-btn-submit:hover {
|
||||||
.formulirbuket-btn-cancel,
|
.formulirbuket-btn-cancel,
|
||||||
.formulirfoto-btn-cancel {
|
.formulirfoto-btn-cancel {
|
||||||
background-color: var(--bs-white);
|
background-color: var(--bs-white);
|
||||||
color: var(--bs-gray-600);
|
color: var(--bs-primary);
|
||||||
|
font-weight: 500;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
font-size: var(--body-font);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 50px;
|
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;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
@ -1381,6 +1698,10 @@ .social-icon:hover {
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =========================================
|
||||||
|
11. BACK TO TOP BUTTON
|
||||||
|
========================================= */
|
||||||
|
|
||||||
.back-to-top {
|
.back-to-top {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue