/* ========================================================================== Sjobla Dashboard - Design system Sombre, violet/indigo, dans la continuite du dashboard d'aout 2025. ========================================================================== */ :root { --bg-app: #1a1a24; --bg-sidebar: rgba(26, 26, 36, 0.97); --bg-card: #24242f; --bg-card-hover: #2a2a38; --border-soft: rgba(255, 255, 255, 0.08); --text-primary: #f1f1f4; --text-secondary: #9ca3af; --text-muted: #6b7280; --accent: #6366f1; --accent-soft: rgba(99, 102, 241, 0.15); --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6); --discord: #5865F2; --status-ok: #34d399; --status-warn: #fbbf24; --status-off: #6b7280; --status-danger: #f87171; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --sidebar-width: 280px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: radial-gradient(circle at top left, #20202c 0%, #16161e 60%); color: var(--text-primary); min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ---------- Layout général ---------- */ .app-shell { display: flex; min-height: 100vh; } .main-content { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; } @media (max-width: 900px) { .main-content { margin-left: 0; } .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .tray { left: 0; } } /* ---------- Mode d'affichage force (Parametres > Mode d'affichage) ---------- Ignore volontairement la largeur reelle du viewport : ces regles gagnent sur les media queries ci-dessus/ci-dessous grace a une specificite plus forte (selecteur compose avec la classe posee sur ). */ body.force-desktop .main-content { margin-left: var(--sidebar-width) !important; } body.force-desktop .sidebar { transform: translateX(0) !important; } body.force-desktop .menu-toggle { display: none !important; } body.force-desktop .sidebar-close { display: none !important; } body.force-desktop .tile-grid { grid-template-columns: repeat(6, 1fr) !important; } body.force-mobile .main-content { margin-left: 0 !important; } body.force-mobile .sidebar { transform: translateX(-100%) !important; } body.force-mobile .sidebar.open { transform: translateX(0) !important; } body.force-mobile .menu-toggle { display: block !important; } body.force-mobile .sidebar-close { display: block !important; } body.force-mobile .tile-grid { grid-template-columns: repeat(2, 1fr) !important; } /* ---------- Sidebar ---------- */ .sidebar { width: var(--sidebar-width); background: var(--bg-sidebar); backdrop-filter: blur(10px); border-right: 1px solid var(--border-soft); position: fixed; top: 0; left: 0; height: 100vh; display: flex; flex-direction: column; z-index: 1000; transition: transform 0.25s ease; } .sidebar-header { padding: 1.75rem 1.5rem 1.25rem; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; } .sidebar-close { display: none; background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 0.3rem; border-radius: var(--radius-sm); } .sidebar-close:hover { color: var(--text-primary); } .logo { font-size: 1.4rem; font-weight: 800; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0; } .nav-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1.5rem; color: var(--text-secondary); font-size: 0.92rem; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s ease; position: relative; } .nav-item:hover { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text-primary); } .nav-item.active { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text-primary); } .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; } .nav-badge { margin-left: auto; background: var(--status-danger); color: white; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; } .nav-group { margin-bottom: 0.25rem; } .nav-children { display: flex; flex-direction: column; padding-left: 1rem; } .nav-children .nav-item { padding-left: 2.7rem; font-size: 0.85rem; } .nav-children-sub { padding-left: 1rem; } .nav-children-sub .nav-item { padding-left: 3.9rem; font-size: 0.8rem; color: var(--text-muted); } .nav-toggle-icon { margin-left: auto; font-size: 0.7rem; opacity: 0.6; transition: transform 0.15s ease; } .nav-group.open .nav-toggle-icon { transform: rotate(90deg); } .nav-group:not(.open) .nav-children { display: none; } .sidebar-footer { border-top: 1px solid var(--border-soft); padding: 0.75rem 0; } .sidebar-widgets { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 0.6rem; } .widget-mini { display: block; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; font-size: 0.8rem; color: var(--text-secondary); text-decoration: none; cursor: pointer; } .widget-mini:hover { border-color: var(--accent); } .widget-mini strong { display: block; color: var(--text-primary); font-size: 0.85rem; margin-bottom: 0.15rem; } .sidebar-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.5rem; color: var(--text-secondary); } .avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: white; flex-shrink: 0; } .sidebar-user-name { color: var(--text-primary); font-weight: 600; font-size: 0.88rem; } /* ---------- Header ---------- */ .topbar { background: rgba(26, 26, 36, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .topbar-left { display: flex; align-items: center; gap: 1rem; } .menu-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.4rem; cursor: pointer; padding: 0.4rem; border-radius: var(--radius-sm); } @media (max-width: 900px) { .menu-toggle { display: block; } .sidebar-close { display: block; } } .page-title { font-size: 1.35rem; font-weight: 700; } .topbar-right { display: flex; align-items: center; gap: 1.1rem; } .topbar-clock { font-size: 0.85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .topbar-icon-btn { position: relative; background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-secondary); width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; } .topbar-icon-btn:hover { color: var(--text-primary); border-color: var(--accent); } .topbar-logout-form { display: contents; } .topbar-logout-form .topbar-icon-btn { font: inherit; } .topbar-icon-btn .dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--status-danger); border: 2px solid var(--bg-app); } /* ---------- Panneau de notifications ---------- */ .notif-wrap { position: relative; } .notif-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 320px; max-height: 420px; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 60; } .notif-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .notif-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; } .notif-panel-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); } .notif-mark-read { background: none; border: none; color: var(--accent); font-size: 0.72rem; cursor: pointer; font-family: inherit; padding: 0; } .notif-mark-read:hover { text-decoration: underline; } .notif-panel-list { overflow-y: auto; } .notif-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-soft); font-size: 0.82rem; color: var(--text-secondary); } .notif-row:last-child { border-bottom: none; } .notif-row.unread { color: var(--text-primary); background: rgba(99, 102, 241, 0.06); border-left: 2px solid var(--accent); } .notif-item-link { flex: 1; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; } .notif-item-link:hover .notif-item-message { color: var(--accent); } .notif-row > div { flex: 1; min-width: 0; } .notif-delete { flex-shrink: 0; background: none; border: none; color: var(--text-muted); font-size: 0.7rem; padding: 0.2rem 0.35rem; cursor: pointer; font-family: inherit; } .notif-delete:hover { color: var(--status-danger); } .notif-empty { padding: 1.5rem 1rem; text-align: center; font-size: 0.82rem; color: var(--text-muted); } .notif-row.history { padding: 0.9rem 1.25rem; font-size: 0.85rem; } .notif-item-date { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; } .notif-panel-footer { display: block; text-align: center; padding: 0.6rem; font-size: 0.75rem; color: var(--text-muted); border-top: 1px solid var(--border-soft); text-decoration: none; flex-shrink: 0; } .notif-panel-footer:hover { color: var(--accent); } /* ---------- Content ---------- */ .content { padding: 2rem; flex: 1; } .content-narrow { max-width: 720px; } .flash-messages { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .flash-message { padding: 0.65rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; border: 1px solid transparent; animation: flash-fade 4s ease forwards; } .flash-success { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.3); color: var(--status-ok); } .flash-error { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: var(--status-danger); } .flash-warning { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); color: var(--status-warn); } .flash-info { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.3); color: var(--accent); } @keyframes flash-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } .page-intro { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1.5rem; } .page-intro h1 { font-size: 1.6rem; font-weight: 700; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; } .page-intro p { color: var(--text-secondary); line-height: 1.6; } /* ---------- Cards ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .card-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4rem; } .card-value { font-size: 1.1rem; font-weight: 700; } .card-value.status-ok { color: var(--status-ok); } .card-value.status-warn { color: var(--status-warn); } .card-value.status-off { color: var(--status-off); } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.3rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; cursor: pointer; border: none; transition: all 0.15s ease; } .btn-primary { background: var(--accent-gradient); color: white; } .btn-primary:hover { filter: brightness(1.1); } .btn-discord { background: var(--discord); color: white; width: 100%; justify-content: center; } .btn-discord:hover { filter: brightness(1.1); } .btn-ghost { background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-secondary); } .btn-ghost:hover { color: var(--text-primary); border-color: var(--accent); } .btn-block { width: 100%; justify-content: center; } .btn-danger { background: var(--status-danger); color: white; } .btn-danger:hover { filter: brightness(1.1); } .btn-success { background: var(--status-ok); color: #0d1117; } .btn-success:hover { filter: brightness(1.1); } /* ---------- Login ---------- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #232333 0%, #15151d 60%); padding: 1.5rem; } .login-box { width: 100%; max-width: 380px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 2.5rem 2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .login-logo { text-align: center; font-size: 1.8rem; font-weight: 800; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2rem; } .field-group { margin-bottom: 1.1rem; } .field-group label { display: block; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.4rem; } .field-group input { width: 100%; padding: 0.75rem 0.9rem; background: var(--bg-app); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.92rem; transition: border-color 0.15s ease; } .field-group input:focus { outline: none; border-color: var(--accent); } .login-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.4rem 0; color: var(--text-muted); font-size: 0.8rem; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); } .login-error { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--status-danger); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; font-size: 0.85rem; margin-bottom: 1.1rem; } /* ---------- Grille Home ---------- */ .home-toolbar { display: flex; justify-content: space-between; margin-bottom: 1.25rem; } .tile-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; gap: 0.9rem; } @media (max-width: 700px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } } .tile { border-radius: var(--radius-md); border: 1px solid var(--border-soft); padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all 0.18s ease; position: relative; overflow: hidden; } .tile:hover { transform: translateY(-2px); border-color: var(--accent); } .tile-title { font-weight: 700; font-size: 0.95rem; } .tile-subtitle { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.3rem; } .tile-icon { font-size: 1.4rem; opacity: 0.85; } .tile-indigo { background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(99,102,241,0.08)); } .tile-green { background: linear-gradient(135deg, rgba(52,211,153,0.25), rgba(52,211,153,0.08)); } .tile-violet { background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(139,92,246,0.08)); } .tile-amber { background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(251,191,36,0.08)); } .tile-rose { background: linear-gradient(135deg, rgba(244,114,182,0.25), rgba(244,114,182,0.08)); } .tile-slate { background: linear-gradient(135deg, rgba(148,163,184,0.18), rgba(148,163,184,0.06)); } /* tailles de tuiles : w/h en unites de grille */ .tile-w1 { grid-column: span 1; } .tile-w2 { grid-column: span 2; } .tile-w3 { grid-column: span 3; } .tile-w4 { grid-column: span 4; } .tile-w5 { grid-column: span 5; } .tile-w6 { grid-column: span 6; } .tile-h1 { grid-row: span 1; } .tile-h2 { grid-row: span 2; } .tile-h3 { grid-row: span 3; } .tile-h4 { grid-row: span 4; } .tile-h5 { grid-row: span 5; } /* ---------- Mode edition Accueil ---------- */ .home-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; flex-wrap: wrap; } .home-toolbar > .density-control, .home-toolbar > .edit-toggle { margin-left: auto; } /* ---------- Onglets de layout ---------- */ .layout-tabs { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; position: relative; } .layout-tab { display: flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--border-soft); color: var(--text-secondary); font-size: 0.8rem; font-family: inherit; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer; } .layout-tab:hover { color: var(--text-primary); border-color: var(--accent); } .layout-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .layout-tab-actions { display: none; align-items: center; gap: 0.3rem; } .layout-tabs.edit-mode .layout-tab-actions { display: flex; } .layout-tab-action { font-size: 0.7rem; opacity: 0.75; cursor: pointer; } .layout-tab-action:hover { opacity: 1; } .layout-add { display: none; font-size: 0.9rem; padding: 0.4rem 0.6rem; } .layout-tabs.edit-mode .layout-add { display: flex; } .layout-name-editor { display: flex; align-items: center; gap: 0.35rem; } .layout-name-editor input { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.4rem 0.55rem; font-size: 0.8rem; font-family: inherit; width: 10rem; } .layout-name-editor input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .layout-name-editor button { background: var(--accent-gradient); border: none; color: white; border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; font-size: 0.8rem; cursor: pointer; } .layout-name-editor button#layoutNameCancel { background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-secondary); } .layout-name-error { font-size: 0.75rem; color: var(--status-danger); } .layout-tab-action.confirming { color: var(--status-danger); opacity: 1; font-weight: 700; } .density-control { display: flex; align-items: center; gap: 0.5rem; } .density-control label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .density-control select { background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-primary); font-size: 0.82rem; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); font-family: inherit; } .edit-toggle.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .tile-delete { position: absolute; top: -0.5rem; right: -0.5rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--status-danger); color: white; border: 2px solid var(--bg-app); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; cursor: pointer; transform: scale(0); transition: transform 0.15s ease; z-index: 1; } .edit-mode .tile-delete { transform: scale(1); } .tile-badge { position: absolute; top: 0.5rem; right: 0.5rem; min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: rgba(10, 10, 14, 0.55); color: var(--text-primary); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .tile-add { border-style: dashed; background: transparent; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.6rem; display: none; } .edit-mode .tile-add { display: flex; } .tile-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* ---------- Panneau de config (sidebar, au-dessus du menu) ---------- */ .config-panel { flex-shrink: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.28s ease, opacity 0.2s ease, margin 0.28s ease; margin: 0 1rem; } .config-panel.open { max-height: min(640px, 60vh); overflow-y: auto; opacity: 1; margin: 0.75rem 1rem; } .config-inner { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 1rem; } .config-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.85rem; } .config-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0.2rem; } .config-close:hover { color: var(--text-primary); } .config-panel .field { margin-bottom: 0.7rem; } .config-panel .field label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.3rem; } .config-panel .field input, .config-panel .field select { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.45rem 0.55rem; font-size: 0.82rem; font-family: inherit; } .config-panel .field input:focus, .config-panel .field select:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .config-field-row { display: flex; gap: 0.5rem; } .config-field-row .field { flex: 1; } .config-panel .field input[type="checkbox"] { width: auto; } #fieldInternal .checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; text-transform: none; letter-spacing: normal; color: var(--text-secondary); cursor: pointer; } .color-row { display: flex; gap: 0.4rem; margin-top: 0.2rem; } .color-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .color-dot.selected { border-color: var(--text-primary); } /* Wrapper generique pour tout picker de couleur "libre" (custom, hors palette de base) - un crayon superpose indique que c'est l'option editable, quelle que soit la couleur actuellement choisie (mix-blend-mode: difference pour rester lisible sur n'importe quelle teinte). Reutilise sur les 4 endroits qui ont un color-row (note, tag, tuile Accueil, sous-element de dossier). */ .color-picker-wrap { position: relative; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .color-picker-wrap::after { content: '✎'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #fff; mix-blend-mode: difference; pointer-events: none; } .color-picker-wrap input[type="color"] { width: 1.5rem; height: 1.5rem; padding: 0; border: 2px dashed var(--border-soft); border-radius: 50%; background: none; cursor: pointer; overflow: hidden; } .color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .color-picker-wrap input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; } .color-picker-wrap input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; } .config-save { width: 100%; margin-top: 0.3rem; background: var(--accent-gradient); border: none; color: white; font-weight: 600; font-size: 0.85rem; padding: 0.55rem; border-radius: var(--radius-sm); cursor: pointer; } /* ---------- Tiroir catalogue ---------- */ .tray-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 14, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 40; } .tray-backdrop.open { opacity: 1; pointer-events: auto; } .tray { position: fixed; left: var(--sidebar-width); right: 0; bottom: 0; background: var(--bg-card); border-top: 1px solid var(--border-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4); padding: 1.25rem 1.5rem 1.75rem; transform: translateY(100%); transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.05); z-index: 41; } .tray.open { transform: translateY(0); } .tray-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 1rem; text-align: center; } .tray-catalog { display: flex; gap: 0.8rem; overflow-x: auto; padding-bottom: 0.2rem; } .catalog-item { flex-shrink: 0; width: 5.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.4rem; border-radius: var(--radius-md); transition: background 0.15s ease, color 0.15s ease; } .catalog-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .catalog-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .catalog-label { font-size: 0.74rem; font-weight: 600; text-align: center; } @media (prefers-reduced-motion: reduce) { .tray, .tray-backdrop, .config-panel { transition: none; } } /* ---------- Bulle dossier ---------- */ .backdrop { position: fixed; inset: 0; background: rgba(10, 10, 14, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 50; } .backdrop.open { opacity: 1; pointer-events: auto; } .folder-bubble { position: fixed; top: 50%; left: calc(50% + var(--sidebar-width) / 2); transform: translate(-50%, -50%) scale(0.92); width: min(480px, calc(100vw - var(--sidebar-width) - 2rem)); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05), opacity 0.18s ease; z-index: 51; } .folder-bubble.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } .bubble-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; } .bubble-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); } #bubbleList { padding: 1.25rem; overflow-y: auto; } #bubbleForm { padding: 1.25rem; overflow-y: auto; } #bubbleForm .field { margin-bottom: 0.7rem; } #bubbleForm .field label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.3rem; } #bubbleForm .field input[type="text"], #bubbleForm .field input[type="url"] { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.45rem 0.55rem; font-size: 0.82rem; font-family: inherit; } #bubbleForm .field input[type="text"]:focus, #bubbleForm .field input[type="url"]:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.75rem; } .sub-tile { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem; border-radius: var(--radius-md); border: 1px solid var(--border-soft); cursor: pointer; color: var(--text-primary); text-align: left; min-height: 5.5rem; } .sub-tile-icon { font-size: 1.15rem; opacity: 0.85; } .sub-tile-title { font-size: 0.8rem; font-weight: 600; line-height: 1.2; } .sub-tile-delete { position: absolute; top: -0.5rem; right: -0.5rem; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--status-danger); color: white; border: 2px solid var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; cursor: pointer; z-index: 1; } .sub-tile-add { border-style: dashed; background: transparent; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.5rem; display: flex; } .sub-tile-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } @media (max-width: 720px) { .folder-bubble { left: 50%; width: min(480px, calc(100vw - 2rem)); } } @media (prefers-reduced-motion: reduce) { .folder-bubble, .backdrop { transition: none; } } /* ---------- Listes / tables simples ---------- */ .simple-table { width: 100%; border-collapse: collapse; } .simple-table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border-soft); } .simple-table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border-soft); font-size: 0.88rem; } .simple-table tr:last-child td { border-bottom: none; } .badge { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .badge-ok { background: rgba(52, 211, 153, 0.15); color: var(--status-ok); } .badge-warn { background: rgba(251, 191, 36, 0.15); color: var(--status-warn); } .badge-off { background: rgba(107, 114, 128, 0.2); color: var(--status-off); } .badge-admin { background: rgba(99, 102, 241, 0.2); color: var(--accent); } /* ---------- Profil ---------- */ .profile-header { display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-soft); } .avatar-circle.lg { width: 64px; height: 64px; font-size: 1.5rem; } .profile-bio { color: var(--text-secondary); font-size: 0.88rem; margin-top: 0.25rem; } .profile-field-row { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; border-bottom: 1px solid var(--border-soft); } .profile-field-row:last-child { border-bottom: none; } .profile-field-label { font-size: 0.8rem; color: var(--text-muted); } .profile-field-value { font-size: 0.92rem; margin-top: 0.15rem; } /* ---------- Toggle / select simples (parametres) ---------- */ .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--border-soft); } .settings-row:last-child { border-bottom: none; } .settings-row-label { font-weight: 600; font-size: 0.92rem; } .settings-row-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; } .module-request-details summary.settings-row { border-bottom: none; list-style: none; } .module-request-details summary::-webkit-details-marker { display: none; } .module-request-details[open] summary.settings-row { border-bottom: 1px solid var(--border-soft); } .module-request-form { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 0; } .module-request-form .btn { align-self: flex-end; } .text-input { display: block; width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.5rem 0.65rem; font-size: 0.85rem; font-family: inherit; resize: vertical; } .text-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } select.sjobla-select { background: var(--bg-app); border: 1px solid var(--border-soft); color: var(--text-primary); padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); font-size: 0.85rem; } .toggle { position: relative; width: 44px; height: 24px; padding: 0; background: var(--bg-app); border: 1px solid var(--border-soft); border-radius: 999px; cursor: pointer; appearance: none; flex-shrink: 0; } .toggle.on { background: var(--accent); } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform 0.15s ease; } .toggle.on::after { transform: translateX(20px); } /* ---------- Vide / placeholder ---------- */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); } .empty-state-icon { font-size: 2.2rem; margin-bottom: 0.75rem; opacity: 0.6; } .placeholder-note { margin-top: 1.5rem; padding: 0.9rem 1.1rem; background: rgba(99, 102, 241, 0.08); border: 1px dashed rgba(99, 102, 241, 0.35); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--text-secondary); } /* ---------- Notes (Espace perso) — mise en page a la OneNote ---------- */ .notes-layout { display: flex; gap: 0; height: calc(100vh - 8rem); min-height: 420px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; } .notes-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-card); border-right: 1px solid var(--border-soft); } .notes-toolbar { display: flex; gap: 0.5rem; padding: 0.85rem; border-bottom: 1px solid var(--border-soft); } .notes-toolbar .btn { flex: 1; font-size: 0.8rem; padding: 0.5rem; } .notes-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border-soft); } .tags-manage-btn { margin-left: auto; background: none; border: 1px solid var(--border-soft); color: var(--text-muted); font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 999px; cursor: pointer; font-family: inherit; } .tags-manage-btn:hover { color: var(--accent); border-color: var(--accent); } .filter-pill { background: none; border: 1px solid var(--border-soft); color: var(--text-secondary); font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 999px; cursor: pointer; font-family: inherit; } .filter-pill:hover { color: var(--text-primary); border-color: var(--accent); } .filter-pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .notes-list { flex: 1; overflow-y: auto; padding: 0.5rem; } .note-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 0.15rem; } .note-row:hover { background: rgba(255, 255, 255, 0.04); } .note-row.active { background: var(--accent-soft); } .note-row-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; } .note-row-title { flex: 1; font-size: 0.85rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .note-row-pin { font-size: 0.75rem; flex-shrink: 0; } .note-row-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.72rem; padding: 0.2rem 0.35rem; border-radius: var(--radius-sm); flex-shrink: 0; display: none; } .note-row:hover .note-row-delete { display: block; } .note-row-delete:hover { color: var(--status-danger); background: rgba(248, 113, 113, 0.12); } .note-row-delete.confirming { display: block; color: var(--status-danger); } .notes-editor-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-app); } .notes-editor-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.9rem; text-align: center; padding: 2rem; } .notes-editor-content { flex: 1; display: flex; flex-direction: column; padding: 1.25rem 1.5rem; overflow-y: auto; min-height: 0; } .notes-editor-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .notes-editor-title-input { flex: 1; background: none; border: none; color: var(--text-primary); font-size: 1.4rem; font-weight: 700; font-family: inherit; padding: 0.2rem 0; } .notes-editor-title-input:focus { outline: none; border-bottom: 1px solid var(--accent); } .note-delete-current { background: none; border: 1px solid var(--border-soft); color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); flex-shrink: 0; } .note-delete-current:hover, .note-delete-current.confirming { color: var(--status-danger); border-color: var(--status-danger); } .notes-editor-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-soft); } .notes-editor-categorie-input { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.35rem 0.55rem; font-size: 0.8rem; font-family: inherit; width: 10rem; } .notes-editor-categorie-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .notes-editor-meta .checkbox-label { font-size: 0.8rem; text-transform: none; } #noteContentField { flex: 1; display: flex; flex-direction: column; } #noteContentField .EasyMDEContainer { flex: 1; display: flex; flex-direction: column; } #noteContentField .CodeMirror { flex: 1; } /* ---------- EasyMDE en theme sombre, pour matcher le reste du Dashboard ---------- */ /* Par defaut EasyMDE est en theme clair (fond blanc, icones grises peu lisibles) — on reprend les tokens du Dashboard plutot que d'utiliser un theme CodeMirror tiers. */ #noteContentField .CodeMirror { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-soft); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } #noteContentField .CodeMirror-cursor { border-left-color: var(--text-primary); } #noteContentField .CodeMirror-selected { background: var(--accent-soft) !important; } #noteContentField .CodeMirror-placeholder { color: var(--text-muted) !important; } #noteContentField .CodeMirror-gutters { background: var(--bg-card); border-right: none; } #noteContentField .editor-toolbar { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-soft); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; opacity: 1; padding: 0.5rem 0.6rem; } #noteContentField .editor-toolbar button { color: var(--text-secondary); border-radius: var(--radius-sm); } #noteContentField .editor-toolbar button:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); } #noteContentField .editor-toolbar button.active { background: var(--accent-soft); color: var(--accent); } #noteContentField .editor-toolbar i.separator { border-left: 1px solid var(--border-soft); border-right: none; } #noteContentField .editor-toolbar button:not(.disabled):hover, #noteContentField .editor-toolbar button:not(.disabled).active { border-color: transparent; } #noteContentField .editor-preview, #noteContentField .editor-preview-side { background: var(--bg-card); color: var(--text-primary); } #noteContentField .editor-preview pre, #noteContentField .editor-preview-side pre { background: rgba(255, 255, 255, 0.05); } #noteContentField .editor-preview blockquote, #noteContentField .editor-preview-side blockquote { border-left-color: var(--border-soft); color: var(--text-secondary); } #noteContentField .CodeMirror-scrollbar-filler, #noteContentField .CodeMirror-gutter-filler { background: var(--bg-card); } .note-item-row { display: flex; gap: 0.4rem; align-items: flex-start; margin-bottom: 0.5rem; } .note-item-row input[type="checkbox"] { margin-top: 0.55rem; } .note-item-row input[type="color"] { width: 1.6rem; height: 1.6rem; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; margin-top: 0.3rem; } .note-item-row .note-item-fields { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; } .note-item-row input[type="text"] { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.4rem 0.5rem; font-size: 0.8rem; font-family: inherit; } .note-item-row input[type="text"]:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .note-item-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 0.3rem; } .note-item-remove:hover { color: var(--status-danger); } /* ---------- Tags (notes) ---------- */ .filter-pill-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; } .note-tags-display { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .note-tag-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 999px; color: var(--text-primary); } .note-tags-add { background: none; border: 1px dashed var(--border-soft); color: var(--text-muted); font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 999px; cursor: pointer; font-family: inherit; } .note-tags-add:hover { color: var(--accent); border-color: var(--accent); } .tags-bubble { position: fixed; top: 50%; left: calc(50% + var(--sidebar-width) / 2); transform: translate(-50%, -50%) scale(0.92); width: min(460px, calc(100vw - var(--sidebar-width) - 2rem)); max-height: 80vh; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05), opacity 0.18s ease; z-index: 51; } .tags-bubble.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } #tagsBubbleBody { padding: 1rem 1.25rem; overflow-y: auto; } #tagsBubbleList { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .tag-bubble-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; } .tag-bubble-row input[type="checkbox"] { flex-shrink: 0; } .tag-bubble-row .tag-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; } .tag-bubble-row .tag-nom { flex: 1; font-size: 0.85rem; color: var(--text-primary); cursor: pointer; } .tag-bubble-row input[type="text"] { flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.25rem 0.45rem; font-size: 0.82rem; font-family: inherit; } .tag-bubble-row .tag-edit, .tag-bubble-row .tag-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.72rem; padding: 0.2rem 0.3rem; flex-shrink: 0; } .tag-bubble-row .tag-edit:hover { color: var(--accent); } .tag-bubble-row .tag-delete:hover, .tag-bubble-row .tag-delete.confirming { color: var(--status-danger); } .share-user-row { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.55rem 0.6rem; font-size: 0.85rem; font-family: inherit; cursor: pointer; } .share-user-row:hover { background: rgba(99, 102, 241, 0.1); } .tags-new-form { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border-soft); } .tags-new-form input[type="text"] { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.4rem 0.55rem; font-size: 0.82rem; font-family: inherit; } .tags-new-form input[type="text"]:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .tags-new-form .btn { width: 100%; } .tags-new-form textarea, .tags-new-form select { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.4rem 0.55rem; font-size: 0.82rem; font-family: inherit; } .tags-new-form textarea { resize: vertical; } .tags-new-form textarea:focus, .tags-new-form select:focus { outline: 1px solid var(--accent); border-color: var(--accent); } /* ---------- Pages "tableau" (groupes) ---------- */ .gt-table-wrap { overflow-x: auto; } .gt-table { border-collapse: collapse; width: 100%; } .gt-table th, .gt-table td { border: 1px solid var(--border-soft); padding: 0.3rem 0.6rem; font-size: 0.85rem; text-align: left; white-space: nowrap; } .gt-table th { color: var(--text-secondary); font-weight: 600; background: rgba(255, 255, 255, 0.03); } .gt-table td.gt-ligne-label { color: var(--text-secondary); font-weight: 600; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 9rem; } .gt-ligne-actions { display: none; align-items: center; gap: 0.15rem; flex-shrink: 0; } #gtCard.gt-edit-lignes .gt-ligne-actions { display: inline-flex; } .gt-ligne-edit, .gt-ligne-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.72rem; } .gt-ligne-edit:hover { color: var(--accent); } .gt-ligne-delete:hover, .gt-ligne-delete.confirming { color: var(--status-danger); } .gt-champs-row { display: flex; gap: 0.6rem; } .gt-champ-cell { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 5rem; } .gt-champ-block { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0.6rem; } .gt-champ-block-head { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; } .gt-champ-block-head input[type="text"] { flex: 1; } .gt-champ-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.72rem; flex-shrink: 0; } .gt-champ-delete:hover { color: var(--status-danger); } .gt-champ-choix-add-row { display: flex; gap: 0.3rem; align-items: center; } .gt-champ-choix-add-row input[type="text"] { flex: 1; } .gt-champ-choix-add-row input[type="color"] { width: 1.4rem; height: 1.4rem; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; } .gt-table input[type="text"], .gt-table select { background: transparent; border: none; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; width: 100%; padding: 0.15rem 0.3rem; } .gt-table input[type="text"]:focus, .gt-table select:focus { outline: 1px solid var(--accent); border-radius: var(--radius-sm); } .gt-table input[type="text"]:disabled, .gt-table select:disabled { color: var(--text-muted); } .gt-table select { cursor: pointer; } .gt-table select:disabled { cursor: default; } .gt-instance-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; } .gt-instance-filter { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--text-secondary); } .gt-instance-actions { display: flex; align-items: center; gap: 0.3rem; } .gt-instance-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.72rem; } .gt-instance-delete:hover, .gt-instance-delete.confirming { color: var(--status-danger); } .gt-page-tab { display: inline-flex; align-items: center; gap: 0.25rem; } .gt-page-tab-actions { display: none; align-items: center; gap: 0.15rem; } #groupPagesBar.gt-edit-mode .gt-page-tab-actions { display: inline-flex; } .gt-page-edit, .gt-page-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.72rem; padding: 0.2rem 0.3rem; } .gt-page-edit:hover { color: var(--accent); } .gt-page-delete:hover, .gt-page-delete.confirming { color: var(--status-danger); } /* ---------- Acces rapide (gestion) ---------- */ .qa-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--border-soft); } .qa-row:last-child { border-bottom: none; } .qa-row.dragging { opacity: 0.4; } .qa-drag-handle { cursor: grab; color: var(--text-muted); flex-shrink: 0; } .qa-icon { flex-shrink: 0; font-size: 1rem; } .qa-info { flex: 1; min-width: 0; } .qa-title { font-size: 0.85rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qa-url { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qa-edit-icon, .qa-edit-title, .qa-edit-url { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.3rem 0.5rem; font-size: 0.82rem; font-family: inherit; } .qa-edit-icon { width: 3.2rem; flex-shrink: 0; } .qa-edit-title { width: 30%; } .qa-edit-url { flex: 1; min-width: 0; } .qa-edit, .qa-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0.2rem 0.35rem; flex-shrink: 0; } .qa-edit:hover { color: var(--accent); } .qa-delete:hover, .qa-delete.confirming { color: var(--status-danger); }