added driverjs onboarding
This commit is contained in:
245
src/App.css
245
src/App.css
@@ -932,6 +932,30 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* See Tutorial */
|
||||
.settings-tutorial-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 1.125rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary, #22c55e);
|
||||
background: var(--color-surface, #fff);
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
font-family: "Sniglet", system-ui;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.settings-tutorial-btn:hover {
|
||||
background: var(--color-accent-light, #dcfce7);
|
||||
}
|
||||
|
||||
/* Clear Data */
|
||||
.settings-clear-btn {
|
||||
width: 100%;
|
||||
@@ -1655,6 +1679,15 @@
|
||||
}
|
||||
|
||||
/* -- Settings buttons -- */
|
||||
[data-theme="dark"] .settings-tutorial-btn {
|
||||
background: #1a1a1a;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .settings-tutorial-btn:hover {
|
||||
background: rgba(74, 222, 128, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .settings-clear-btn {
|
||||
background: #1a1a1a;
|
||||
color: #f87171;
|
||||
@@ -1872,3 +1905,215 @@
|
||||
border-color: rgba(74, 222, 128, 0.3);
|
||||
box-shadow: 0 1px 8px rgba(74, 222, 128, 0.1);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
WELCOME MODAL
|
||||
============================ */
|
||||
.welcome-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1.5rem;
|
||||
animation: welcome-fade-in 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes welcome-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes welcome-slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(24px) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-modal {
|
||||
background: var(--color-surface, #ffffff);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem 2rem 2rem;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
||||
animation: welcome-slide-up 0.35s ease;
|
||||
}
|
||||
|
||||
.welcome-modal-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0 auto 1.25rem;
|
||||
background: var(--color-accent-light, #dcfce7);
|
||||
border-radius: 50%;
|
||||
color: var(--color-primary, #22c55e);
|
||||
}
|
||||
|
||||
.welcome-modal-title {
|
||||
font-family: "Sniglet", system-ui;
|
||||
font-size: 1.375rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text, #1a1a1a);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.welcome-modal-text {
|
||||
font-family: "Sniglet", system-ui;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text-muted, #6b7280);
|
||||
margin: 0 0 1.75rem;
|
||||
}
|
||||
|
||||
.welcome-modal-btn {
|
||||
font-family: "Sniglet", system-ui;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: var(--color-primary, #22c55e);
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
padding: 0.875rem 2rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s,
|
||||
transform 0.15s;
|
||||
}
|
||||
|
||||
.welcome-modal-btn:hover {
|
||||
background: #16a34a;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.welcome-modal-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.welcome-modal-skip {
|
||||
font-family: "Sniglet", system-ui;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-muted, #6b7280);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.welcome-modal-skip:hover {
|
||||
color: var(--color-text, #1a1a1a);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
DRIVER.JS TOUR CUSTOMIZATION
|
||||
============================ */
|
||||
.gj-tour-popover {
|
||||
font-family: "Sniglet", system-ui !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.gj-tour-popover .driver-popover-title {
|
||||
font-family: "Sniglet", system-ui !important;
|
||||
font-size: 1.05rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--color-text, #1a1a1a) !important;
|
||||
}
|
||||
|
||||
.gj-tour-popover .driver-popover-description {
|
||||
font-family: "Sniglet", system-ui !important;
|
||||
font-size: 0.85rem !important;
|
||||
line-height: 1.55 !important;
|
||||
color: var(--color-text-muted, #6b7280) !important;
|
||||
}
|
||||
|
||||
.gj-tour-popover .driver-popover-progress-text {
|
||||
font-family: "Sniglet", system-ui !important;
|
||||
font-size: 0.75rem !important;
|
||||
color: var(--color-text-muted, #6b7280) !important;
|
||||
}
|
||||
|
||||
.gj-tour-popover .driver-popover-navigation-btns button {
|
||||
font-family: "Sniglet", system-ui !important;
|
||||
border-radius: 10px !important;
|
||||
font-size: 0.825rem !important;
|
||||
padding: 0.4rem 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.gj-tour-popover .driver-popover-next-btn {
|
||||
background: var(--color-primary, #22c55e) !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.gj-tour-popover .driver-popover-prev-btn {
|
||||
color: var(--color-text-muted, #6b7280) !important;
|
||||
border: 1px solid var(--color-border, #d4e8d4) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.gj-tour-popover .driver-popover-close-btn {
|
||||
color: var(--color-text-muted, #6b7280) !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.gj-tour-popover .driver-popover-close-btn:focus,
|
||||
.gj-tour-popover .driver-popover-close-btn:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* -- Dark theme: welcome modal -- */
|
||||
[data-theme="dark"] .welcome-modal {
|
||||
background: #1a1a1a;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* -- Dark theme: driver.js -- */
|
||||
[data-theme="dark"] .gj-tour-popover {
|
||||
background: #1a1a1a !important;
|
||||
border: 1px solid rgba(74, 222, 128, 0.12) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .gj-tour-popover .driver-popover-title {
|
||||
color: #e8f5e8 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .gj-tour-popover .driver-popover-description {
|
||||
color: #7a8a7a !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .gj-tour-popover .driver-popover-prev-btn {
|
||||
border-color: rgba(74, 222, 128, 0.15) !important;
|
||||
color: #7a8a7a !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .gj-tour-popover .driver-popover-close-btn {
|
||||
color: #7a8a7a !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user