improve mini app UX and analytics
This commit is contained in:
VPN SaaS Dev
@@ -876,3 +876,352 @@ select:disabled {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modern app pass */
|
||||
:root {
|
||||
--bg: #f4f7f5;
|
||||
--text: #121815;
|
||||
--muted: #6f7a75;
|
||||
--line: #dfe7e3;
|
||||
--surface: #ffffff;
|
||||
--soft: #f8fbf9;
|
||||
--accent: #12735f;
|
||||
--accent-2: #2f6f9f;
|
||||
--fuel: #1f987d;
|
||||
--service: #2f6f9f;
|
||||
--warning: #c26b33;
|
||||
--danger: #b8423a;
|
||||
--shadow: 0 16px 42px rgba(27, 38, 34, 0.09);
|
||||
--press-shadow: 0 8px 18px rgba(18, 115, 95, 0.18);
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
linear-gradient(180deg, #ffffff 0, #f4f7f5 250px),
|
||||
var(--bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
button,
|
||||
.car-item,
|
||||
.stat,
|
||||
.action-card,
|
||||
.menu-row {
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: 750;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 24px rgba(18, 115, 95, 0.18);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: var(--press-shadow);
|
||||
}
|
||||
|
||||
button:active,
|
||||
.car-item:active,
|
||||
.stat:active,
|
||||
.action-card:active,
|
||||
.menu-row:active {
|
||||
transform: translateY(1px) scale(0.99);
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
input:disabled,
|
||||
select:disabled {
|
||||
cursor: progress;
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.is-busy {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.45);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 720ms linear infinite;
|
||||
}
|
||||
|
||||
button.is-busy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.shell {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 12;
|
||||
margin: 0 -18px 14px;
|
||||
padding: 12px 18px;
|
||||
background: rgba(244, 247, 245, 0.88);
|
||||
backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid rgba(223, 231, 227, 0.78);
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: clamp(28px, 6vw, 42px);
|
||||
}
|
||||
|
||||
.icon-btn,
|
||||
.ghost-btn,
|
||||
.preset-row button,
|
||||
.menu-row {
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 6px 18px rgba(27, 38, 34, 0.06);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.panel,
|
||||
.workspace,
|
||||
.chart-card,
|
||||
.report-metric,
|
||||
.tip-card {
|
||||
border-color: rgba(208, 220, 214, 0.9);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
min-height: 118px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(18, 115, 95, 0.1), rgba(255, 255, 255, 0) 54%),
|
||||
var(--surface);
|
||||
}
|
||||
|
||||
.summary-card.accent {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(31, 152, 125, 0.14), rgba(255, 255, 255, 0) 58%),
|
||||
var(--surface);
|
||||
}
|
||||
|
||||
.summary-card.blue {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(47, 111, 159, 0.14), rgba(255, 255, 255, 0) 58%),
|
||||
var(--surface);
|
||||
}
|
||||
|
||||
.summary-card::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-strip {
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(18, 115, 95, 0.08), rgba(47, 111, 159, 0.08)),
|
||||
#fff;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
min-height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -4px 0 14px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.report-bar,
|
||||
.entry-form {
|
||||
border-color: rgba(223, 231, 227, 0.86);
|
||||
}
|
||||
|
||||
.period-controls select,
|
||||
.period-controls input,
|
||||
input,
|
||||
select {
|
||||
background: #fbfdfc;
|
||||
}
|
||||
|
||||
.car-item,
|
||||
.action-card,
|
||||
.stat {
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-color: var(--line);
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
background 160ms ease;
|
||||
}
|
||||
|
||||
.car-item:hover,
|
||||
.action-card:hover,
|
||||
.stat:hover {
|
||||
box-shadow: 0 12px 28px rgba(27, 38, 34, 0.08);
|
||||
}
|
||||
|
||||
.car-item.active {
|
||||
border-color: rgba(18, 115, 95, 0.55);
|
||||
background: #eef8f4;
|
||||
box-shadow: 0 12px 26px rgba(18, 115, 95, 0.12);
|
||||
}
|
||||
|
||||
.car-badge {
|
||||
background: linear-gradient(135deg, #d9f0e9, #dceaf5);
|
||||
}
|
||||
|
||||
.action-card.active {
|
||||
background:
|
||||
linear-gradient(135deg, #12735f, #2f6f9f);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 14px 30px rgba(18, 115, 95, 0.22);
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-template-columns: repeat(5, minmax(120px, 1fr));
|
||||
}
|
||||
|
||||
.stat strong {
|
||||
font-size: clamp(18px, 2.4vw, 24px);
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.entry-form {
|
||||
margin-top: 4px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.drawer,
|
||||
.report-sheet {
|
||||
background: rgba(18, 24, 21, 0.42);
|
||||
}
|
||||
|
||||
.drawer-panel,
|
||||
.sheet-panel {
|
||||
border-radius: 18px 18px 0 0;
|
||||
}
|
||||
|
||||
.menu-row {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.file-hint {
|
||||
padding: 8px 10px;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fbfdfc;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
z-index: 40;
|
||||
width: min(420px, calc(100% - 28px));
|
||||
transform: translateX(-50%);
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
background: #12211c;
|
||||
color: #fff;
|
||||
box-shadow: 0 18px 42px rgba(18, 24, 21, 0.22);
|
||||
animation: toastIn 180ms ease both;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: #8f2f29;
|
||||
}
|
||||
|
||||
.toast.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes toastIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.topbar {
|
||||
margin: 0 -12px 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
min-width: 82vw;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.workspace,
|
||||
.chart-card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
top: 61px;
|
||||
margin-inline: -2px;
|
||||
padding: 8px 0;
|
||||
background: rgba(244, 247, 245, 0.92);
|
||||
}
|
||||
|
||||
.action-card {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
min-width: 68vw;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.entry-form {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.drawer-panel,
|
||||
.sheet-panel {
|
||||
max-height: 92vh;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user