arie.bagus.2905/web-antrean
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update sidebar checkin dan antrian loket

Browse Source
This commit is contained in:
Fanrouver
2026-01-26 09:46:38 +07:00
parent 75a96389fe
commit 525322b6f6
8 changed files with 892 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pages/Anjungan/AntrianLoket/index.vue
+1 -1
View File
@@ -12,7 +12,7 @@
<div class="header-content">
<h1 class="main-title">Pilih Layar Antrian Loket</h1>
<p class="subtitle">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
</div>
</div>
</div>
<div class="loket-selection-container">
pages/CheckInPasien/checkIn.vue
+404 -217
View File
@@ -15,10 +15,10 @@
<!-- Main Content Grid - Same pattern as AdminLoket.vue -->
<v-row class="content-grid" dense>
<!-- Left Column: QR Scan Card -->
<v-col cols="12" md="6" lg="5" class="sticky-column">
<div class="sticky-wrapper">
<v-card class="qr-scan-card" elevation="0">
<v-card-text class="pa-4">
<v-col cols="12" md="6" lg="5" class="sticky-column d-flex">
<div class="sticky-wrapper" style="width: 100%;">
<v-card class="qr-scan-card" elevation="0" style="height: 100%;">
<v-card-text class="pa-4 d-flex flex-column" style="height: 100%;">
<!-- Status Header -->
<div class="status-header mb-3">
<div class="status-icon-wrapper">
@@ -50,7 +50,8 @@
v-else-if="!hasCamera && !isScanning"
type="warning"
variant="tonal"
class="mb-4"
class="mb-3 compact-alert"
density="compact"
>
<template v-slot:prepend>
<v-icon>mdi-camera-off</v-icon>
@@ -210,9 +211,9 @@
</v-col>
<!-- Right Column: Manual Input Card -->
<v-col cols="12" md="6" lg="5" class="manual-input-column">
<v-card class="manual-input-card" elevation="0">
<v-card-text class="pa-4">
<v-col cols="12" md="6" lg="4" class="manual-input-column d-flex">
<v-card class="manual-input-card" elevation="0" style="height: 100%; width: 100%;">
<v-card-text class="pa-4 d-flex flex-column" style="height: 100%;">
<!-- Status Header -->
<div class="status-header mb-3">
<div class="status-icon-wrapper">
@@ -395,74 +396,62 @@
</v-card-text>
</v-card>
</v-col>
</v-row>
<!-- Enhanced Stats Sidebar - Right Side -->
<v-col cols="12" lg="auto" class="stats-sidebar-right" style="order: 3; flex-shrink: 0;">
<div class="sticky-wrapper">
<div class="stats-sidebar-enhanced">
<!-- Sidebar Header -->
<div class="sidebar-header">
<v-icon :color="primaryColor" size="14" class="mr-1">mdi-chart-box-outline</v-icon>
<span class="sidebar-title">Statistik</span>
<!-- Stats Footer (Horizontal) - Permanent Footer for All Screens -->
<v-row class="stats-footer-row" dense>
<v-col cols="12">
<div class="stats-footer-horizontal">
<div class="stat-item-footer-enhanced stat-item-footer-primary" :title="`Total Check-in Hari Ini: ${todayStats.total}`">
<div class="stat-icon-footer-enhanced">
<v-icon :color="primaryColor" size="18">mdi-calendar-today</v-icon>
</div>
<!-- Stats Items -->
<div class="stats-container">
<div class="stat-item-enhanced stat-item-primary" :title="`Total Check-in Hari Ini: ${todayStats.total}`">
<div class="stat-icon-enhanced">
<v-icon :color="primaryColor" size="18">mdi-calendar-today</v-icon>
</div>
<div class="stat-content-enhanced">
<div class="stat-value-enhanced">{{ todayStats.total }}</div>
<div class="stat-label-enhanced">Hari Ini</div>
</div>
</div>
<div class="stat-item-enhanced stat-item-success" :title="`Check-in Berhasil: ${todayStats.success}`">
<div class="stat-icon-enhanced">
<v-icon color="success" size="18">mdi-check-circle</v-icon>
</div>
<div class="stat-content-enhanced">
<div class="stat-value-enhanced">{{ todayStats.success }}</div>
<div class="stat-label-enhanced">Berhasil</div>
</div>
</div>
<div class="stat-item-enhanced stat-item-error" :title="`Check-in Gagal: ${todayStats.failed}`">
<div class="stat-icon-enhanced">
<v-icon color="error" size="18">mdi-close-circle</v-icon>
</div>
<div class="stat-content-enhanced">
<div class="stat-value-enhanced">{{ todayStats.failed }}</div>
<div class="stat-label-enhanced">Gagal</div>
</div>
</div>
<div class="stat-item-enhanced stat-item-info" :title="`Check-in via QR: ${todayStats.qr}`">
<div class="stat-icon-enhanced">
<v-icon color="info" size="18">mdi-qrcode-scan</v-icon>
</div>
<div class="stat-content-enhanced">
<div class="stat-value-enhanced">{{ todayStats.qr }}</div>
<div class="stat-label-enhanced">QR Scan</div>
</div>
</div>
<div class="stat-item-enhanced stat-item-warning" :title="`Check-in Manual: ${todayStats.manual}`">
<div class="stat-icon-enhanced">
<v-icon color="warning" size="18">mdi-keyboard</v-icon>
</div>
<div class="stat-content-enhanced">
<div class="stat-value-enhanced">{{ todayStats.manual }}</div>
<div class="stat-label-enhanced">Manual</div>
</div>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.total }}</div>
<div class="stat-label-footer-enhanced">Hari Ini</div>
</div>
</div>
<div class="stat-item-footer-enhanced stat-item-footer-success" :title="`Check-in Berhasil: ${todayStats.success}`">
<div class="stat-icon-footer-enhanced">
<v-icon color="success" size="18">mdi-check-circle</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.success }}</div>
<div class="stat-label-footer-enhanced">Berhasil</div>
</div>
</div>
<div class="stat-item-footer-enhanced stat-item-footer-error" :title="`Check-in Gagal: ${todayStats.failed}`">
<div class="stat-icon-footer-enhanced">
<v-icon color="error" size="18">mdi-close-circle</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.failed }}</div>
<div class="stat-label-footer-enhanced">Gagal</div>
</div>
</div>
<div class="stat-item-footer-enhanced stat-item-footer-info" :title="`Check-in via QR: ${todayStats.qr}`">
<div class="stat-icon-footer-enhanced">
<v-icon color="info" size="18">mdi-qrcode-scan</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.qr }}</div>
<div class="stat-label-footer-enhanced">QR Scan</div>
</div>
</div>
<div class="stat-item-footer-enhanced stat-item-footer-warning" :title="`Check-in Manual: ${todayStats.manual}`">
<div class="stat-icon-footer-enhanced">
<v-icon color="warning" size="18">mdi-keyboard</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.manual }}</div>
<div class="stat-label-footer-enhanced">Manual</div>
</div>
</div>
</div>
</v-col>
</v-row>
<!-- Generate QR Dialog -->
<v-dialog v-model="showGenerateQRDialog" max-width="600px" scrollable>
<v-card>
@@ -675,54 +664,7 @@
</v-card>
</v-dialog>
<!-- Stats Footer (Horizontal) - For Small Screens - Match Sidebar Design -->
<div class="stats-footer-horizontal mt-3">
<div class="stat-item-footer-enhanced stat-item-footer-primary" :title="`Total Check-in Hari Ini: ${todayStats.total}`">
<div class="stat-icon-footer-enhanced">
<v-icon :color="primaryColor" size="18">mdi-calendar-today</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.total }}</div>
<div class="stat-label-footer-enhanced">Hari Ini</div>
</div>
</div>
<div class="stat-item-footer-enhanced stat-item-footer-success" :title="`Check-in Berhasil: ${todayStats.success}`">
<div class="stat-icon-footer-enhanced">
<v-icon color="success" size="18">mdi-check-circle</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.success }}</div>
<div class="stat-label-footer-enhanced">Berhasil</div>
</div>
</div>
<div class="stat-item-footer-enhanced stat-item-footer-error" :title="`Check-in Gagal: ${todayStats.failed}`">
<div class="stat-icon-footer-enhanced">
<v-icon color="error" size="18">mdi-close-circle</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.failed }}</div>
<div class="stat-label-footer-enhanced">Gagal</div>
</div>
</div>
<div class="stat-item-footer-enhanced stat-item-footer-info" :title="`Check-in via QR: ${todayStats.qr}`">
<div class="stat-icon-footer-enhanced">
<v-icon color="info" size="18">mdi-qrcode-scan</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.qr }}</div>
<div class="stat-label-footer-enhanced">QR Scan</div>
</div>
</div>
<div class="stat-item-footer-enhanced stat-item-footer-warning" :title="`Check-in Manual: ${todayStats.manual}`">
<div class="stat-icon-footer-enhanced">
<v-icon color="warning" size="18">mdi-keyboard</v-icon>
</div>
<div class="stat-content-footer-enhanced">
<div class="stat-value-footer-enhanced">{{ todayStats.manual }}</div>
<div class="stat-label-footer-enhanced">Manual</div>
</div>
</div>
</div>
<!-- Enhanced Dialog with Blur -->
<v-dialog
@@ -3645,18 +3587,22 @@ onUnmounted(() => {
.checkin-page-container {
background: $neutral-100;
min-height: 100vh;
padding: 0 8px 16px 8px;
max-height: 100vh;
padding: 0 4px 0 4px;
width: 100%;
max-width: 100vw;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Header Full Width - No padding from edges */
.checkin-page-container :deep(.page-header) {
margin-left: -8px;
margin-right: -8px;
margin-left: -4px;
margin-right: -4px;
border-radius: 0 !important;
width: calc(100% + 16px);
width: calc(100% + 8px);
}
.checkin-page-container::before {
@@ -4098,16 +4044,19 @@ onUnmounted(() => {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 16px;
padding: 20px 24px;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba($primary-50, 0.8) 0%, rgba($primary-100, 0.6) 100%);
border-radius: 16px;
border-radius: 12px;
border: 1px solid rgba($primary-600, 0.12);
box-shadow: 0 4px 12px rgba($primary-600, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
text-align: left;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
min-height: 72px;
max-height: 72px;
flex-shrink: 0;
}
.status-header::before {
@@ -4127,9 +4076,13 @@ onUnmounted(() => {
}
.status-icon-wrapper {
width: 48px;
height: 48px;
border-radius: 12px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
max-width: 40px;
max-height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
display: flex;
align-items: center;
@@ -4162,12 +4115,12 @@ onUnmounted(() => {
}
.status-title {
font-size: 16px;
font-weight: 700;
color: $neutral-900;
margin: 0 0 4px;
letter-spacing: -0.2px;
line-height: 1.3;
font-size: 15px !important;
font-weight: 700 !important;
color: $neutral-900 !important;
margin: 0 0 2px !important;
letter-spacing: -0.2px !important;
line-height: 1.3 !important;
}
.status-subtitle {
@@ -4183,8 +4136,8 @@ onUnmounted(() => {
display: flex;
justify-content: center;
align-items: center;
margin: 32px 0;
padding: 8px;
margin: 24px 0;
padding: 6px;
}
.qr-placeholder {
@@ -4432,9 +4385,9 @@ onUnmounted(() => {
font-weight: 600;
text-transform: none;
letter-spacing: 0.5px;
border-radius: 14px !important;
padding: 16px 32px !important;
min-height: 56px !important;
border-radius: 12px !important;
padding: 14px 28px !important;
min-height: 50px !important;
min-width: 44px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba($primary-600, 0.35), 0 2px 8px rgba($primary-600, 0.2) !important;
@@ -4486,9 +4439,9 @@ onUnmounted(() => {
font-weight: 600;
text-transform: none;
letter-spacing: 0.5px;
border-radius: 14px !important;
padding: 16px 32px !important;
min-height: 56px !important;
border-radius: 12px !important;
padding: 14px 28px !important;
min-height: 50px !important;
min-width: 44px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba($danger-500, 0.35), 0 2px 8px rgba($danger-500, 0.2) !important;
@@ -4828,10 +4781,11 @@ onUnmounted(() => {
/* Content Grid - Same pattern as AdminLoket.vue */
.content-grid {
margin: 0 20px;
}
.content-grid {
margin: 0 8px;
flex: 1;
min-height: 0;
overflow: visible;
align-items: stretch;
flex-wrap: nowrap !important;
}
@@ -4842,15 +4796,15 @@ onUnmounted(() => {
}
.content-grid > .v-col {
padding: 8px;
padding: 6px;
}
.content-grid > .v-col:first-child {
padding-left: 8px;
padding-left: 6px;
}
.content-grid > .v-col:last-child {
padding-right: 8px;
padding-right: 6px;
}
/* Ensure proper column order */
@@ -4882,8 +4836,10 @@ onUnmounted(() => {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba($primary-300, 0.2);
border-radius: 16px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
height: 100%;
}
@@ -4893,28 +4849,37 @@ onUnmounted(() => {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba($primary-300, 0.2);
border-radius: 16px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
min-height: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
/* Removed main-content-col - now using content-grid pattern */
/* Column classes for equal height */
.sticky-column,
.manual-input-column {
display: flex;
flex-direction: column;
}
.sticky-wrapper {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
}
/* Hide right sidebar on all screens */
.stats-sidebar-right {
padding-left: 12px;
padding-right: 12px;
min-width: 160px;
max-width: 180px;
width: auto;
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-shrink: 0 !important;
flex-grow: 0 !important;
position: relative;
height: auto;
display: none !important;
}
/* Content Grid */
.content-grid {
flex: 1;
min-height: 0;
overflow: visible;
order: 3 !important;
}
:deep(.stats-sidebar-right) {
@@ -4926,20 +4891,22 @@ onUnmounted(() => {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: flex-start;
justify-content: center;
align-items: flex-end;
justify-content: flex-end;
flex-shrink: 0 !important;
flex-grow: 0 !important;
width: auto !important;
max-width: 180px !important;
min-width: 160px !important;
max-width: 160px !important;
min-width: 140px !important;
z-index: 10;
margin-left: auto;
}
.stats-sidebar-enhanced {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
margin-left: auto;
}
}
@@ -4966,26 +4933,123 @@ onUnmounted(() => {
.sticky-wrapper {
top: 20px;
}
}
/* Compact Alert for Camera Warning */
.compact-alert {
padding: 4px 8px !important;
font-size: 10px !important;
min-height: 48px !important;
max-height: 48px !important;
border-radius: 8px !important;
.checkin-page-container {
padding-right: 0;
:deep(.v-alert__prepend) {
margin-right: 4px !important;
}
.checkin-page-container :deep(.page-header) {
margin-right: 0;
width: calc(100% + 8px);
:deep(.v-icon) {
font-size: 16px !important;
}
:deep(p) {
font-size: 9px !important;
line-height: 1.2 !important;
margin-bottom: 0 !important;
}
:deep(.font-weight-bold) {
font-size: 11px !important;
margin-bottom: 2px !important;
}
:deep(.text-body-2) {
font-size: 9px !important;
}
:deep(.v-alert__content) {
padding: 0 !important;
}
}
@media (max-width: 960px) {
.checkin-page-container {
padding: 0 12px 12px 12px;
padding: 0 8px 8px 8px;
max-height: none !important;
overflow-y: auto !important;
}
.checkin-page-container :deep(.page-header) {
margin-left: -12px;
margin-right: -12px;
width: calc(100% + 24px);
margin-left: -8px;
margin-right: -8px;
width: calc(100% + 16px);
}
.content-grid {
flex-direction: column !important;
margin: 0 4px !important;
}
.sticky-column,
.manual-input-column {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 8px;
}
.qr-scan-card,
.manual-input-card {
max-height: 40vh !important;
overflow-y: auto !important;
padding: 12px;
}
/* Alert box mobile styles */
:deep(.v-alert) {
font-size: 12px !important;
padding: 10px 12px !important;
}
:deep(.v-alert .v-alert__prepend) {
margin-right: 8px !important;
}
:deep(.v-alert .v-icon) {
font-size: 20px !important;
}
:deep(.v-alert p) {
font-size: 11px !important;
line-height: 1.4 !important;
}
:deep(.v-alert .font-weight-bold) {
font-size: 13px !important;
}
/* QR Scanner mobile */
.qr-scanner-container {
margin: 12px 0;
}
.qr-placeholder {
max-width: 280px !important;
min-height: 180px !important;
}
/* Buttons mobile */
:deep(.v-btn) {
font-size: 13px !important;
min-height: 44px !important;
}
/* Input fields mobile */
:deep(.v-text-field) {
font-size: 14px !important;
}
:deep(.v-text-field .v-field__input) {
min-height: 44px !important;
padding: 8px 12px !important;
}
.sticky-wrapper {
@@ -4993,6 +5057,30 @@ onUnmounted(() => {
top: 0;
max-height: none;
}
.stats-footer-horizontal {
flex-wrap: wrap !important;
gap: 6px;
padding: 8px;
}
.stat-item-footer-enhanced {
min-width: calc(50% - 6px);
flex: 1 1 calc(50% - 6px);
padding: 8px 6px;
}
.stat-value-footer-enhanced {
font-size: 13px;
}
.stat-label-footer-enhanced {
font-size: 9px;
}
.stat-icon-footer-enhanced .v-icon {
font-size: 18px !important;
}
}
/* Enhanced Sidebar Design */
@@ -6121,13 +6209,20 @@ onUnmounted(() => {
}
}
/* Desktop - Large screens */
@media (min-width: 1264px) {
.content-grid {
align-items: flex-start;
justify-content: flex-start;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap !important;
}
.qr-scan-card,
.manual-input-card {
max-height: calc(100vh - 240px) !important;
overflow-y: auto;
}
.stats-sidebar-right {
margin-top: 0;
padding-top: 0;
@@ -6143,16 +6238,120 @@ onUnmounted(() => {
.sticky-column {
order: 1 !important;
flex-shrink: 0;
flex-basis: auto;
}
.content-grid > .v-col:nth-child(2) {
order: 2 !important;
flex-shrink: 0;
flex-basis: auto;
}
.stats-sidebar-enhanced,
.stats-sidebar-discord {
margin: 0 auto;
margin: 0;
}
}
/* Tablet - Medium screens (961px to 1263px) */
@media (min-width: 961px) and (max-width: 1263px) {
.qr-scan-card,
.manual-input-card {
max-height: calc(100vh - 220px) !important;
overflow-y: auto;
}
.content-grid {
align-items: stretch;
}
}
/* Small tablets and large phones (721px to 960px) */
@media (min-width: 721px) and (max-width: 960px) {
.qr-scan-card,
.manual-input-card {
max-height: calc(50vh - 100px) !important;
overflow-y: auto;
}
}
/* Very small screens (up to 720px) */
@media (max-width: 720px) {
.qr-scan-card,
.manual-input-card {
max-height: calc(45vh - 70px) !important;
overflow-y: auto;
}
.stats-footer-horizontal {
padding: 6px 8px;
gap: 4px;
}
}
/* Extra small screens (phones in portrait, up to 480px) */
@media (max-width: 480px) {
.checkin-page-container {
padding: 0 4px 4px 4px !important;
}
.content-grid {
margin: 0 2px !important;
}
.qr-scan-card,
.manual-input-card {
max-height: 38vh !important;
border-radius: 8px;
padding: 8px;
}
/* Alert box extra small */
:deep(.v-alert) {
font-size: 11px !important;
padding: 8px 10px !important;
border-radius: 8px !important;
}
:deep(.v-alert .v-alert__prepend) {
margin-right: 6px !important;
}
:deep(.v-alert .v-icon) {
font-size: 18px !important;
}
:deep(.v-alert p) {
font-size: 10px !important;
}
:deep(.v-alert .font-weight-bold) {
font-size: 12px !important;
}
.stats-footer-horizontal {
padding: 4px 6px;
gap: 3px;
border-radius: 8px;
max-width: calc(100vw - 12px) !important;
}
.stat-item-footer-enhanced {
min-width: calc(50% - 3px);
flex: 1 1 calc(50% - 3px);
padding: 6px 4px;
}
.stat-value-footer-enhanced {
font-size: 11px;
}
.stat-label-footer-enhanced {
font-size: 8px;
}
.stat-icon-footer-enhanced .v-icon {
font-size: 14px !important;
}
}
@@ -6174,18 +6373,32 @@ onUnmounted(() => {
}
}
/* Stats Footer Horizontal - For Small Screens - Match Sidebar Design */
.stats-footer-horizontal {
/* Stats Footer Horizontal - Permanent Footer for All Screens */
.stats-footer-row {
margin-top: 4px !important;
margin-bottom: 4px !important;
flex-shrink: 0;
display: flex;
justify-content: center;
}
.stats-footer-horizontal {
display: flex !important;
width: 100%;
max-width: calc(100vw - 32px);
gap: 5px;
padding: 8px;
padding: 6px 8px;
background: linear-gradient(180deg, rgba($primary-50, 0.98) 0%, rgba($primary-100, 0.92) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid rgba($primary-300, 0.2);
justify-content: center;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
margin: 0 auto;
}
.stat-item-footer-enhanced {
@@ -6197,11 +6410,11 @@ onUnmounted(() => {
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding: 6px 4px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba($primary-300, 0.25);
overflow: hidden;
padding: 5px 4px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.6);
min-width: 65px;
gap: 2px;
}
.stat-item-footer-enhanced:hover {
@@ -6222,7 +6435,7 @@ onUnmounted(() => {
}
.stat-value-footer-enhanced {
font-size: 14px;
font-size: 13px;
font-weight: 700;
color: $primary-700;
line-height: 1.2;
@@ -6304,34 +6517,8 @@ onUnmounted(() => {
border-color: rgba($secondary-500, 0.5);
}
@media (max-width: 960px) {
.stats-footer-horizontal {
gap: 4px;
padding: 6px;
}
.stat-item-footer-enhanced {
padding: 5px 3px;
}
.stat-value-footer-enhanced {
font-size: 12px;
}
.stat-label-footer-enhanced {
font-size: 6px;
}
.stat-icon-footer-enhanced .v-icon {
font-size: 16px !important;
}
}
@media (min-width: 1264px) {
.stats-footer-horizontal {
display: none !important;
}
}
/* Mobile Landscape */
@media (max-width: 900px) and (orientation: landscape) {