:root { color-scheme: dark; --bg: #0b0f14; --bg-card: #161b22; --bg-card-2: #1e252e; --fg: #e6edf3; --fg-dim: #8b949e; --accent: #f7c948; --ok: #2ea043; --warn: #d29922; --err: #f85149; --border: #30363d; --r: 8px; --pad: 10px; } * { box-sizing: border-box; } /* Avant authentification : ne rien montrer d'autre que le formulaire de login. Tout l'arrière-plan (header, sections, navigation, FAB, bannières) est masqué pour ne rien trahir de la finalité de l'app à un visiteur non authentifié. Par défaut → masqué dès le 1er paint, sans flash ; le JS retire la classe une fois le token validé. */ body.pre-auth > header, body.pre-auth > .view, body.pre-auth > #tabbar, body.pre-auth > #offline-banner { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.4; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; } body { padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(80px + env(safe-area-inset-bottom)) env(safe-area-inset-left); } header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 10; } header h1 { margin: 0; font-size: 18px; font-weight: 600; } .status { display: flex; align-items: center; gap: 12px; } .dot { font-size: 18px; } .dot.on { color: var(--ok); } .dot.off { color: var(--err); } .dot.warn { color: var(--warn); } header button { background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: var(--r); padding: 4px 10px; font-size: 16px; cursor: pointer; } .filters { display: flex; gap: 6px; margin-left: auto; margin-right: 12px; } .filter-btn { padding: 4px 10px; font-size: 18px; line-height: 1; background: var(--bg-card-2); transition: opacity 0.15s, filter 0.15s; } .filter-btn.off { opacity: 0.35; filter: grayscale(1); } main { padding: 12px 12px 0; display: flex; flex-direction: column; gap: 18px; } .group h2 { margin: 8px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); } .group .count { color: var(--fg-dim); margin-left: 6px; font-weight: 400; } .todos { display: flex; flex-direction: column; gap: 8px; } .todo { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 0 12px var(--pad); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "desc dragzone"; column-gap: 10px; align-items: center; position: relative; user-select: none; -webkit-user-select: none; cursor: pointer; } /* Tâches Dario : colonne checkbox en plus à gauche */ .todo.assign-dario { grid-template-columns: auto 1fr auto; grid-template-areas: "check desc dragzone"; } .todo .check { grid-area: check; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fg-dim); background: transparent; padding: 0; cursor: pointer; flex-shrink: 0; position: relative; transition: background 0.12s, border-color 0.12s; } .todo .check::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 12px; border-right: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(45deg); opacity: 0; } .todo .check[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); } .todo .check[aria-pressed="true"]::after { opacity: 1; } .todo .check:active { transform: scale(0.92); } .todo .drag-zone { grid-area: dragzone; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; margin: -12px 0; /* étend la zone à toute la hauteur de la card */ align-self: stretch; cursor: grab; /* Critique : Chrome Android n'essaie plus d'interpréter le geste comme scroll */ touch-action: none; -webkit-user-select: none; user-select: none; } .todo .drag-zone:active { cursor: grabbing; } .todo .grip { color: var(--fg-dim); font-size: 18px; letter-spacing: -2px; line-height: 1; } .todo .drag-zone:active .grip { color: var(--fg); } /* Distinction visuelle par assignation (sans chip) : - Dario : teinte bleutée discrète + filet gauche bleu - Picsou : teinte jaunâtre + filet gauche jaune (accent) La bordure droite reste pour la poignée. */ .todo.assign-dario { background: #0d1825; border-color: #1c3149; } .todo.assign-dario::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: #4a90c8; border-radius: var(--r) 0 0 var(--r); } .todo.assign-picsou { background: #1c1808; border-color: #3b3416; } .todo.assign-picsou::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--accent); border-radius: var(--r) 0 0 var(--r); } .todo:active { background: var(--bg-card-2); } .todo.in_progress { border-left: 3px solid var(--accent); padding-left: calc(var(--pad) - 2px); } .todo.blocked { border-left: 3px solid var(--err); padding-left: calc(var(--pad) - 2px); opacity: 0.85; } .todo.done { opacity: 0.55; } .todo.done .desc { text-decoration: line-through; } .todo .desc { grid-area: desc; color: var(--fg); font-size: 16px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .todo .corner { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .todo .id { color: var(--fg-dim); font-size: 12px; font-variant-numeric: tabular-nums; } .todo .approval-icon { font-size: 16px; line-height: 1; } .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg-card-2); color: var(--fg-dim); border: 1px solid var(--border); white-space: nowrap; } /* Drag & drop tactile (poignée) */ .todo.dragging-ghost { box-shadow: 0 12px 28px rgba(0,0,0,0.6); transform: scale(1.02); border-color: var(--accent); opacity: 0.95; } .drop-placeholder { background: rgba(247, 201, 72, 0.08); border: 2px dashed var(--accent); border-radius: var(--r); box-sizing: border-box; } /* Pendant un drag actif : interdit le scroll natif et la sélection texte. On évite overflow:hidden (provoquait un layout shift sur certains browsers qui faisait perdre le pointer capture). touch-action:none suffit à bloquer le scroll par geste. */ body.dragging-active { touch-action: none; user-select: none; -webkit-user-select: none; } body.dragging-active * { touch-action: none; } #add { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; font-size: 28px; background: var(--accent); color: #1a1a1a; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.4); cursor: pointer; z-index: 20; } #add:active { transform: scale(0.95); } dialog { background: var(--bg-card); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; max-width: min(94vw, 480px); width: 100%; } /* Dialog "Nouvelle tâche" en plein écran sur mobile (au-dessus du clavier). 100dvh = dynamic viewport height : exclut la barre URL et la zone clavier. Compatible iOS Safari ≥ 15.4 et Chrome Android ≥ 108. */ @media (max-width: 700px) { #dlg-add { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: none; } #dlg-add form { height: 100%; display: flex; flex-direction: column; } #dlg-add label:has(textarea[name=description]) { flex: 1; min-height: 0; } #dlg-add textarea[name=description] { flex: 1; height: 100%; resize: none; } #dlg-add menu { margin-top: auto; } } dialog::backdrop { background: rgba(0,0,0,0.7); } dialog h2 { margin: 0 0 12px; font-size: 17px; } dialog form { display: flex; flex-direction: column; gap: 10px; } dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-dim); } dialog input, dialog textarea, dialog select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; width: 100%; } dialog menu { display: flex; gap: 8px; justify-content: flex-end; padding: 0; margin: 8px 0 0; } dialog menu.row { justify-content: space-between; flex-wrap: wrap; } dialog button { background: var(--bg-card-2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 14px; font: inherit; cursor: pointer; } dialog button[type=submit], dialog button.primary { background: var(--accent); color: #1a1a1a; border: none; font-weight: 600; } dialog button.danger { color: var(--err); border-color: #6b1a1a; } .meta { color: var(--fg-dim); font-size: 12px; margin: -4px 0 4px; } .dates { font-size: 11px; } .empty { color: var(--fg-dim); text-align: center; padding: 24px 12px; font-size: 14px; } #offline-banner { position: sticky; top: 50px; z-index: 9; margin: 0 12px; padding: 8px 12px; border-radius: var(--r); font-size: 13px; background: #2a1f08; color: var(--warn); border: 1px solid #6b4d10; text-align: center; } #offline-banner[data-state="syncing"] { background: #0e2412; color: var(--ok); border-color: #1f5128; } #show-done-row { padding: 16px 12px 24px; display: none; } #show-done-btn { width: 100%; background: var(--bg-card); color: var(--fg-dim); border: 1px dashed var(--border); border-radius: var(--r); padding: 10px; font: inherit; cursor: pointer; } #show-done-btn[aria-pressed="true"] { color: var(--fg); border-style: solid; background: var(--bg-card-2); } /* Segmented control assignation (dialog add) */ .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bg-card-2); border-radius: 8px; border: 1px solid var(--border); } .seg-btn { background: transparent; color: var(--fg-dim); border: none; padding: 8px 0; font: inherit; cursor: pointer; border-radius: 6px; font-size: 15px; transition: background 0.12s, color 0.12s; } .seg-btn.active { background: var(--accent); color: #1a1a1a; font-weight: 600; } /* Liste catégories */ .cats-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; } .cats-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 6px; } .cats-list li.empty { background: transparent; border: none; color: var(--fg-dim); font-style: italic; padding: 4px 0; } .cat-actions { display: flex; gap: 4px; } .cat-actions button { background: transparent; border: 1px solid transparent; color: var(--fg); padding: 4px 6px; cursor: pointer; font-size: 14px; } .cat-actions button:hover { border-color: var(--border); } .cat-actions button.danger { color: var(--err); } /* Chips horizontaux scrollables (catégorie dans dialog add) */ .field-label { font-size: 13px; color: var(--fg-dim); margin-top: 4px; } .chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { height: 4px; } .chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .chip { flex-shrink: 0; background: var(--bg-card-2); color: var(--fg-dim); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; } .chip[aria-pressed="true"] { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; } @media (min-width: 700px) { main { max-width: 720px; margin: 0 auto; } .view-pad { max-width: 720px; margin: 0 auto; } } /* ---------- Barre de navigation (sections) ---------- */ #tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--bg-card); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); } #tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: none; color: var(--fg-dim); padding: 8px 0 7px; font: inherit; cursor: pointer; } #tabbar .tab .tab-ico { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: 0.6; transition: filter .12s, opacity .12s; } #tabbar .tab .tab-lbl { font-size: 11px; } #tabbar .tab[aria-current="page"] { color: var(--accent); } #tabbar .tab[aria-current="page"] .tab-ico { filter: none; opacity: 1; } .view[hidden] { display: none; } .view-loading { color: var(--fg-dim); text-align: center; padding: 40px 12px; } /* ---------- Vue Fichiers ---------- */ .view-pad { padding: 12px; } .uploader { border: 2px dashed var(--border); border-radius: var(--r); padding: 18px 14px; text-align: center; color: var(--fg-dim); background: var(--bg-card); cursor: pointer; transition: border-color .12s, background .12s; } .uploader.drag { border-color: var(--accent); background: var(--bg-card-2); color: var(--fg); } .uploader strong { color: var(--fg); } .uploader input[type=file] { display: none; } .up-progress { margin-top: 10px; display: none; flex-direction: column; gap: 6px; } .up-progress.active { display: flex; } .up-bar { height: 6px; border-radius: 3px; background: var(--bg-card-2); overflow: hidden; } .up-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; } .up-row { font-size: 12px; color: var(--fg-dim); } .file-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 6px; } .file-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); } .file-list .f-name { flex: 1; word-break: break-all; font-size: 14px; } .file-list .f-meta { color: var(--fg-dim); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } .file-list a.f-name { color: var(--fg); text-decoration: none; } .file-list a.f-name:hover { color: var(--accent); } .file-list .f-del { background: transparent; border: 1px solid transparent; color: var(--err); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; } .file-list .f-del:hover { border-color: #6b1a1a; } /* ---------- Vue LinkedIn ---------- */ .ln-day { margin-top: 22px; } .ln-day:first-child { margin-top: 4px; } .ln-day > h2 { margin: 0 4px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); } .ln-post { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; margin-bottom: 14px; } .ln-post.status-published { opacity: 0.6; } .ln-post.status-discarded { opacity: 0.45; } .ln-post.status-publishing { border-color: var(--warn); } .ln-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .ln-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-dim); white-space: nowrap; } .ln-badge.s-proposed { color: var(--fg-dim); } .ln-badge.s-edited { color: var(--accent); border-color: var(--accent); } .ln-badge.s-publishing { color: var(--warn); border-color: var(--warn); } .ln-badge.s-published { color: var(--ok); border-color: var(--ok); } .ln-badge.s-discarded { color: var(--err); } .ln-ia { color: var(--fg-dim); font-size: 11px; } /* Texte du post — lecture par défaut, caractères confortables sur mobile. */ .ln-text-read { white-space: pre-wrap; word-break: break-word; font-size: 17px; line-height: 1.6; color: var(--fg); } /* Sources de référence (renvois vers posts X, articles, dépôts…). */ .ln-sources-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .ln-sources-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); margin-bottom: 8px; } .ln-sources { margin: 0; padding: 0; list-style: none; } .ln-src { margin: 0 0 8px; line-height: 1.45; } .ln-src:last-child { margin-bottom: 0; } .ln-src a { color: var(--accent); text-decoration: none; font-size: 14px; word-break: break-word; } .ln-src a:hover { text-decoration: underline; } .ln-src-dom { display: block; color: var(--fg-dim); font-size: 12px; margin-top: 1px; } .ln-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .ln-actions button { background: var(--bg-card-2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 9px 16px; font-size: 15px; cursor: pointer; } .ln-actions button.primary { background: var(--accent); color: #1a1a1a; border: none; font-weight: 600; } .ln-actions button.danger { color: var(--err); border-color: #6b1a1a; } .ln-actions button:disabled { opacity: 0.5; cursor: default; } .ln-saved { color: var(--ok); font-size: 13px; align-self: center; } /* Vue dédiée d'édition (plein écran). */ .ln-editor { display: flex; flex-direction: column; gap: 14px; } .ln-editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; background: var(--bg); padding: 4px 0 10px; border-bottom: 1px solid var(--border); z-index: 2; } .ln-editor-title { font-size: 14px; font-weight: 600; color: var(--fg-dim); } .ln-editor-bar button { border-radius: 6px; padding: 9px 16px; font-size: 15px; cursor: pointer; background: var(--bg-card-2); color: var(--fg); border: 1px solid var(--border); } .ln-editor-bar button.primary { background: var(--accent); color: #1a1a1a; border: none; font-weight: 600; } .ln-editor-bar button:disabled { opacity: 0.5; cursor: default; } .ln-text-edit { width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 14px; font-family: inherit; font-size: 17px; line-height: 1.6; resize: vertical; min-height: 55vh; white-space: pre-wrap; }