This commit is contained in:
@@ -2,42 +2,42 @@
|
||||
Tokens
|
||||
============================================================ */
|
||||
:root {
|
||||
--topbar-h: 60px;
|
||||
--sidebar-w: 260px;
|
||||
--bg: #09090b;
|
||||
--surface: #111115;
|
||||
--surface-2: #1c1c22;
|
||||
--border: rgba(255, 255, 255, 0.07);
|
||||
--primary: #8b5cf6;
|
||||
--primary-soft: rgba(139, 92, 246, 0.12);
|
||||
--primary-glow: rgba(139, 92, 246, 0.25);
|
||||
--cyan: #22d3ee;
|
||||
--cyan-soft: rgba(34, 211, 238, 0.1);
|
||||
--red: #ef4444;
|
||||
--text: #f4f4f5;
|
||||
--text-muted: #71717a;
|
||||
--radius: 10px;
|
||||
--transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--topbar-h: 60px;
|
||||
--sidebar-w: 260px;
|
||||
--bg: #09090b;
|
||||
--surface: #111115;
|
||||
--surface-2: #1c1c22;
|
||||
--border: rgba(255, 255, 255, 0.07);
|
||||
--primary: #8b5cf6;
|
||||
--primary-soft: rgba(139, 92, 246, 0.12);
|
||||
--primary-glow: rgba(139, 92, 246, 0.25);
|
||||
--cyan: #22d3ee;
|
||||
--cyan-soft: rgba(34, 211, 238, 0.1);
|
||||
--red: #ef4444;
|
||||
--text: #f4f4f5;
|
||||
--text-muted: #71717a;
|
||||
--radius: 10px;
|
||||
--transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--title-gradient-from: #a78bfa;
|
||||
--title-gradient-to: #22d3ee;
|
||||
--title-gradient-to: #22d3ee;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Light theme overrides
|
||||
============================================================ */
|
||||
[data-theme="light"] {
|
||||
--bg: #f4f4f8;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #ebebf2;
|
||||
--border: rgba(0, 0, 0, 0.08);
|
||||
--primary: #7c3aed;
|
||||
--bg: #f4f4f8;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #ebebf2;
|
||||
--border: rgba(0, 0, 0, 0.08);
|
||||
--primary: #7c3aed;
|
||||
--primary-soft: rgba(124, 58, 237, 0.08);
|
||||
--primary-glow: rgba(124, 58, 237, 0.18);
|
||||
--cyan: #0891b2;
|
||||
--cyan-soft: rgba(8, 145, 178, 0.1);
|
||||
--red: #dc2626;
|
||||
--text: #18181b;
|
||||
--text-muted: #52525b;
|
||||
--cyan: #0891b2;
|
||||
--cyan-soft: rgba(8, 145, 178, 0.1);
|
||||
--red: #dc2626;
|
||||
--text: #18181b;
|
||||
--text-muted: #52525b;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -48,12 +48,11 @@
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Body offset
|
||||
============================================================ */
|
||||
:root {
|
||||
--bottomnav-h: 66px;
|
||||
--bottomnav-h: 66px;
|
||||
--bottomnav-offset: 15px;
|
||||
}
|
||||
|
||||
@@ -113,7 +112,11 @@ body {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
background: linear-gradient(135deg, var(--title-gradient-from), var(--title-gradient-to));
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--title-gradient-from),
|
||||
var(--title-gradient-to)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@@ -223,13 +226,21 @@ body {
|
||||
padding: 6px;
|
||||
gap: 2px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
box-shadow:
|
||||
0 8px 40px rgba(0, 0, 0, 0.45),
|
||||
0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="light"] .bottom-nav {
|
||||
background: color-mix(in srgb, var(--primary) 14%, rgba(245, 242, 255, 0.94));
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--primary) 14%,
|
||||
rgba(245, 242, 255, 0.94)
|
||||
);
|
||||
border-color: rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
box-shadow:
|
||||
0 8px 40px rgba(0, 0, 0, 0.12),
|
||||
0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* ── Tabs ── */
|
||||
@@ -321,8 +332,12 @@ body {
|
||||
|
||||
/* Hide labels on very narrow screens */
|
||||
@media (max-width: 380px) {
|
||||
.bottom-tab-label { display: none; }
|
||||
.bottom-tab { padding: 10px 4px; }
|
||||
.bottom-tab-label {
|
||||
display: none;
|
||||
}
|
||||
.bottom-tab {
|
||||
padding: 10px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Logout button — couleur rouge subtile */
|
||||
@@ -364,8 +379,12 @@ body {
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.notif-modal-header {
|
||||
@@ -410,8 +429,13 @@ body {
|
||||
scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
|
||||
.notif-modal-body::-webkit-scrollbar { width: 4px; }
|
||||
.notif-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
||||
.notif-modal-body::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.notif-modal-body::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.notif-empty {
|
||||
display: flex;
|
||||
@@ -425,7 +449,9 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.notif-empty p { margin: 0; }
|
||||
.notif-empty p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notif-item {
|
||||
display: flex;
|
||||
@@ -437,7 +463,9 @@ body {
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.notif-item:last-child { border-bottom: none; }
|
||||
.notif-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.notif-unread {
|
||||
background: var(--primary-soft);
|
||||
@@ -459,11 +487,34 @@ body {
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Safe-area utilitaire — à appliquer au conteneur scrollable
|
||||
d'une page (ou directement à son bouton d'action principal)
|
||||
pour garantir qu'aucun contenu ne se cache sous la bottom-nav
|
||||
flottante (ex: bouton "Commander" du panier, "Valider" d'un
|
||||
formulaire, etc.). Hauteur de la pilule + son offset + une
|
||||
marge de confort.
|
||||
============================================================ */
|
||||
.page-bottomnav-safe-area {
|
||||
padding-bottom: calc(
|
||||
var(--bottomnav-h) + var(--bottomnav-offset) + 16px
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive — touch devices
|
||||
============================================================ */
|
||||
@media (hover: none) {
|
||||
.bottom-tab:hover { background: transparent; color: rgba(255, 255, 255, 0.45); }
|
||||
.bottom-tab.active:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
|
||||
.topbar-icon-btn:hover { background: transparent; border-color: transparent; }
|
||||
.bottom-tab:hover {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
.bottom-tab.active:hover {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
}
|
||||
.topbar-icon-btn:hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user