bruno
efa3d57e93
- Sidebar mobile: display:block du breakpoint ≤768px cassait flex:1 de .sidebar-scroll → molette/touch incapables de scroller le drawer. Flex restauré. Gate: wheel scroll scrollTop > 0. - Settings mobile: nav horizontale remplacée par une side-navigation gauche drawer (hamburger .settings-menu-btn + backdrop, fermeture auto au choix). Squelette panneau extrait vers static/css/settings.css (partagé). - /help refaite au complet: template help.html (13 sections couvrant toute l'app — éditeur, databases/vues, tâches, workspaces, collab, agent IA, API v2, PWA, SSO, raccourcis, tips) avec le même panneau 2 colonnes + drawer mobile; route réduite à un render; help.js (Alpine.data helpInit). E2E mobile_regression 6/6 + smoke 2/2 · pytest app+pwa 230/230
35 lines
3.0 KiB
CSS
35 lines
3.0 KiB
CSS
/* ═══ Panel skeleton shared by /settings and /help (Notion-style modal) ═══ */
|
|
.settings-overlay{position:fixed;inset:0;z-index:500;display:flex;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);}
|
|
.settings-panel{display:flex;width:1050px;max-width:98vw;height:85vh;margin:auto;background:var(--bg-primary);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow-modal);overflow:hidden;}
|
|
.settings-nav{width:200px;min-width:200px;background:var(--bg-sidebar);border-right:1px solid var(--border);padding:8px 0;overflow-y:auto;}
|
|
.settings-nav-header{padding:12px 16px;font-size:13px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
|
|
.settings-nav-item{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:background 100ms;border-radius:0;}
|
|
.settings-nav-item:hover{background:var(--bg-hover);}
|
|
.settings-nav-item.active{background:rgba(35,131,226,.12);color:var(--text);font-weight:500;}
|
|
.settings-content{flex:1;overflow-y:auto;padding:24px 32px;}
|
|
.settings-content h2{font-size:18px;font-weight:600;margin-bottom:4px;}
|
|
.settings-content .section-desc{font-size:12px;color:var(--text-dim);margin-bottom:24px;}
|
|
.settings-close{position:absolute;top:12px;right:12px;width:32px;height:32px;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;text-decoration:none;}
|
|
.settings-close:hover{background:var(--bg-hover);color:var(--text);}
|
|
|
|
/* Mobile hamburger for the panel nav — hidden on desktop */
|
|
.settings-menu-btn{display:none;position:absolute;top:8px;left:8px;z-index:20;width:40px;height:40px;border:none;border-radius:8px;background:var(--bg-tertiary);color:var(--text);align-items:center;justify-content:center;cursor:pointer;}
|
|
.settings-nav-backdrop{display:none;}
|
|
|
|
/* ── Mobile: nav becomes a left side-navigation drawer (hamburger opens it) ── */
|
|
@media (max-width:768px){
|
|
.settings-overlay{background:var(--bg-primary);backdrop-filter:none;}
|
|
.settings-panel{flex-direction:column;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:none;border-radius:0;box-shadow:none;}
|
|
.settings-menu-btn{display:flex;}
|
|
.settings-nav{position:fixed;top:0;left:0;bottom:0;width:260px;max-width:80vw;min-width:0;z-index:600;transform:translateX(-100%);transition:transform .2s cubic-bezier(0.4,0,0.2,1);border-right:1px solid var(--border);box-shadow:4px 0 24px rgba(0,0,0,.4);padding-top:8px;}
|
|
.settings-nav.nav-open{transform:translateX(0);}
|
|
.settings-nav-item{padding:10px 16px;}
|
|
.settings-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:599;}
|
|
.settings-content{padding:56px 16px 16px;}
|
|
.settings-close{top:8px;right:8px;width:44px;height:44px;background:var(--bg-tertiary);}
|
|
.setting-row{flex-wrap:wrap;}
|
|
.setting-control{margin-left:0;width:100%;}
|
|
.prov-grid{grid-template-columns:1fr;}
|
|
.avatar-section{gap:10px;}
|
|
}
|