9b2ace7bc0
Introduces StatCard ViewComponent with configurable stat display Adds demo mode banner to application layout Refactors dashboard stats to use dynamic component rendering Improves dashboard presentation and user experience
145 lines
2.9 KiB
CSS
145 lines
2.9 KiB
CSS
/**
|
|
* Demo Banner
|
|
*
|
|
* Persistent banner shown at the top of pages when in demo mode.
|
|
* Provides CTA to subscription selection.
|
|
*/
|
|
|
|
/* ===========================================
|
|
DEMO BANNER
|
|
=========================================== */
|
|
swp-demo-banner {
|
|
/* TODO: Remove display:none when demo mode is ready */
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-3) var(--spacing-6);
|
|
background: linear-gradient(135deg, var(--color-teal) 0%, #00796b 100%);
|
|
color: white;
|
|
font-size: var(--font-size-sm);
|
|
position: relative;
|
|
z-index: 1000;
|
|
}
|
|
|
|
swp-demo-banner-text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
swp-demo-banner-text i {
|
|
font-size: 18px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
swp-demo-banner-text span {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
swp-demo-banner-text strong {
|
|
font-weight: var(--font-weight-semibold);
|
|
opacity: 1;
|
|
}
|
|
|
|
swp-demo-banner-cta {
|
|
display: inline-flex;
|
|
}
|
|
|
|
swp-demo-banner-cta a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
background: white;
|
|
color: var(--color-teal);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
border-radius: var(--radius-pill);
|
|
text-decoration: none;
|
|
transition: all var(--transition-fast);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
swp-demo-banner-cta a:hover {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
color: #00695c;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
swp-demo-banner-cta i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Close button (optional) */
|
|
swp-demo-banner-close {
|
|
position: absolute;
|
|
right: var(--spacing-4);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 50%;
|
|
color: white;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
swp-demo-banner-close:hover {
|
|
opacity: 1;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
swp-demo-banner-close i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* ===========================================
|
|
BODY OFFSET (when banner is visible)
|
|
=========================================== */
|
|
body.has-demo-banner swp-app-layout {
|
|
/* Adjust if banner needs to push content down */
|
|
}
|
|
|
|
/* ===========================================
|
|
RESPONSIVE
|
|
=========================================== */
|
|
@media (max-width: 768px) {
|
|
swp-demo-banner {
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
}
|
|
|
|
swp-demo-banner-text {
|
|
flex: 1 1 100%;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
swp-demo-banner-cta {
|
|
flex: 1 1 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
swp-demo-banner-cta a {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
swp-demo-banner-text span {
|
|
display: none;
|
|
}
|
|
|
|
swp-demo-banner-text strong {
|
|
display: inline;
|
|
}
|
|
}
|