This commit is contained in:
Khwezi Mngoma
@@ -6,6 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="/" />
|
||||
<ResourcePreloader />
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
|
||||
<link rel="stylesheet" href="@Assets["app.css"]" />
|
||||
<link rel="stylesheet" href="@Assets["MidrandBookshop.styles.css"]" />
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
@inherits LayoutComponentBase
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<div class="position-relative min-vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
|
||||
<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
|
||||
|
||||
@* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
|
||||
<div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
|
||||
<div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
|
||||
<div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
|
||||
@@ -76,9 +77,10 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="w-100 flex-grow-1 position-relative">
|
||||
|
||||
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: 0; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
|
||||
@* --- TOP FIXED LAYOUT AREA --- *@
|
||||
<div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
|
||||
@* Decorative Background SVG Watermark Line Graphic *@
|
||||
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
|
||||
<svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
|
||||
<circle cx="100" cy="100" r="92" stroke="#1A1A1A" stroke-width="0.4" />
|
||||
@@ -103,7 +105,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg py-3 sticky-top-nav" style="pointer-events: auto;">
|
||||
<nav class="navbar navbar-expand-lg py-3" style="pointer-events: auto;">
|
||||
<div class="container-fluid px-md-5">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/" style="transform: scale(1.6); transform-origin: left center; margin-right: 4rem;">
|
||||
<svg class="me-2" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
@@ -163,7 +165,7 @@
|
||||
}
|
||||
</button>
|
||||
|
||||
<a href="/login" class="btn btn-dark rounded-pill px-3 py-1 d-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
|
||||
<a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
@@ -173,94 +175,67 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@* --- MAIN INDEPENDENT SCROLL LAYER --- *@
|
||||
<div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
|
||||
<main class="position-relative" style="z-index: 5;">
|
||||
<CascadingValue Value="GlobalSearchQuery">
|
||||
@Body
|
||||
</CascadingValue>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="w-100 position-relative overflow-hidden"
|
||||
style="z-index: 10; padding: 5.5rem 0 3.5rem 0; background-color: #F2F4F7 !important; background-image: linear-gradient(90deg, #FFF 0%, rgba(243,245,249,0.98) 22%, #FFF 48%, rgba(239,242,247,0.98) 73%, #FFF 100%), repeating-linear-gradient(15deg, rgba(0,0,0,0.005) 0px, rgba(0,0,0,0.005) 1px, transparent 1px, transparent 41px), repeating-linear-gradient(-25deg, rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.6) 2px, transparent 2px, transparent 73px), repeating-linear-gradient(65deg, rgba(0,0,0,0.003) 0px, rgba(0,0,0,0.003) 1px, transparent 1px, transparent 127px) !important;">
|
||||
<div class="position-absolute top-0 start-0 w-100 h-100" style="background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.45) 0%, rgba(242,244,248,0.05) 100%); pointer-events: none; z-index: 1; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);"></div>
|
||||
<div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 2; opacity: 0.95; pointer-events: none; mix-blend-mode: multiply;">
|
||||
<svg width="100%" height="100%" viewBox="0 0 1440 400" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="15%" cy="35%" rx="750" ry="400" fill="url(#randomMetal_1)" />
|
||||
<ellipse cx="60%" cy="80%" rx="950" ry="350" fill="url(#randomMetal_2)" />
|
||||
<ellipse cx="85%" cy="20%" rx="600" ry="250" fill="url(#randomMetal_3)" />
|
||||
<defs>
|
||||
<radialGradient id="randomMetal_1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(216 140) rotate(15) scale(350 750)">
|
||||
<stop offset="0%" stop-color="#FFFFFF" />
|
||||
<stop offset="60%" stop-color="#EBF0F7" />
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="randomMetal_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(864 320) rotate(-15) scale(300 950)">
|
||||
<stop offset="0%" stop-color="#FFFFFF" />
|
||||
<stop offset="70%" stop-color="#E2E7F2" />
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="randomMetal_3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1224 80) rotate(45) scale(200 600)">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.8" />
|
||||
<stop offset="50%" stop-color="#E9EDF5" stop-opacity="0.3" />
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="position-absolute top-0 start-0 w-100" style="height: 2px; z-index: 5;">
|
||||
<div class="w-100" style="height: 1px; background: rgba(0, 0, 0, 0.055);"></div>
|
||||
<div class="w-100" style="height: 1px; background: rgba(255, 255, 255, 0.95);"></div>
|
||||
</div>
|
||||
<div class="container-fluid px-md-5 position-relative" style="z-index: 4;">
|
||||
<div class="row g-4 pb-5 justify-content-between" style="border-bottom: 1px solid rgba(0, 0, 0, 0.05);">
|
||||
<div class="col-12 col-md-5">
|
||||
<span class="fw-bold tracking-tight text-dark d-block mb-3" style="font-size: 0.75rem; letter-spacing: 1px; font-family: 'Inter', sans-serif;">MIDRAND BOOKS</span>
|
||||
<p class="text-muted small mb-4" style="line-height: 1.6; max-width: 360px;">An architectural destination for curated print, thoughtful reading culture, and global design perspectives.</p>
|
||||
<div class="d-flex flex-column gap-2.5">
|
||||
<a href="mailto:info@midrandbooks.co.za" class="text-decoration-none text-muted d-inline-flex align-items-center gap-2 small">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
|
||||
info@midrandbooks.co.za
|
||||
</a>
|
||||
<a href="tel:+27872650198" class="text-decoration-none text-muted d-inline-flex align-items-center gap-2 small">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 .2.81.7A2 2 0 0 1 22 16.92z" /></svg>
|
||||
+27 87 265 9463
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-5 text-start">
|
||||
<div class="row row-cols-2 justify-content-md-end g-3">
|
||||
<div style="max-width: 160px;">
|
||||
<span class="text-dark fw-bold tracking-wider d-block mb-3" style="font-size: 0.65rem; letter-spacing: 1.2px;">PLATFORM</span>
|
||||
<ul class="list-unstyled d-flex flex-column gap-2 m-0">
|
||||
<li><a href="/about" class="text-decoration-none text-muted small">About Us</a></li>
|
||||
<li><a href="/" class="text-decoration-none text-muted small">Browse Catalog</a></li>
|
||||
<li><a href="/contact" class="text-decoration-none text-muted small">Contact Us</a></li>
|
||||
</ul>
|
||||
<footer class="custom-site-footer border-top mt-auto">
|
||||
<div class="container-fluid px-md-5">
|
||||
<div class="row g-4 pb-4 justify-content-between footer-content-section">
|
||||
<div class="col-12 col-md-5">
|
||||
<span class="footer-brand-title d-block mb-2">MIDRAND BOOKS</span>
|
||||
<p class="footer-desc mb-3">An architectural destination for curated print, thoughtful reading culture, and global design perspectives.</p>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<a href="mailto:info@midrandbooks.co.za" class="footer-contact-link">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
|
||||
info@midrandbooks.co.za
|
||||
</a>
|
||||
<a href="tel:+27872650198" class="footer-contact-link">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 .2.81.7A2 2 0 0 1 22 16.92z" /></svg>
|
||||
+27 87 265 9463
|
||||
</a>
|
||||
</div>
|
||||
<div style="max-width: 210px;">
|
||||
<span class="text-dark fw-bold tracking-wider d-block mb-3" style="font-size: 0.65rem; letter-spacing: 1.2px;">ENTERPRISE</span>
|
||||
<ul class="list-unstyled d-flex flex-column gap-2 m-0">
|
||||
<li class="small text-muted d-flex align-items-center gap-1.5 mb-1" style="font-weight: 500;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
|
||||
Lite Charms (PTY) Ltd
|
||||
</li>
|
||||
<li><a href="/terms" class="text-decoration-none text-muted small">Terms & Conditions</a></li>
|
||||
<li><a href="/privacy" class="text-decoration-none text-muted small">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-5 text-start">
|
||||
<div class="row row-cols-2 justify-content-md-end g-3">
|
||||
<div style="max-width: 160px;">
|
||||
<span class="footer-section-heading d-block mb-2">PLATFORM</span>
|
||||
<ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
|
||||
<li><a href="/about" class="footer-nav-link">About Us</a></li>
|
||||
<li><a href="/" class="footer-nav-link">Browse Catalog</a></li>
|
||||
<li><a href="/contact" class="footer-nav-link">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="max-width: 210px;">
|
||||
<span class="footer-section-heading d-block mb-2">ENTERPRISE</span>
|
||||
<ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
|
||||
<li class="footer-meta-item d-flex align-items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
|
||||
Lite Charms (PTY) Ltd
|
||||
</li>
|
||||
<li><a href="/terms" class="footer-nav-link">Terms & Conditions</a></li>
|
||||
<li><a href="/privacy" class="footer-nav-link">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center pt-4">
|
||||
<div class="col-12 text-center text-md-start">
|
||||
<span class="text-muted tracking-wide" style="font-size: 0.75rem; font-weight: 500;">
|
||||
© @DateTime.Now.Year Midrand Books. All rights reserved.
|
||||
</span>
|
||||
<div class="row align-items-center pt-3 footer-copyright-section">
|
||||
<div class="col-12 text-center text-md-start">
|
||||
<span class="footer-copyright">
|
||||
© @DateTime.Now.Year Midrand Books. All rights reserved.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
/* --- Midrand Books Sliding Cart Extensions --- */
|
||||
|
||||
/* Ensure the navbar stays on top while scrolling */
|
||||
.sticky-top {
|
||||
position: -webkit-sticky !important; /* Safari */
|
||||
position: -webkit-sticky !important;
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
/* Dimmed backdrop background blur styling */
|
||||
.cart-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -24,12 +20,11 @@
|
||||
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cart-overlay.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.cart-overlay.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Slide-out Sidebar Panel layout specification */
|
||||
.cart-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -38,16 +33,15 @@
|
||||
max-width: 400px;
|
||||
height: 100vh;
|
||||
z-index: 1050;
|
||||
pointer-events: none; /* Block layout actions while hidden off-screen */
|
||||
pointer-events: none;
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cart-drawer.is-open {
|
||||
transform: translateX(-420px);
|
||||
pointer-events: auto; /* Allow complete drawer clicks once slid forward */
|
||||
}
|
||||
.cart-drawer.is-open {
|
||||
transform: translateX(-420px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* FIXED: Prevent badge rendering from stealing button-down mouse highlights */
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
@@ -65,28 +59,135 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Micro typography utility sizes */
|
||||
.xx-small {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
/* Clean dashed divider lines for item items listing styling */
|
||||
.border-bottom-dashed {
|
||||
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* Custom quantity container inline metrics layout structure */
|
||||
.quantity-picker {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.quantity-picker button {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
.quantity-picker button {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quantity-picker button:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.quantity-picker button:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.custom-site-footer {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: #1A1A1A !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
padding: 3rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.footer-content-section {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.footer-brand-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-desc {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
max-width: 360px;
|
||||
color: #A0AEC0 !important;
|
||||
}
|
||||
|
||||
.footer-contact-link {
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
color: #A0AEC0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-contact-link:hover {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-section-heading {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.2px;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-nav-link {
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
color: #A0AEC0 !important;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-nav-link:hover {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-meta-item {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-copyright-section {
|
||||
color: #718096 !important;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.btn-back-to-top {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 42px !important;
|
||||
min-width: 42px !important;
|
||||
max-width: 42px !important;
|
||||
height: 42px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: #1A1A1A;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1010;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-back-to-top:hover {
|
||||
background-color: #333333;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-back-to-top:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
@rendermode InteractiveServer
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<div class="container text-center text-hero-wrapper">
|
||||
<div id="top-target" class="container text-center text-hero-wrapper">
|
||||
<h1 class="display-3 text-dark mb-3 px-2 master-headline">
|
||||
Discover thoughtfully curated<br>books for every reader.
|
||||
</h1>
|
||||
@@ -208,6 +208,16 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<a class="back-to-top-btn d-flex align-items-center justify-content-center"
|
||||
aria-label="Back to top"
|
||||
href="#top-target"
|
||||
onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="19" x2="12" y2="5"></line>
|
||||
<polyline points="5 12 12 5 19 12"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@code {
|
||||
public enum ViewMode { Grid, List }
|
||||
private ViewMode CurrentViewMode = ViewMode.Grid;
|
||||
|
||||
@@ -139,3 +139,34 @@
|
||||
min-width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Enable native smooth scrolling page-wide */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Back to Top Icon Layout Presentation */
|
||||
.back-to-top-btn {
|
||||
position: fixed !important;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50% !important;
|
||||
text-decoration: none !important;
|
||||
/* Dual-tone contrast visibility profile */
|
||||
background-color: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
border: 2px solid #1a1a1a !important;
|
||||
box-shadow: 0 0 0 2px #ffffff, 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
z-index: 2147483647 !important;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.back-to-top-btn:hover {
|
||||
transform: translateY(-4px);
|
||||
background-color: #1a1a1a !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #ffffff !important;
|
||||
box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
@@ -0,0 +1,362 @@
|
||||
@page "/profile"
|
||||
|
||||
<div class="container py-5">
|
||||
<h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-3">
|
||||
<div class="nav flex-column nav-pills" role="tablist">
|
||||
<button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
|
||||
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
|
||||
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
|
||||
<hr />
|
||||
<button class="nav-link text-danger text-start">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane fade show active" id="orders" role="tabpanel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="fw-bold m-0">Order History</h5>
|
||||
</div>
|
||||
|
||||
<div class="table-container-fixed">
|
||||
<table class="table align-middle profile-table m-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase text-muted col-order-id">Order ID</th>
|
||||
<th class="text-uppercase text-muted col-title">Title</th>
|
||||
<th class="text-uppercase text-muted col-date">Date</th>
|
||||
<th class="text-uppercase text-muted col-address">Address</th>
|
||||
<th class="text-uppercase text-muted col-status">Status</th>
|
||||
<th class="text-uppercase text-muted text-end col-total">Total</th>
|
||||
<th class="text-uppercase text-muted text-center col-invoice">Invoice</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (orderHistory != null)
|
||||
{
|
||||
@foreach (var order in orderHistory)
|
||||
{
|
||||
<tr>
|
||||
<td class="fw-medium text-nowrap">@order.OrderId</td>
|
||||
<td>
|
||||
<a href="/products/@order.ProductId" class="product-link fw-medium text-nowrap" title="@order.ProductTitle">
|
||||
@order.DisplayTitle
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-muted text-nowrap">@order.OrderDate.ToString("MMM dd, yyyy")</td>
|
||||
<td>
|
||||
<span class="text-secondary d-inline-flex align-items-center gap-1 text-nowrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
|
||||
</svg>
|
||||
@order.ShippingAddressName
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase text-nowrap">
|
||||
@order.Status
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end fw-medium text-nowrap">R @order.Total.ToString("N2")</td>
|
||||
<td class="text-center">
|
||||
<button class="btn btn-link p-0 text-dark action-btn" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<tr>
|
||||
<td colspan="7" class="text-center text-muted py-4">Loading order history...</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="shipping" role="tabpanel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="fw-bold m-0">Saved Addresses</h5>
|
||||
@if (!showAddForm && editingAddress == null)
|
||||
{
|
||||
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (showAddForm)
|
||||
{
|
||||
<div class="card p-4 border shadow-sm mb-4 bg-light">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="fw-bold m-0">New Address</h6>
|
||||
<button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
|
||||
</div>
|
||||
<input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
|
||||
<input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<input type="text" class="form-control" placeholder="City" @bind="newCity" />
|
||||
<input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
|
||||
</div>
|
||||
<div class="mb-3 d-flex gap-3">
|
||||
<label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
|
||||
<label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (editingAddress != null)
|
||||
{
|
||||
<div class="card p-4 border shadow-sm mb-4 bg-light">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="fw-bold m-0">Edit Address</h6>
|
||||
<button type="button" class="btn-close" @onclick="CancelEditing"></button>
|
||||
</div>
|
||||
<input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
|
||||
<input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
|
||||
<input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
|
||||
</div>
|
||||
<div class="mb-3 d-flex gap-3">
|
||||
<label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
|
||||
<label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@foreach (var addr in savedAddresses)
|
||||
{
|
||||
<div class="card p-4 shadow-sm mb-3 address-card">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<h6 class="fw-bold mb-1">@addr.Name</h6>
|
||||
<p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
|
||||
<div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
|
||||
@if (addr.IsBilling)
|
||||
{
|
||||
<span class="badge badge-tag">[Billing]</span>
|
||||
}
|
||||
@if (addr.IsShipping)
|
||||
{
|
||||
<span class="badge badge-tag">[Shipping]</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 actions-container">
|
||||
<label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
|
||||
<input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
|
||||
</label>
|
||||
|
||||
<button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="fw-bold m-0">Profile Settings</h5>
|
||||
</div>
|
||||
<div class="card p-4 shadow-sm">
|
||||
<p class="text-muted mb-0">Manage your password and profile data here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool showAddForm = false;
|
||||
private AddressItem? editingAddress = null;
|
||||
private string newAddressName = "";
|
||||
private string newStreetAddress = "";
|
||||
private string newCity = "";
|
||||
private string newPostalCode = "";
|
||||
private bool isBilling, isShipping;
|
||||
|
||||
private List<OrderItem> orderHistory = new()
|
||||
{
|
||||
new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
|
||||
new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
|
||||
};
|
||||
|
||||
private List<AddressItem> savedAddresses = new()
|
||||
{
|
||||
new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
|
||||
new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
|
||||
new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
|
||||
};
|
||||
|
||||
private void DownloadInvoice(string orderId)
|
||||
{
|
||||
// Handle invoice downloading logic here
|
||||
}
|
||||
|
||||
private void OpenAddForm()
|
||||
{
|
||||
editingAddress = null;
|
||||
showAddForm = true;
|
||||
}
|
||||
|
||||
private void SaveAddress()
|
||||
{
|
||||
if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
|
||||
{
|
||||
var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
|
||||
var newItem = new AddressItem
|
||||
{
|
||||
Id = nextId,
|
||||
Name = newAddressName,
|
||||
Street = newStreetAddress,
|
||||
City = newCity,
|
||||
PostalCode = newPostalCode,
|
||||
IsBilling = isBilling,
|
||||
IsShipping = isShipping,
|
||||
IsPrimary = !savedAddresses.Any()
|
||||
};
|
||||
savedAddresses.Add(newItem);
|
||||
ResetAddForm();
|
||||
}
|
||||
}
|
||||
|
||||
private void ResetAddForm()
|
||||
{
|
||||
newAddressName = "";
|
||||
newStreetAddress = "";
|
||||
newCity = "";
|
||||
newPostalCode = "";
|
||||
isBilling = false;
|
||||
isShipping = false;
|
||||
showAddForm = false;
|
||||
}
|
||||
|
||||
private void StartEditing(AddressItem addr)
|
||||
{
|
||||
showAddForm = false;
|
||||
editingAddress = new AddressItem
|
||||
{
|
||||
Id = addr.Id,
|
||||
Name = addr.Name,
|
||||
Street = addr.Street,
|
||||
City = addr.City,
|
||||
PostalCode = addr.PostalCode,
|
||||
IsBilling = addr.IsBilling,
|
||||
IsShipping = addr.IsShipping,
|
||||
IsPrimary = addr.IsPrimary
|
||||
};
|
||||
}
|
||||
|
||||
private void UpdateAddress()
|
||||
{
|
||||
if (editingAddress != null)
|
||||
{
|
||||
var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
|
||||
if (target != null)
|
||||
{
|
||||
target.Name = editingAddress.Name;
|
||||
target.Street = editingAddress.Street;
|
||||
target.City = editingAddress.City;
|
||||
target.PostalCode = editingAddress.PostalCode;
|
||||
target.IsBilling = editingAddress.IsBilling;
|
||||
target.IsShipping = editingAddress.IsShipping;
|
||||
}
|
||||
editingAddress = null;
|
||||
}
|
||||
}
|
||||
|
||||
private void CancelEditing()
|
||||
{
|
||||
editingAddress = null;
|
||||
}
|
||||
|
||||
private void DeleteAddress(AddressItem addr)
|
||||
{
|
||||
if (editingAddress?.Id == addr.Id)
|
||||
{
|
||||
editingAddress = null;
|
||||
}
|
||||
savedAddresses.Remove(addr);
|
||||
if (addr.IsPrimary && savedAddresses.Any())
|
||||
{
|
||||
savedAddresses.First().IsPrimary = true;
|
||||
}
|
||||
}
|
||||
|
||||
private void SetPrimary(AddressItem target, ChangeEventArgs e)
|
||||
{
|
||||
var isChecked = (bool)(e.Value ?? false);
|
||||
if (isChecked)
|
||||
{
|
||||
foreach (var addr in savedAddresses)
|
||||
{
|
||||
addr.IsPrimary = (addr.Id == target.Id);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
target.IsPrimary = false;
|
||||
}
|
||||
}
|
||||
|
||||
public class AddressItem
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Name { get; set; } = "";
|
||||
public string Street { get; set; } = "";
|
||||
public string City { get; set; } = "";
|
||||
public string PostalCode { get; set; } = "";
|
||||
public bool IsBilling { get; set; }
|
||||
public bool IsShipping { get; set; }
|
||||
public bool IsPrimary { get; set; }
|
||||
}
|
||||
|
||||
public class OrderItem
|
||||
{
|
||||
public string OrderId { get; set; } = "";
|
||||
public string ProductId { get; set; } = "";
|
||||
public string ProductTitle { get; set; } = "";
|
||||
public DateTime OrderDate { get; set; }
|
||||
public string ShippingAddressName { get; set; } = "";
|
||||
public string Status { get; set; } = "";
|
||||
public double Total { get; set; }
|
||||
|
||||
public string DisplayTitle
|
||||
{
|
||||
get
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(ProductTitle)) return "";
|
||||
const int maxLength = 21; // Shifted slightly down from 25 to protect bounds against lower resolutions
|
||||
return ProductTitle.Length <= maxLength
|
||||
? ProductTitle
|
||||
: $"{ProductTitle.Substring(0, maxLength)}...";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
::deep .container {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
/* Navigation Layout overrides */
|
||||
.nav-pills .nav-link {
|
||||
color: #6c757d;
|
||||
border-radius: 0;
|
||||
padding: 0.75rem 0;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active {
|
||||
background-color: transparent !important;
|
||||
color: #1A1A1A;
|
||||
border-bottom: 2px solid #1A1A1A;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link:hover:not(.active) {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* Cards layout rules */
|
||||
.card {
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.address-card {
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.address-card:hover {
|
||||
border-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/* Container Wrapper to Suppress the Scrollbar completely */
|
||||
.table-container-fixed {
|
||||
width: 100%;
|
||||
overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
|
||||
}
|
||||
|
||||
/* Global Table Typography - Reduced uniformly to keep items on a single line */
|
||||
.profile-table {
|
||||
font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
|
||||
width: 100%;
|
||||
table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
|
||||
}
|
||||
|
||||
.profile-table tbody td {
|
||||
padding-top: 0.85rem;
|
||||
padding-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.profile-table thead th {
|
||||
background-color: #F9F9F9;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.04rem;
|
||||
}
|
||||
|
||||
/* Compact Column Proportions */
|
||||
.col-order-id {
|
||||
width: 115px;
|
||||
}
|
||||
|
||||
.col-date {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.col-total {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.col-status {
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
.col-invoice {
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
width: auto; /* Takes shared residual space smoothly */
|
||||
}
|
||||
|
||||
.col-address {
|
||||
width: auto; /* Takes shared residual space smoothly */
|
||||
}
|
||||
|
||||
/* Product link handling */
|
||||
.product-link {
|
||||
color: #1A1A1A;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.product-link:hover {
|
||||
border-color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* Base Badge Settings */
|
||||
.badge {
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0.4em 0.8em;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Status Badge Palette Colors */
|
||||
.status-shipped {
|
||||
background-color: #e3f2fd !important;
|
||||
color: #0d6efd !important;
|
||||
border: 1px solid rgba(13, 110, 253, 0.15);
|
||||
}
|
||||
|
||||
.status-delivered {
|
||||
background-color: #e8f5e9 !important;
|
||||
color: #198754 !important;
|
||||
border: 1px solid rgba(25, 135, 84, 0.15);
|
||||
}
|
||||
|
||||
.badge-tag {
|
||||
background-color: #f0f0f0 !important;
|
||||
color: #4a4a4a !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Form Buttons */
|
||||
.btn-outline-dark {
|
||||
border-radius: 50px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
/* Action button configurations */
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.15s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.action-btn.text-danger:hover {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Compact SVG Icons sizing */
|
||||
.svg-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pointer-label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -13,8 +13,7 @@
|
||||
--mb-radius: 12px;
|
||||
/* High-Visibility Machined White Metal Core Surface Definition */
|
||||
/* Sharp linear reflection channels paired with micro-milled density grids */
|
||||
--brushed-metal-bg: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(240, 241, 245, 0.95) 25%, rgba(255, 255, 255, 1) 50%, rgba(238, 240, 244, 0.95) 75%, rgba(255, 255, 255, 1) 100% ), repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.012) 0px, rgba(0, 0, 0, 0.012) 1px, transparent 1px, transparent 2px ),
|
||||
repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.9) 1px, transparent 1px, transparent 3px ), #EDEFF4; /* Definitive satin platinum breakout base fallback */
|
||||
--brushed-metal-bg: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(240, 241, 245, 0.95) 25%, rgba(255, 255, 255, 1) 50%, rgba(238, 240, 244, 0.95) 75%, rgba(255, 255, 255, 1) 100% ), repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.012) 0px, rgba(0, 0, 0, 0.012) 1px, transparent 1px, transparent 2px ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.9) 1px, transparent 1px, transparent 3px ), #EDEFF4; /* Definitive satin platinum breakout base fallback */
|
||||
}
|
||||
|
||||
/* Global Reset & Core Variables Mapping */
|
||||
@@ -113,23 +112,3 @@ h1:focus, h2:focus, h3:focus, h4:focus, p:focus, div:focus, span:focus {
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Polished White Metal Footer Enhancements */
|
||||
footer .text-muted {
|
||||
color: #555555 !important;
|
||||
}
|
||||
|
||||
footer .text-dark {
|
||||
color: #1A1A1A !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
footer span.text-muted,
|
||||
footer a.text-muted {
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
footer a.text-muted:hover {
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.5 KiB |
Reference in New Issue
Block a user