/* ======================================================================= orsa — feuille de style unique Thème clair/sombre via [data-theme] sur . ======================================================================= */ :root { --bg: #ffffff; --bg-soft: #f7f7f5; --bg-sidebar: #fbfbfa; --border: #e7e7e4; --text: #2b2b2b; --text-soft: #6b6b6b; --accent: #555b62; /* couleur primaire : gris (clair) */ --accent-soft: #ededf0; /* fond doux (sélection, état actif) */ --on-accent: #ffffff; /* texte sur fond accent */ --danger: #c0392b; --shadow: 0 1px 3px rgba(0,0,0,.08); --radius: 8px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Coque flottante « frosted » */ --gap: 14px; --bar-h: 50px; --side-w: 282px; /* bord gauche de la zone de contenu (après la sidebar ouverte) */ --content-l: calc(var(--gap) + var(--side-w) + var(--gap)); --radius-pill: 999px; --radius-panel: 18px; --glass: rgba(255, 255, 255, .68); --glass-border: rgba(0, 0, 0, .08); --glass-shadow: 0 8px 30px rgba(0, 0, 0, .10); --hover: rgba(0, 0, 0, .06); --page-bg: #ffffff; /* fond du contenu (clair) */ --sidebar-bg: #ffffff; /* sidebar opaque (clair) */ --fig-bg: #f5f6f8; /* fond des cadres d'image (clair) */ --fig-dot: rgba(0, 0, 0, .13); /* pointillés du cadre d'image (clair) */ } [data-theme="dark"] { --bg: #1e1e1e; --bg-soft: #262626; --bg-sidebar: #202020; --border: #3a3a3a; --text: #e6e6e6; --text-soft: #a0a0a0; --accent: #c4c8ce; /* couleur primaire : gris clair (sombre) */ --accent-soft: #2c2d30; /* fond doux (sélection, état actif) */ --on-accent: #1c1c1e; /* texte sombre sur fond accent clair */ --danger: #e57368; --shadow: 0 1px 3px rgba(0,0,0,.4); --glass: rgba(32, 32, 34, .66); --glass-border: rgba(255, 255, 255, .10); --glass-shadow: 0 8px 30px rgba(0, 0, 0, .45); --hover: rgba(255, 255, 255, .08); --page-bg: #202022; /* fond du contenu (sombre) */ --sidebar-bg: #202022; /* sidebar opaque (sombre) */ --fig-bg: #18181a; /* fond des cadres d'image (sombre) */ --fig-dot: rgba(255, 255, 255, .12); /* pointillés du cadre d'image (sombre) */ } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--text); background: var(--bg); font-size: 15px; line-height: 1.6; } body:not(.login-page) { background: var(--page-bg); background-attachment: fixed; } .ic { display: block; } button { font-family: inherit; cursor: pointer; } .dot { color: var(--accent); } .error { color: var(--danger); margin: .4rem 0 0; } /* --- Connexion / configuration (carte frosted minimaliste) -------------- */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(820px 440px at 50% -5%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), linear-gradient(160deg, #eef1f5 0%, #e4e8ee 100%); } [data-theme="dark"] .login-page { background: radial-gradient(820px 440px at 50% -5%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), linear-gradient(160deg, #161618 0%, #202024 100%); } .auth-card { width: min(360px, 92vw); padding: 2.4rem 2rem; border-radius: 22px; text-align: center; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); } .auth-brand { font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; } .auth-hint { color: var(--text-soft); font-size: .85rem; margin: .4rem 0 0; } .auth-form { display: grid; gap: .7rem; margin-top: 1.6rem; text-align: left; } .auth-form input { width: 100%; padding: .75rem .9rem; font-size: .95rem; color: var(--text); border: 1px solid var(--glass-border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); } .auth-form input::placeholder { color: var(--text-soft); } .auth-form input:focus { outline: none; border-color: var(--accent); } .auth-form button { margin-top: .4rem; padding: .75rem; border: none; border-radius: 12px; cursor: pointer; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .95rem; } .auth-form button:hover { filter: brightness(1.06); } .auth-form .error { text-align: center; } .admin-main input, .admin-main select, #prompt-input { padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: .95rem; } .admin-main button[type="submit"] { padding: .65rem; border: none; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .95rem; } /* --- Coque : panneaux flottants frosted --------------------------------- */ #app { height: 100vh; } /* Surface en verre de la navbar (du contenu défile derrière) — sans ombre. La sidebar, elle, est OPAQUE (rien ne défile derrière). */ .glass, .topbar { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); } /* Barre supérieure : pill centrée AU-DESSUS DE LA ZONE DE CONTENU. (centre de l'intervalle [bord gauche du contenu ; bord droit de la page]) */ .topbar { position: fixed; z-index: 50; top: var(--gap); left: calc((var(--content-l) + 100vw - var(--gap)) / 2); transform: translateX(-50%); width: min(880px, calc(100vw - var(--content-l) - var(--gap))); height: var(--bar-h); display: flex; align-items: center; gap: .25rem; padding: 0 7px 0 18px; border-radius: var(--radius-pill); } /* Sidebar réduite : la navbar se décale pour NE PAS recouvrir le bouton rond (sinon, sur écrans étroits/mobile, on ne peut plus rouvrir la sidebar). */ #app.sidebar-collapsed .topbar { left: calc((var(--gap) + var(--bar-h) + 100vw) / 2); width: min(880px, calc(100vw - var(--bar-h) - 3 * var(--gap))); } /* Sur grand écran, la navbar pill recentrée a déjà la place : on la re-centre. */ @media (min-width: 1100px) { #app.sidebar-collapsed .topbar { left: 50vw; width: min(880px, calc(100vw - 2 * var(--gap))); } } .topbar-title { display: flex; align-items: center; gap: .55rem; min-width: 0; } .doc-title { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .save-state { font-size: .76rem; color: var(--text-soft); white-space: nowrap; } .lock-indicator { width: 30px; height: 30px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text-soft); cursor: default; transition: background .12s, border-color .12s, color .12s; } .lock-indicator:hover { background: var(--hover); border-color: var(--glass-border); } .lock-indicator.is-actionable { cursor: pointer; color: var(--text); } .lock-indicator.is-editing { color: var(--accent); } .lock-indicator.is-free { color: var(--text-soft); } .lock-indicator.is-stale { color: color-mix(in srgb, var(--accent) 68%, var(--text)); } .lock-indicator.is-locked { color: #8a2018; background: color-mix(in srgb, #fdecea 88%, transparent); border-color: #f3c6c0; } [data-theme="dark"] .lock-indicator.is-locked { color: var(--danger); background: color-mix(in srgb, #3a201e 82%, transparent); border-color: #5a2c27; } .spacer { flex: 1; } /* Boutons ronds de la navbar (et toggle sidebar). */ .pill-btn { width: 37px; height: 37px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--text); text-decoration: none; transition: background .12s, border-color .12s; } .pill-btn:hover { background: var(--hover); border-color: var(--glass-border); } /* Groupe d'actions secondaires : transparent sur desktop (boutons en ligne), replié dans un menu déroulant sur mobile. Le bouton « ⋯ » n'apparaît qu'en mobile. */ .nav-actions { display: contents; } .nav-more { display: none; } .stats-btn { width: auto; min-width: 37px; padding: 0 .72rem; font-size: .78rem; font-weight: 700; letter-spacing: -.01em; } .stats-panel { position: fixed; z-index: 80; min-width: 190px; padding: .45rem; border-radius: 14px; background: var(--bg); color: var(--text); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: grid; gap: .55rem; max-width: min(420px, calc(100vw - 24px)); } .toast { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .85rem; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--bg); color: var(--text); box-shadow: var(--glass-shadow); transition: opacity .16s ease, transform .16s ease; } .toast.is-leaving { opacity: 0; transform: translateY(6px); } .toast-body { flex: 1; font-size: .9rem; line-height: 1.4; } .toast-close { width: 24px; height: 24px; display: grid; place-items: center; border: none; border-radius: 999px; background: transparent; color: var(--text-soft); font-size: 1rem; } .toast-close:hover { background: var(--hover); color: var(--text); } .toast-error { border-color: color-mix(in srgb, var(--danger) 30%, var(--glass-border)); } .toast-success { border-color: color-mix(in srgb, #299764 28%, var(--glass-border)); } .shared-page { min-height: 100vh; background: var(--bg); color: var(--text); } .shared-main { max-width: 880px; margin: 0 auto; padding: max(3rem, 6vh) 1rem 4rem; } .shared-header { max-width: 820px; margin: 0 auto 1.5rem; padding: 0 1.5rem; } .shared-title { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: normal; } .shared-page .reader { display: block; padding: 0 1.5rem 2rem; } .graph-page { min-height: 100vh; background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 65%, var(--bg)) 0%, var(--bg) 100%); color: var(--text); } .graph-shell { width: min(1600px, calc(100vw - 2 * var(--gap))); margin: 0 auto; padding: calc(var(--gap) * 1.5); display: grid; grid-template-columns: 300px minmax(0, 1fr) 380px; gap: 1rem; min-height: 100vh; } .graph-sidebar, .graph-stage-card, .graph-preview { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 28px; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); } .graph-sidebar, .graph-preview { padding: 1.15rem; display: grid; align-content: start; gap: 1rem; } .graph-brand h1, .graph-stage-head h2, .graph-preview-head h2 { margin: 0; } .graph-copy, .graph-muted { color: var(--text-soft); margin: .35rem 0 0; } .graph-eyebrow { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .graph-panel-block { display: grid; gap: .7rem; } .graph-panel-block h2 { margin: 0; font-size: 1rem; } .graph-label { display: grid; gap: .35rem; font-size: .84rem; color: var(--text-soft); } .graph-select { width: 100%; min-height: 44px; padding: 0 .9rem; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--bg-soft); color: var(--text); } .graph-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .graph-stat { display: grid; gap: .18rem; padding: .8rem; border-radius: 16px; background: color-mix(in srgb, var(--bg-soft) 74%, transparent); } .graph-stat strong { font-size: 1.25rem; } .graph-stat span { color: var(--text-soft); font-size: .8rem; } .graph-node-list { display: grid; gap: .55rem; max-height: 42vh; overflow: auto; } .graph-node-list-item { text-align: left; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--bg-soft) 68%, transparent); color: var(--text); border-radius: 16px; padding: .8rem .9rem; cursor: pointer; display: grid; gap: .18rem; } .graph-node-list-item span { color: var(--text-soft); font-size: .8rem; } .graph-node-list-item.active, .graph-node-list-item:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg-soft)); border-color: color-mix(in srgb, var(--accent) 32%, var(--glass-border)); } .graph-stage-wrap { min-width: 0; } .graph-stage-card { padding: 1rem; display: grid; gap: .85rem; height: 100%; } .graph-stage-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .graph-stage { position: relative; min-height: 74vh; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 84%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)), radial-gradient(circle at center, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%); } .graph-svg { width: 100%; height: 100%; display: block; } .graph-edge { stroke: color-mix(in srgb, var(--text-soft) 46%, transparent); stroke-width: 1.8; stroke-linecap: round; opacity: .65; } .graph-edge.is-path { stroke: color-mix(in srgb, var(--accent) 60%, var(--text)); stroke-width: 3; opacity: .95; } .graph-node rect { fill: color-mix(in srgb, var(--bg) 88%, white 12%); stroke: color-mix(in srgb, var(--glass-border) 88%, transparent); stroke-width: 1.2; } .graph-node.is-path rect { fill: color-mix(in srgb, var(--accent) 10%, var(--bg)); stroke: color-mix(in srgb, var(--accent) 36%, var(--glass-border)); } .graph-node.is-selected rect { fill: color-mix(in srgb, var(--accent) 18%, var(--bg)); stroke: color-mix(in srgb, var(--accent) 56%, var(--glass-border)); stroke-width: 2; } .graph-node-title { fill: var(--text); font-size: 15px; font-weight: 700; } .graph-node-meta { fill: var(--text-soft); font-size: 11px; } .graph-preview-reader { min-height: 0; overflow: auto; max-height: calc(100vh - 210px); padding-right: .35rem; } @media (max-width: 1260px) { .graph-shell { grid-template-columns: 280px minmax(0, 1fr); } .graph-preview { grid-column: 1 / -1; } .graph-preview-reader { max-height: none; } } @media (max-width: 900px) { .graph-shell { width: min(100vw, calc(100vw - 2 * var(--gap))); padding: var(--gap); grid-template-columns: 1fr; } .graph-stage { min-height: 60vh; } .graph-stats { grid-template-columns: 1fr; } } .stats-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .38rem .45rem; border-radius: 10px; } .stats-row + .stats-row { margin-top: .15rem; } .stats-row-label { color: var(--text-soft); font-size: .82rem; } .stats-row-value { font-weight: 700; font-variant-numeric: tabular-nums; } /* Sidebar flottante, pleine hauteur. */ .sidebar { position: fixed; z-index: 40; left: var(--gap); top: var(--gap); bottom: var(--gap); width: var(--side-w); display: flex; flex-direction: column; overflow: hidden; background: var(--sidebar-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-panel); } .sidebar-head { display: flex; align-items: center; gap: .25rem; padding: 8px; flex: 0 0 auto; } .sidebar-tools { display: flex; gap: .1rem; margin-left: auto; } .sidebar-search-wrap { position: relative; padding: 0 8px 8px; flex: 0 0 auto; } .sidebar-search { width: 100%; min-height: 38px; padding: 0 2.35rem 0 .85rem; border-radius: 11px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: .9rem; } .sidebar-search::placeholder { color: var(--text-soft); } .sidebar-search:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); } .sidebar-search-clear { position: absolute; right: 15px; top: 50%; transform: translateY(calc(-50% - 4px)); width: 24px; height: 24px; display: grid; place-items: center; border: none; border-radius: 999px; background: transparent; color: var(--text-soft); } .sidebar-search-clear:hover { background: var(--hover); color: var(--text); } .tool-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-soft); transition: background .12s, color .12s; } .tool-btn:hover { background: var(--hover); color: var(--text); } /* Sidebar réduite -> bouton rond aligné avec la navbar. */ .sidebar.collapsed { width: var(--bar-h); height: var(--bar-h); bottom: auto; top: var(--gap); border-radius: 50%; } .sidebar.collapsed .sidebar-tools, .sidebar.collapsed .sidebar-search-wrap, .sidebar.collapsed .tree { display: none; } .sidebar.collapsed .sidebar-head { padding: 0; width: 100%; height: 100%; } .sidebar.collapsed #sidebar-toggle { width: 100%; height: 100%; border-radius: 50%; } /* Arbre */ .tree { overflow-y: auto; padding: 0 8px 10px; flex: 1; } .tree-list { list-style: none; margin: 0; padding-left: .7rem; } .tree > .tree-list { padding-left: 0; min-height: 40px; } .tree-item { margin: 1px 0; } .tree-row { display: flex; align-items: center; gap: .15rem; padding: .25rem .4rem; /* Hauteur figée : apparition des actions au survol -> aucun décalage. */ min-height: 32px; border-radius: 8px; cursor: pointer; user-select: none; } .tree-row:hover { background: var(--hover); } .tree-row.active { background: var(--accent-soft); font-weight: 600; } .tree-row.drop-hover, .tree-list.drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 8px; } .caret { display: inline-grid; place-items: center; color: var(--text-soft); transition: transform .12s; } .tree-row.open > .caret { transform: rotate(90deg); } .tree-item.page .tree-row { padding-left: 1.3rem; } /* aligne avec les dossiers */ .tree-label { flex: 1; display: inline-flex; align-items: center; gap: .45rem; min-width: 0; font-size: .9rem; } .tree-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tree-ic { display: inline-grid; place-items: center; color: var(--text-soft); flex: 0 0 auto; } .tree-empty { padding: .55rem .45rem; color: var(--text-soft); font-size: .85rem; } .actions { display: none; gap: .05rem; flex: 0 0 auto; } .tree-row:hover .actions { display: flex; } .mini { width: 22px; height: 22px; display: grid; place-items: center; border: none; background: transparent; border-radius: 6px; color: var(--text-soft); } .mini:hover { background: var(--glass-border); color: var(--text); } /* --- Zone principale ----------------------------------------------------- */ .main { position: absolute; inset: 0; height: 100vh; overflow-y: auto; padding: calc(var(--gap) + var(--bar-h) + var(--gap)) var(--gap) 0 var(--content-l); scroll-behavior: smooth; } #app.sidebar-collapsed .main { padding-left: var(--gap); } .main-inner { max-width: 880px; margin: 0 auto; } .welcome { text-align: center; color: var(--text-soft); padding: 4rem 2rem; } /* --- Mobile : la sidebar OUVERTE devient un tiroir superposé ------------- */ @media (max-width: 720px) { :root { --side-w: min(280px, 84vw); } /* Quand elle est ouverte : navbar pleine largeur, contenu NON poussé, la sidebar (z-index élevé) se superpose au contenu. */ #app:not(.sidebar-collapsed) .topbar { left: 50vw; width: calc(100vw - 2 * var(--gap)); } #app:not(.sidebar-collapsed) .main { padding-left: var(--gap); } .sidebar { z-index: 60; box-shadow: 0 10px 40px rgba(0,0,0,.25); } /* Réduite : le bouton rond reste au-dessus de tout (toujours cliquable). */ .sidebar.collapsed { z-index: 60; } /* --- Navbar mobile : présence masquée, actions repliées dans « ⋯ » --- */ #presence { display: none; } .nav-more { display: inline-grid; } .nav-actions { display: none; position: absolute; top: calc(100% + 8px); right: 0; flex-direction: column; min-width: 210px; padding: 6px; gap: 2px; background: var(--sidebar-bg); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.28); z-index: 70; } .nav-actions.open { display: flex; } /* Items du menu : icône + libellé (issu de l'attribut title), pleine largeur. */ .nav-actions .pill-btn { width: 100%; height: auto; border-radius: 10px; display: flex; align-items: center; justify-content: flex-start; gap: .6rem; padding: .55rem .6rem; min-width: 0; } .nav-actions .pill-btn::after { content: attr(title); font-size: .9rem; white-space: nowrap; } .nav-actions .stats-btn { font-weight: 400; letter-spacing: normal; } } /* Présence */ .presence { display: flex; gap: .15rem; margin-right: .2rem; } .presence-chip { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #fff; background: var(--text-soft); border: 2px solid var(--glass); } .presence-chip.is-editor { background: var(--accent); color: var(--on-accent); } .presence-chip.is-viewer { background: #8a8a8a; } /* --- Éditeur / lecteur (prose) ------------------------------------------ */ .prose { max-width: 820px; width: 100%; margin: 0 auto; padding: 1rem 1.5rem 6rem; outline: none; } .prose:focus { outline: none; } .ProseMirror { outline: none; min-height: 60vh; } .ProseMirror > * + * { margin-top: .75em; } .prose h1 { font-size: 2rem; line-height: 1.2; margin: 1.4em 0 .4em; } .prose h2 { font-size: 1.5rem; margin: 1.3em 0 .4em; } .prose h1, .prose h2 { scroll-margin-top: calc(var(--gap) + var(--bar-h) + 1.2rem); } .prose h3 { font-size: 1.2rem; margin: 1.2em 0 .3em; } .prose h4, .prose h5, .prose h6 { font-size: 1rem; margin: 1.1em 0 .3em; } .prose p { margin: .6em 0; } .prose a { color: var(--accent); text-decoration: underline; } .ProseMirror a { cursor: text; } .ProseMirror.link-open-modifier a { cursor: pointer; } .prose ul, .prose ol { padding-left: 1.5em; margin: .5em 0; } .prose blockquote { border-left: 3px solid var(--accent); margin: .8em 0; padding: .2em 1em; color: var(--text-soft); background: var(--bg-soft); border-radius: 0 6px 6px 0; } .prose code { font-family: var(--mono); font-size: .88em; background: var(--bg-soft); padding: .12em .35em; border-radius: 4px; border: 1px solid var(--border); white-space: nowrap; } .prose pre { background: #f1f3f5; color: #1f2937; border: 1px solid var(--border); border-radius: 10px; padding: 1em; overflow: auto; margin: 0; } .prose pre code { background: none; border: none; padding: 0; white-space: pre; } [data-theme="dark"] .prose pre { background: #23262d; color: #e5edf7; } .prose table { border-collapse: collapse; width: 100%; margin: 1em 0; } .prose th, .prose td { border: 1px solid var(--border); padding: .4em .6em; text-align: left; } .prose th { background: transparent; font-weight: inherit; } .ProseMirror .tableWrapper { overflow-x: auto; margin: 1em 0; } .ProseMirror table { min-width: 320px; } .ProseMirror td, .ProseMirror th { position: relative; min-width: 88px; } .ProseMirror .selectedCell::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; } .table-handles { position: fixed; inset: 0; z-index: 120; pointer-events: none; } .table-handle { position: fixed; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--bg); color: var(--text-soft); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); pointer-events: auto; } .table-handle:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 22%, var(--glass-border)); } .table-handle-table-move-up .ic { transform: rotate(-90deg); } .table-handle-table-move-down .ic { transform: rotate(90deg); } .table-handle:disabled { opacity: .45; cursor: default; } .table-handle-table-delete { color: #fff; background: var(--danger); border-color: transparent; } .table-handle-table-delete:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); color: #fff; border-color: transparent; } .prose hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; } /* Notes de bas de page (rendu serveur ParsedownExtra) */ .footnotes { font-size: .85rem; color: var(--text-soft); margin-top: 4.5em; padding-top: 0; } .footnotes ol { margin: 0; padding-left: 1.4rem; } a.footnote-ref, a.footnote-backref { color: var(--accent); text-decoration: none; } .footnotes li, sup[id^="fnref"] { scroll-margin-top: 7rem; } .footnotes li, sup[id^="fnref"] { border-radius: 4px; } .footnote-target-flash { animation: footnote-target-flash 1.35s ease-out; } @keyframes footnote-target-flash { 0%, 18% { color: var(--text); background: color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .footnote-target-flash { animation-duration: .01ms; } } /* --- Images : cadre pointillé + légende (read view) --------------------- */ .md-figure { position: relative; margin: 1.4em 0; text-align: center; } .md-figure .fig-media { border: 1px solid var(--border); border-radius: 12px; background-color: var(--fig-bg); background-image: radial-gradient(circle, var(--fig-dot) 1px, transparent 1.5px); background-size: 16px 16px; background-position: -8px -8px; padding: 1.1rem; } .md-figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 4px; cursor: zoom-in; } .md-figure:not(.cover) img.compact-diagram-image { width: var(--diagram-image-width); } .md-figure figcaption { width: min(100%, 42rem); margin: .55rem auto 0; font-size: .82rem; color: var(--text-soft); text-align: center; } /* Variante « pleine largeur » : l'image recouvre le cadre, sans pointillés. */ .md-figure.cover { padding: 0; background: none; overflow: visible; } .md-figure.cover .fig-media { padding: 0; border: none; background: none; overflow: hidden; } .md-figure.cover img { width: 100%; border-radius: 0; } /* Bascule dark/light */ .dual-image .img-dark { display: none; } [data-theme="dark"] .dual-image .img-light { display: none; } [data-theme="dark"] .dual-image .img-dark { display: block; } /* Dans l'éditeur, l'image est rendue via NodeView en .md-figure (cadre + légende), donc les styles .md-figure ci-dessus s'appliquent aussi. */ .ProseMirror .md-figure { cursor: pointer; } .ProseMirror-selectednode { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; } /* Boutons sur l'image (éditeur) : agrandir + supprimer, façon blocs de code. */ .fig-controls { position: absolute; top: .5rem; right: .5rem; z-index: 2; display: flex; gap: .3rem; opacity: 0; transition: opacity .12s ease; } .md-figure:hover .fig-controls, .md-figure.ProseMirror-selectednode .fig-controls { opacity: 1; } .fig-btn { width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text-soft); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .12s ease, color .12s ease; } .fig-btn:hover { background: var(--accent-soft); color: var(--text); } .fig-btn.fig-up .ic { transform: rotate(-90deg); } .fig-btn.fig-down .ic { transform: rotate(90deg); } .fig-btn.fig-danger { background: var(--danger); color: #fff; border-color: transparent; } .fig-btn.fig-danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); color: #fff; } /* --- Lightbox plein écran ----------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(0, 0, 0, .82); cursor: zoom-out; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: none; } /* Placeholder TipTap : sur le bloc vide courant (façon Notion). */ .ProseMirror .is-empty::before { content: attr(data-placeholder); color: var(--text-soft); float: left; height: 0; pointer-events: none; } /* --- Callouts ------------------------------------------------------------ */ .callout-note { --cal: rgb(67, 133, 190); } .callout-info { --cal: rgb(67, 133, 190); } .callout-tip { --cal: rgb(58, 169, 159); } .callout-warning { --cal: rgb(218, 112, 44); } .callout-danger { --cal: rgb(209, 77, 65); } .callout { /* --cal est fourni par la classe de type (.callout-warning, etc.) ; fallback bleu via var() pour les callouts sans classe de type. Fond uni (teinte opaque de la couleur), sans bordure. */ border: none; background: color-mix(in srgb, var(--cal, rgb(67,133,190)) 13%, var(--bg)); border-radius: 8px; padding: .8em 1em; margin: 1em 0; } .callout-header { display: flex; align-items: center; gap: .5em; margin-bottom: .2em; } .callout-icon { display: inline-flex; color: var(--cal, rgb(67,133,190)); flex: 0 0 auto; } .callout-icon svg { width: 20px; height: 20px; } .callout-label { font-weight: 700; color: var(--cal, rgb(67,133,190)); font-size: 1em; flex: 1; } .callout-type { opacity: 0; transition: opacity .12s; background: transparent; color: var(--text-soft); border: 1px solid var(--border); border-radius: 6px; font-size: .75rem; padding: 1px 4px; } .callout:hover .callout-type, .callout-type:focus { opacity: 1; } .callout-content > :first-child { margin-top: 0; } .callout-content > :last-child { margin-bottom: 0; } .callout-content { color: var(--text); } .attachment-card { position: relative; display: flex; align-items: center; gap: 1.15rem; margin: 1em 0; padding: 1rem 1.1rem; border: none; border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); cursor: pointer; transition: background .12s ease; } .attachment-card:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); } .attachment-card.is-active, .attachment-card.ProseMirror-selectednode { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } .attachment-card-controls { position: absolute; top: .45rem; right: .45rem; display: flex; pointer-events: none; } .attachment-card-badge { flex: 0 0 auto; min-width: 4.6rem; padding: .55rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--bg) 78%, var(--border)); color: color-mix(in srgb, var(--text-soft) 92%, var(--text)); font-size: 1em; font-weight: 700; text-align: center; letter-spacing: .02em; } .attachment-card-meta { min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .attachment-card-name, .attachment-card-action { color: var(--text); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; } .attachment-card-name { font-size: 1em; font-weight: 700; word-break: break-word; } .attachment-card-size { color: var(--text-soft); font-size: 1em; } .attachment-card-action { margin-left: auto; white-space: nowrap; font-size: 1em; font-weight: 600; } .attachment-card .code-block-delete { pointer-events: auto; opacity: 0; } .attachment-card:hover .code-block-delete, .attachment-card.is-active .code-block-delete, .attachment-card.ProseMirror-selectednode .code-block-delete, .attachment-card .code-block-delete:focus { opacity: 1; } /* Notes de bas de page dans l'éditeur (décorations) */ .fn-ref { vertical-align: super; font-size: .72em; font-weight: 600; color: var(--accent); padding: 0 1px; } .fn-def { font-size: .88em; color: var(--text-soft); border-left: 2px solid var(--border); padding-left: .8em; } .fn-section-gap { display: block; height: 4.5em; pointer-events: none; } .fn-def-first { margin-top: 0; padding-top: 0; } .fn-backref { margin-left: .45rem; border: 0; padding: 0; background: transparent; color: var(--accent); font: inherit; line-height: 1; cursor: pointer; } .code-block-wrap { position: relative; margin: 1em 0; } .code-block-controls { position: absolute; top: .45rem; left: .45rem; right: .45rem; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .code-block-pill { display: inline-flex; align-items: center; margin-left: auto; pointer-events: auto; border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .12s ease, background .12s ease; } .code-block-delete, .code-block-lang, .code-copy, .code-block-menu-item { border: 0; background: transparent; color: var(--text-soft); font-size: .74rem; cursor: pointer; } .code-copy { pointer-events: auto; } .code-block-delete { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; /* centre l'icône corbeille */ border-radius: 999px; pointer-events: auto; opacity: 0; transition: opacity .12s ease, background .12s ease; } .code-block-lang, .code-copy { padding: .22rem .52rem; display: inline-flex; align-items: center; gap: .3rem; } .code-block-lang { font-family: var(--mono); text-transform: lowercase; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 1.1rem; border-right: 1px solid color-mix(in srgb, var(--border) 92%, transparent); } .code-block-controls > .code-copy { margin-left: auto; border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); border-radius: 999px; padding: .22rem .52rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .12s ease, background .12s ease; } .code-block-wrap:hover .code-block-delete, .code-block-wrap:hover .code-block-pill, .code-block-wrap:hover .code-block-controls > .code-copy, .math-block-wrap:hover .code-block-delete, .code-block-wrap.is-active .code-block-delete, .code-block-wrap.is-active .code-block-pill, .code-block-wrap.is-active .code-block-controls > .code-copy, .math-block-wrap.is-active .code-block-delete, .code-block-lang:focus, .code-copy:focus, .code-block-delete:focus { opacity: 1; } .code-copy:hover, .code-block-lang:hover, .code-block-delete:hover, .code-block-menu-item:hover { background: var(--accent-soft); color: var(--text); } .code-block-wrap pre { padding-top: 2.2rem; } .code-block-wrap.ProseMirror-selectednode pre, .code-block-wrap.is-active pre { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } .math-block-wrap.is-active .math-block-node, .math-block-wrap.ProseMirror-selectednode .math-block-node { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } .code-block-menu { position: absolute; top: 2.2rem; left: .45rem; z-index: 5; min-width: 150px; padding: .25rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); box-shadow: var(--shadow); } .code-block-menu-item { width: 100%; display: flex; align-items: center; gap: .45rem; padding: .4rem .5rem; border-radius: 8px; text-align: left; } .code-block-menu-item.danger { color: var(--danger); } .math-block-wrap { position: relative; margin: 1em 0; } .math-block, .math-block-node { margin: 1.2em 0; overflow-x: auto; } .math-inline-node { display: inline-flex; align-items: center; max-width: 100%; padding: .08rem .28rem; border: 1px solid transparent; border-radius: 6px; background: color-mix(in srgb, var(--accent-soft) 86%, transparent); cursor: pointer; } .math-block-node { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg-soft) 92%, transparent); cursor: pointer; } .math-block-node:hover, .math-inline-node:hover { border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); } .katex-display { margin: 0; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-title.class_, .hljs-title.function_ { color: #c792ea; } .hljs-string, .hljs-title, .hljs-section, .hljs-attribute { color: #ecc48d; } .hljs-comment, .hljs-quote { color: #7f8c98; font-style: italic; } .hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable { color: #f78c6c; } .hljs-built_in, .hljs-type, .hljs-tag, .hljs-name { color: #82aaff; } .hljs-meta, .hljs-doctag { color: #89ddff; } /* --- Menu slash « / » ---------------------------------------------------- */ .slash-menu { position: fixed; z-index: 1000; min-width: 220px; max-height: 320px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: .3rem; } .slash-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: .4rem .5rem; border-radius: 6px; font-size: .9rem; cursor: pointer; } .slash-item:hover, .slash-item.active { background: var(--accent-soft); } .slash-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; color: var(--text-soft); } /* --- Modale -------------------------------------------------------------- */ dialog { border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem; background: var(--bg); color: var(--text); box-shadow: var(--shadow); width: min(380px, 90vw); } dialog::backdrop { background: rgba(0,0,0,.35); } #prompt-form h3 { margin: 0 0 .8rem; } #prompt-input { width: 100%; } dialog menu { display: flex; justify-content: flex-end; gap: .5rem; margin: 1rem 0 0; padding: 0; } dialog menu button { padding: .45rem .9rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); } /* Le bouton primaire est 1er dans le DOM (Entrée), mais affiché à droite. */ dialog menu button[value="ok"] { order: 2; background: var(--accent); color: var(--on-accent); border-color: var(--accent); } dialog menu button[value="cancel"] { order: 1; } .confirm-message { margin: .2rem 0 0; color: var(--text-soft); white-space: pre-line; } .confirm-dialog #confirm-ok.danger { background: var(--danger); color: #fff; border-color: transparent; } .muted { color: var(--text-soft); font-weight: 400; } .link-btn { background: none; border: none; color: var(--accent); padding: 0; font-size: .82rem; text-decoration: underline; cursor: pointer; } /* Modale image */ .img-dialog { width: min(540px, 92vw); } #img-form h3 { margin: 0 0 1rem; } .img-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .img-field { display: flex; flex-direction: column; gap: .4rem; } .img-label { font-size: .82rem; color: var(--text-soft); font-weight: 600; } .img-prev { width: 100%; height: 110px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-soft); padding: 4px; } .img-prev-dark { background: #1e1e1e; } .img-field input[type="file"] { font-size: .8rem; color: var(--text-soft); } .img-asset-picker { position: relative; } .img-asset-field { display: grid; gap: .3rem; font-size: .8rem; color: var(--text-soft); } .img-asset-field input { width: 100%; min-height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 0 .75rem; } .img-asset-results { position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: 4; display: grid; gap: .35rem; max-height: 180px; overflow: auto; padding: .35rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); } .img-asset-result { width: 100%; text-align: left; display: grid; gap: .08rem; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-soft) 82%, transparent); color: var(--text); } .img-asset-result strong { font-size: .88rem; line-height: 1.25; word-break: break-word; } .img-asset-result span { color: var(--text-soft); font-size: .74rem; line-height: 1.3; word-break: break-word; } .img-asset-result:hover, .img-asset-result.active { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--bg-soft)); } .img-caption-field { display: grid; gap: .3rem; font-size: .85rem; color: var(--text-soft); margin-top: 1rem; } #img-caption { width: 100%; } .img-full-field { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; font-size: .85rem; color: var(--text); cursor: pointer; } .img-full-field input { width: auto; margin: 0; } .img-dialog.busy menu button#img-ok { opacity: .6; } .doclink-dialog { width: min(720px, 92vw); } .doclink-form { display: grid; gap: .9rem; } .doclink-field { display: grid; gap: .35rem; font-size: .85rem; color: var(--text-soft); } .doclink-field input { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--bg-soft); color: var(--text); padding: 0 .9rem; } .doclink-results { display: grid; gap: .45rem; max-height: min(52vh, 440px); overflow: auto; } .doclink-result { width: 100%; text-align: left; display: grid; gap: .12rem; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--bg-soft) 78%, transparent); color: var(--text); cursor: pointer; } .doclink-result span { color: var(--text-soft); font-size: .8rem; font-family: var(--mono); word-break: break-word; } .doclink-result:hover, .doclink-result.active { border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-border)); background: color-mix(in srgb, var(--accent) 10%, var(--bg-soft)); } .doclink-empty { margin: -.2rem 0 0; color: var(--text-soft); font-size: .85rem; } /* --- Admin (coque frosted) ---------------------------------------------- */ .admin-shell-bar { left: 50vw; width: min(1040px, calc(100vw - 2 * var(--gap))); } .admin-shell-bar .topbar-title { gap: 1rem; } .admin-shell-bar .pill-btn { cursor: pointer; } .admin-shell-bar .theme-icon-sun { display: none; } [data-theme="dark"] .admin-shell-bar .theme-icon-moon { display: none; } [data-theme="dark"] .admin-shell-bar .theme-icon-sun { display: block; } .admin-main { max-width: 720px; margin: 0 auto; padding: calc(var(--gap) + var(--bar-h) + var(--gap)) 1rem 3rem; display: grid; gap: 1.2rem; } .admin-assets-main { max-width: 1100px; } .card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-panel); padding: 1.5rem; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); } .card h2 { margin-top: 0; } /* Champs en pleine largeur de la carte (desktop). */ .admin-main form { display: grid; gap: .9rem; } .admin-main label { display: grid; gap: .3rem; font-size: .85rem; color: var(--text-soft); } .admin-main input, .admin-main select, .admin-main textarea { width: 100%; } .admin-main textarea { resize: vertical; min-height: 90px; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } #members-table { width: 100%; border-collapse: collapse; } #members-table th, #members-table td { border-bottom: 1px solid var(--glass-border); padding: .5rem; text-align: left; } #assets-table { width: 100%; border-collapse: collapse; table-layout: fixed; } #assets-table th, #assets-table td { border-bottom: 1px solid var(--glass-border); padding: .65rem .5rem; text-align: left; vertical-align: top; } #assets-table th:nth-child(1), #assets-table td:nth-child(1) { width: 44%; } #assets-table th:nth-child(2), #assets-table td:nth-child(2) { width: 14%; white-space: nowrap; } #assets-table th:nth-child(3), #assets-table td:nth-child(3) { width: 10%; white-space: nowrap; } #assets-table th:nth-child(4), #assets-table td:nth-child(4) { width: 20%; white-space: nowrap; } #assets-table th:nth-child(5), #assets-table td:nth-child(5) { width: 12%; white-space: nowrap; } .admin-assets-actions { display: flex; gap: .6rem; margin: 1rem 0 1.05rem; flex-wrap: wrap; } .admin-assets-summary { margin: 0 0 .85rem; color: var(--text-soft); } .admin-asset-identity { display: flex; align-items: center; gap: .75rem; min-width: 0; } .admin-asset-identity > div { min-width: 0; } .admin-asset-thumbnail, .admin-asset-badge { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; overflow: hidden; padding: 0; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--bg-soft); } .admin-asset-thumbnail { cursor: zoom-in; } .admin-asset-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .admin-asset-badge { color: var(--text-soft); font: 600 .65rem var(--mono); } .admin-asset-file { font-weight: 600; color: var(--text); word-break: break-word; } .admin-asset-path { margin-top: .14rem; color: var(--text-soft); font-size: .82rem; font-family: var(--mono); word-break: break-word; } .admin-asset-link { display: inline-flex; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .asset-lightbox { cursor: default; overflow: hidden; } .asset-lightbox figure { width: 100%; height: 100%; min-height: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .8rem; justify-items: center; } .asset-lightbox img { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; cursor: zoom-out; } .asset-lightbox figcaption { color: #fff; font-size: .82rem; } .asset-lightbox > button { position: fixed; top: 20px; right: 20px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(0,0,0,.25); color: #fff; font-size: 1.5rem; } button.danger { background: var(--danger); color: #fff; border: none; border-radius: var(--radius); padding: .35rem .7rem; } /* --- Admin : adaptation mobile ------------------------------------------ */ @media (max-width: 720px) { .admin-main { padding-left: var(--gap); padding-right: var(--gap); gap: 1rem; } .card { padding: 1.1rem; } .admin-main h2 { font-size: 1.15rem; } #members-table { min-width: 460px; } /* défile horizontalement dans .table-wrap */ #assets-table { min-width: 780px; } } /* --- Commentaires ------------------------------------------------------- */ .pill-btn { position: relative; } .badge { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: .62rem; font-weight: 700; display: grid; place-items: center; line-height: 1; } /* Surlignage d'un extrait commenté (lecture + décoration éditeur) */ .comment-hl { background: color-mix(in srgb, #f5c518 36%, transparent); border-radius: 2px; cursor: pointer; padding: .02em 0; } [data-theme="dark"] .comment-hl { background: color-mix(in srgb, #f5c518 26%, transparent); color: inherit; } .comment-hl.flash { animation: comment-flash 1.2s ease; } @keyframes comment-flash { 0%, 100% { background: color-mix(in srgb, #f5c518 36%, transparent); } 30% { background: color-mix(in srgb, #f5c518 85%, transparent); } } /* Bouton flottant « Commenter » près de la sélection */ .comment-fab { position: fixed; z-index: 1000; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border-radius: 999px; border: none; background: var(--accent); color: var(--on-accent); font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.22); } .comment-fab .ic { stroke: var(--on-accent); } /* Panneau des commentaires (flottant à droite, opaque comme la sidebar) */ .comments-panel { position: fixed; z-index: 55; right: var(--gap); top: calc(var(--gap) + var(--bar-h) + var(--gap)); bottom: var(--gap); width: min(340px, 92vw); display: flex; flex-direction: column; overflow: hidden; background: var(--sidebar-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-panel); } .comments-head { display: flex; align-items: center; gap: .5rem; padding: 8px 12px; border-bottom: 1px solid var(--glass-border); } .comments-title { font-weight: 700; flex: 1; } .comments-list { overflow-y: auto; padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .comments-empty { color: var(--text-soft); font-size: .85rem; padding: .5rem 12px 12px; } .comment-composer { padding: 10px 12px; border-bottom: 1px solid var(--glass-border); display: grid; gap: .5rem; } .composer-quote { font-size: .82rem; color: var(--text-soft); font-style: italic; border-left: 2px solid var(--accent); padding-left: .5rem; } .comment-composer textarea, .thread-reply textarea { width: 100%; resize: vertical; padding: .5rem .6rem; font-family: inherit; font-size: .9rem; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--bg); color: var(--text); } .composer-actions { display: flex; gap: .4rem; justify-content: flex-end; } .btn-accent { background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; padding: .4rem .8rem; font-weight: 600; font-size: .85rem; cursor: pointer; } .btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid var(--glass-border); border-radius: 8px; padding: .4rem .8rem; font-size: .85rem; cursor: pointer; } .comment-thread { border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px; background: var(--bg); } .comment-thread.resolved { opacity: .55; } .comment-thread.focus { border-color: var(--accent); } .thread-quote { display: block; width: 100%; text-align: left; background: var(--bg-soft); border: none; border-radius: 8px; padding: .4rem .5rem; font-size: .8rem; color: var(--text-soft); font-style: italic; cursor: pointer; margin-bottom: .5rem; } .thread-msg { margin-bottom: .5rem; } .msg-head { display: flex; gap: .5rem; align-items: baseline; } .msg-author { font-weight: 600; font-size: .85rem; } .msg-time { font-size: .72rem; color: var(--text-soft); } .msg-text { font-size: .9rem; white-space: pre-wrap; } .thread-actions { display: flex; gap: .3rem; flex-wrap: wrap; } .thread-act { display: inline-flex; align-items: center; gap: .25rem; background: transparent; border: none; color: var(--text-soft); font-size: .78rem; cursor: pointer; padding: .2rem .35rem; border-radius: 6px; } .thread-act:hover { background: var(--hover); color: var(--text); } .thread-act.danger:hover { color: var(--danger); } .thread-reply { margin-top: .5rem; display: flex; flex-direction: column; gap: .4rem; } .thread-reply .btn-accent { align-self: flex-end; } /* --- Flat document workspace ------------------------------------------ */ .workspace-page { min-height: 100vh; background: var(--bg); color: var(--text); } .workspace-header-actions{display:flex;align-items:center;gap:2px}.workspace-main{max-width:1480px;margin:0 auto;padding:calc(var(--gap) + var(--bar-h) + 22px) clamp(20px,4vw,64px) 80px}.workspace-kicker{margin:0 0 9px;color:var(--text-soft);text-transform:uppercase;font-size:.68rem;font-weight:700;letter-spacing:.14em} .workspace-primary,.workspace-secondary{border-radius:10px;padding:10px 15px;font:inherit;cursor:pointer;border:1px solid transparent}.workspace-primary{background:var(--text);color:var(--bg);font-weight:650}.workspace-secondary{background:var(--page-bg);color:var(--text);border-color:var(--border)} .workspace-tabs{display:flex;align-items:flex-end;gap:28px;margin-top:0;border-bottom:1px solid var(--border)}.workspace-tab{appearance:none;border:0;background:none;color:var(--text-soft);padding:0 0 14px;font:inherit;font-size:.88rem;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}.workspace-tab span{margin-left:5px;font-size:.7rem;padding:2px 6px;border-radius:20px;background:var(--hover)}.workspace-tab.active{color:var(--text);border-color:var(--text)}.workspace-tab-link{margin-left:auto}.workspace-view{display:none}.workspace-view.active{display:block} .workspace-toolbar{display:flex;align-items:center;gap:10px;padding:16px 0 12px}.workspace-toolbar select,.workspace-search{height:39px;border:1px solid var(--border);background:var(--page-bg);color:var(--text);border-radius:9px}.workspace-toolbar select{padding:0 34px 0 12px}.workspace-search{min-width:min(340px,40vw);display:flex;align-items:center;gap:7px;padding:0 11px}.workspace-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:inherit}.workspace-sort{margin-left:auto;color:var(--text-soft);font-size:.78rem}.workspace-new-inline{white-space:nowrap;height:39px;padding-top:0;padding-bottom:0} .workspace-table-wrap{border:1px solid var(--border);border-radius:13px;overflow:hidden;background:var(--page-bg);box-shadow:0 8px 35px rgba(0,0,0,.025)}.workspace-table{width:100%;border-collapse:collapse;table-layout:fixed}.workspace-table th{text-align:left;padding:11px 16px;color:var(--text-soft);background:var(--bg-soft);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:650;border-bottom:1px solid var(--border)}.workspace-table th:nth-child(1){width:42%}.workspace-table th:nth-child(2){width:17%}.workspace-table th:nth-child(3){width:15%}.workspace-table th:nth-child(4){width:22%}.workspace-table th:nth-child(5){width:64px}.workspace-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle}.workspace-table th:last-child,.workspace-table td:last-child{padding-left:12px;padding-right:18px;text-align:center}.workspace-table tr:last-child td{border-bottom:0}.workspace-table tbody tr:hover{background:var(--bg-soft)} .doc-name{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}.doc-name>span:last-child{display:grid;min-width:0}.doc-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}.doc-name small,.cell-updated small{color:var(--text-soft);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.cell-updated>strong,.cell-updated>small{display:block}.doc-type-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:8px;color:white;font-style:normal;font-size:.72rem} .cell-select{width:100%;border:1px solid transparent;background:transparent;color:var(--text);border-radius:7px;padding:7px 8px}.cell-select:not(:disabled):hover{border-color:var(--border);background:var(--bg)}.status-pill{border:0;border-radius:20px;padding:6px 9px;font-size:.72rem;cursor:pointer}.status-pill.public{background:rgba(49,170,126,.12);color:#24915f}.status-pill.draft{background:var(--hover);color:var(--text-soft)}.cell-updated strong{font-size:.8rem;font-weight:550}.row-open{color:var(--text-soft);text-decoration:none;font-size:1.2rem}.workspace-empty{padding:70px 20px;text-align:center;color:var(--text-soft)} .workspace-split{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(420px,1.28fr);gap:20px;margin-top:26px;align-items:start}.workspace-card{border:1px solid var(--border);border-radius:14px;background:var(--page-bg);padding:24px}.workspace-card h2,.workspace-dialog h2{margin:0 0 22px;letter-spacing:-.035em;font-size:1.35rem}.workspace-form{display:grid;gap:15px}.workspace-form label,.workspace-dialog label{display:grid;gap:7px;color:var(--text-soft);font-size:.76rem}.workspace-form input,.workspace-form select,.workspace-form textarea,.workspace-dialog input{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:9px;padding:10px 11px;font:inherit}.workspace-form textarea{resize:vertical}.workspace-note{color:var(--text-soft);font-size:.75rem;margin:0;line-height:1.5} .workspace-record{position:relative;padding:15px 2px;border-bottom:1px solid var(--border);display:grid;gap:7px}.workspace-record:last-child{border-bottom:0}.workspace-record small{color:var(--text-soft);font-size:.72rem}.path-add{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.path-actions{display:flex;gap:8px}.path-steps{display:grid;gap:7px}.path-step{display:grid;grid-template-columns:25px 1fr auto;gap:9px;align-items:center;padding:9px;background:var(--bg-soft);border-radius:8px}.path-step>span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--page-bg);font-size:.7rem}.path-step strong{font-size:.8rem}.path-step button,.record-actions button{background:none;border:0;color:var(--text-soft);cursor:pointer}.path-empty,.workspace-empty-inline{color:var(--text-soft);font-size:.8rem;padding:16px 0}.path-record{grid-template-columns:1fr auto}.path-record p{margin:6px 0;color:var(--text-soft);font-size:.8rem}.record-actions{display:flex;gap:5px} .workspace-dialog{border:1px solid var(--border);border-radius:15px;background:var(--page-bg);color:var(--text);width:min(460px,calc(100vw - 32px));padding:26px}.workspace-dialog::backdrop{background:rgba(0,0,0,.38);backdrop-filter:blur(3px)}.workspace-dialog menu{padding:20px 0 0;margin:0;display:flex;justify-content:flex-end;gap:8px}.workspace-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:100;background:#1e1e1e;color:white;padding:10px 15px;border-radius:9px;box-shadow:0 12px 40px rgba(0,0,0,.24);font-size:.82rem} .editor-no-sidebar .sidebar{display:none!important}.editor-no-sidebar .main{padding-left:var(--gap)}.editor-no-sidebar .topbar{left:50vw;width:min(1040px,calc(100vw - 2 * var(--gap)))} @media(max-width:850px){.admin-shell-bar .save-state{display:none}.workspace-main{padding-top:calc(var(--gap) + var(--bar-h) + 18px)}.workspace-tabs{overflow-x:auto;gap:22px}.workspace-toolbar{flex-wrap:wrap}.workspace-search{width:100%;min-width:100%}.workspace-sort{display:none}.workspace-new-inline{margin-left:auto}.workspace-table{min-width:760px}.workspace-table-wrap{overflow-x:auto}.workspace-split{grid-template-columns:1fr}} /* --- Public knowledge graph ------------------------------------------- */ .public-graph-page{margin:0;overflow:hidden;background:#101010;color:#d7d7d4}.public-graph-shell{height:100vh;display:grid;grid-template-columns:280px 1fr;background:#101010}.public-graph-sidebar{background:#191919;border-right:1px solid #2b2b2b;padding:20px 13px;display:flex;flex-direction:column;min-height:0;z-index:5}.public-graph-brand{display:flex;align-items:center;color:#ededeb;text-decoration:none;font-size:.9rem;font-weight:600;padding:11px 9px 24px}.public-sidebar-label{padding:0 13px;margin:8px 0 7px;color:#6f6f6c;text-transform:uppercase;font-size:.62rem;letter-spacing:.13em;font-weight:700}.public-paths{min-height:0;overflow:auto}.public-path{width:100%;border:0;background:transparent;color:#aaa9a6;border-radius:12px;padding:12px 13px;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;margin-bottom:3px}.public-path:hover{background:#222;color:#ddd}.public-path.active{background:#292929;color:#f1f1ef}.public-path>span:last-child{display:grid}.public-path strong{font-size:.82rem;font-weight:550}.path-orbit{font-size:1.2rem;color:#85817f}.public-path.active .path-orbit{color:#e5e0dc}.public-graph-sidebar-bottom{margin-top:auto;padding:18px 12px 3px}.public-legend{display:grid;gap:4px;font-size:.72rem;color:#aaa9a6}.public-legend button{display:flex;align-items:center;gap:9px;width:100%;padding:5px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:opacity .2s ease,color .2s ease}.public-legend button:hover,.public-legend button.active{color:var(--pg-text)}.public-legend.has-filter button:not(.active){opacity:.32}.public-legend i{width:8px;height:8px;border-radius:50%;flex:0 0 auto} .public-graph-canvas{position:relative;min-width:0;overflow:hidden;background:#101010}.public-graph-top{position:absolute;z-index:3;top:0;left:0;right:0;padding:26px 30px;display:flex;justify-content:flex-end;pointer-events:none;background:linear-gradient(#101010 0%,rgba(16,16,16,.78) 65%,transparent)}.public-graph-controls{display:flex;align-items:center;gap:7px;pointer-events:auto}.public-graph-controls label{height:38px;display:flex;align-items:center;gap:7px;border:1px solid #2c2c2c;border-radius:9px;background:#181818;padding:0 10px;color:#777}.public-graph-controls svg{display:block;width:16px;height:16px;flex:0 0 auto}.public-graph-controls input{width:140px;background:none;border:0;outline:0;color:#ddd;padding:8px 0}.public-graph-controls button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #2c2c2c;border-radius:9px;background:#181818;color:#999}.public-graph-canvas>svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.public-graph-canvas>svg:active{cursor:grabbing}.public-edges line{stroke:#343432;stroke-width:1;opacity:.66}.public-edges line.wikilink{stroke-dasharray:5 6;opacity:.42}.public-node{cursor:pointer}.public-node .node-hit{fill:transparent}.public-node text{font:12px var(--sans);fill:#858582;transition:fill .15s}.public-node:hover text,.public-node.selected text{fill:#e3e3df}.public-node circle:not(.node-hit){transition:r .15s;filter:drop-shadow(0 0 6px rgba(255,255,255,.08))}.public-node:hover circle:not(.node-hit){r:7}.public-graph-hint{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);font-size:.65rem;color:#4f4f4d;pointer-events:none}.public-graph-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;color:#767672}.public-graph-empty h2{color:#bbb;margin:0;font-size:1.15rem}.public-graph-empty p{font-size:.8rem;max-width:340px} .public-reader{position:absolute;z-index:12;right:0;top:0;width:min(620px,48vw);height:100vh;background:#f7f6f2;color:#292927;box-shadow:-24px 0 70px rgba(0,0,0,.48);overflow:auto;padding:70px clamp(34px,5vw,72px)}.public-reader-close{position:absolute;right:22px;top:20px;width:34px;height:34px;border:1px solid #ddd;border-radius:50%;background:transparent;color:#777;font-size:1.2rem}.public-reader-head{padding-bottom:26px;border-bottom:1px solid #deddd8;margin-bottom:28px}.public-reader-head>span{display:inline-block;padding:5px 8px;border-radius:6px;color:white;text-transform:uppercase;font-size:.6rem;letter-spacing:.09em}.public-reader-head h2{font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.055em;line-height:1.02;margin:16px 0 12px}.public-reader-head p{color:#888;font-size:.75rem;margin:0}.public-reader .reader{color:#292927}.public-reader-loading{color:#888} @media(max-width:760px){.public-graph-shell{grid-template-columns:1fr}.public-graph-sidebar{position:absolute;left:10px;top:10px;width:210px;height:auto;max-height:50vh;border:1px solid #303030;border-radius:13px;padding:8px}.public-graph-brand{padding:8px}.public-sidebar-label,.public-graph-sidebar-bottom{display:none}.public-path{padding:8px}.public-graph-top{padding:20px;justify-content:flex-end}.public-graph-top>div:first-child{display:none}.public-graph-controls input{width:100px}.public-reader{width:100vw;padding:64px 25px}} /* Public surface follows the operating-system appearance. */ .public-graph-page { --pg-bg: #ffffff; --pg-sidebar: #ffffff; --pg-panel: #ffffff; --pg-text: #202020; --pg-muted: #777777; --pg-faint: #aaaaaa; --pg-border: #e3e3e3; --pg-active: #f1f1f1; --pg-edge: #c9c9c9; --pg-grid-dot: #d8d8d8; --bg: var(--pg-bg); --page-bg: var(--pg-bg); --bg-soft: var(--pg-sidebar); --border: var(--pg-border); --text: var(--pg-text); --text-soft: var(--pg-muted); --fig-bg: #f7f7f7; --fig-dot: var(--pg-border); background: var(--pg-bg); color: var(--pg-text); } .public-graph-page .public-graph-shell { grid-template-columns: calc(280px + 2 * var(--gap)) 1fr; background: var(--pg-bg); } .public-graph-page .public-graph-sidebar { margin: var(--gap); min-height: 0; overflow: hidden; background: var(--pg-sidebar); border: 1px solid var(--pg-border); border-radius: var(--radius-panel); box-shadow: 0 10px 35px rgba(0, 0, 0, .06); } .public-graph-page .public-graph-brand { color: var(--pg-text); } .public-graph-page .public-sidebar-label { color: var(--pg-muted); } .public-graph-page .public-path { color: var(--pg-muted); transition: color .18s ease, background .18s ease; } .public-graph-page .public-path:hover { color: var(--pg-text); background: color-mix(in srgb, var(--pg-active) 60%, transparent); } .public-graph-page .public-path.active { color: var(--pg-text); background: var(--pg-active); } .public-graph-page .public-path.active .path-orbit { color: var(--pg-text); } .public-graph-page .public-legend { color: var(--pg-muted); } .public-about-link { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 15px 0 3px; border-top: 1px solid var(--pg-border); color: var(--pg-muted); text-decoration: none; font-size: .74rem; transition: color .18s ease; } .public-about-link:hover { color: var(--pg-text); } .public-about-link svg { flex: 0 0 auto; } .doc-type-icon.notion { background: #e6574d; } .doc-type-icon.method { background: #d58a32; } .doc-type-icon.visualization { background: #32aaa5; } .doc-type-icon.calculation { background: #8575d2; } .public-graph-page .public-legend .notion { background: #e6574d; } .public-graph-page .public-legend .method { background: #d58a32; } .public-graph-page .public-legend .visualization { background: #32aaa5; } .public-graph-page .public-legend .calculation { background: #8575d2; } .public-graph-page .public-graph-canvas { background: var(--pg-bg); } .public-graph-page .public-graph-top { background: transparent; } .public-graph-page .public-grid-background { pointer-events: none; } .public-graph-page .public-grid-dot { fill: var(--pg-grid-dot); } .public-graph-page .public-graph-controls label, .public-graph-page .public-graph-controls button { color: var(--pg-muted); background: var(--pg-panel); border-color: var(--pg-border); } .public-graph-page .public-graph-controls label { border-radius: var(--radius-pill); } .public-graph-page .public-graph-controls button { border-radius: 50%; } .public-graph-page .public-graph-controls input { color: var(--pg-text); } .public-graph-page .public-edges line { stroke: var(--pg-edge); opacity: .75; transition: opacity .32s ease; } .public-graph-page .public-edges line.wikilink { opacity: .48; } .public-graph-page .public-edges line.is-hidden { opacity: 0; pointer-events: none; } .public-graph-page .public-node { opacity: 1; transition: opacity .32s ease; outline: none; } .public-graph-page .public-node.is-hidden { opacity: 0; pointer-events: none; } .public-graph-page .public-node.is-type-muted:not(.is-hidden) { opacity: .2; } .public-graph-page .public-node .node-hit { fill: transparent; } .public-graph-page .public-node .node-label { fill: var(--pg-muted); transition: fill .16s ease; } .public-graph-page .public-node:hover .node-label, .public-graph-page .public-node:focus .node-label { fill: var(--pg-text); } .public-graph-page .public-node:focus .node-dot { stroke: var(--pg-text); stroke-width: 2; } .public-graph-page .node-step-caption { opacity: 0; pointer-events: none; transition: opacity .24s ease; } .public-graph-page .path-mode .public-node[data-step] .node-dot { r: 9; transition: r .3s ease; } .public-graph-page .path-mode .public-node[data-step] .node-label { transform: translate(5px, 3px); fill: var(--pg-text); font-weight: 600; } .public-graph-page .path-mode .public-node[data-step] .node-step-caption { opacity: 1; fill: var(--pg-muted); font: 9px var(--sans); text-transform: uppercase; letter-spacing: .08em; } .public-graph-page .public-path-edges .path-guide { stroke: var(--pg-edge); stroke-width: 2; stroke-linecap: round; opacity: 1; transition: opacity .32s ease; } .public-graph-page .public-path-edges .path-guide.is-hidden { opacity: 0; } .public-graph-page .public-graph-hint { color: var(--pg-faint); } .public-graph-page .public-graph-empty { color: var(--pg-muted); } .public-graph-page .public-graph-empty h2 { color: var(--pg-text); } .public-reader { --public-reader-column: min(760px, calc(100vw - 40px)); position: fixed; inset: 0; z-index: 100; width: auto; height: 100vh; overflow-y: auto; padding: 0; background: var(--pg-bg); color: var(--pg-text); box-shadow: none; animation: public-reader-in .24s ease-out both; } @keyframes public-reader-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .public-reader-bar { position: fixed; top: var(--gap); left: 50%; z-index: 102; width: var(--public-reader-column); height: var(--bar-h); transform: translateX(-50%); display: grid; grid-template-columns: 37px 1fr 37px; align-items: center; padding: 0 7px; background: color-mix(in srgb, var(--pg-bg) 88%, transparent); border: 1px solid var(--pg-border); border-radius: var(--radius-pill); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } .public-reader-close { position: static; width: 37px; height: 37px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--pg-text); cursor: pointer; transition: background .12s ease, border-color .12s ease; } .public-reader-close:hover { background: var(--pg-active); border-color: var(--pg-border); } .public-reader-brand { grid-column: 2; justify-self: center; color: var(--pg-text); text-decoration: none; font-size: .74rem; font-weight: 600; letter-spacing: .02em; } .public-reader-content { width: var(--public-reader-column); margin: 0 auto; padding: calc(var(--gap) + var(--bar-h) + clamp(42px, 7vw, 82px)) 0 100px; } .public-reader-head { padding-bottom: 0; margin-bottom: 38px; border-bottom: 0; } .public-reader-head h1 { margin: 18px 0 0; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: normal; font-weight: 650; } .public-reader-head p { color: var(--pg-muted); } .public-reader-head .public-reader-updated { margin: .8rem 0 0; font-size: .78rem; line-height: 1.4; } .public-reader-head > span.notion { background: #e6574d; } .public-reader-head > span.method { background: #d58a32; } .public-reader-head > span.visualization { background: #32aaa5; } .public-reader-head > span.calculation { background: #8575d2; } .public-reader .reader { color: var(--pg-text); } .public-reader .prose { max-width: none; padding-right: 0; padding-left: 0; } .public-about-page .public-reader-head h1 { margin-top: 0; } .public-reader-loading, .public-reader-error { color: var(--pg-muted); } @media (prefers-color-scheme: dark) { .public-graph-page { --pg-bg: #111111; --pg-sidebar: #111111; --pg-panel: #181818; --pg-text: #ebebeb; --pg-muted: #949494; --pg-faint: #555555; --pg-border: #303030; --pg-active: #252525; --pg-edge: #3d3d3d; --pg-grid-dot: #2b2b2b; --fig-bg: #181818; --fig-dot: #333333; } .public-graph-page .dual-image .img-light { display: none; } .public-graph-page .dual-image .img-dark { display: block; } .public-reader .prose blockquote, .public-reader .callout { color: var(--pg-text); } } @media (max-width: 760px) { .public-graph-page .public-graph-top > .public-graph-controls { display: flex; } .public-graph-page .public-graph-shell { grid-template-columns: 1fr; } .public-graph-page .public-graph-sidebar { left: var(--gap); top: var(--gap); width: min(240px, calc(100vw - 2 * var(--gap))); margin: 0; border-color: var(--pg-border); background: var(--pg-sidebar); } .public-graph-page .public-graph-sidebar-bottom { display: block; padding: 8px; } .public-graph-page .public-legend { display: none; } .public-graph-page .public-about-link { margin-top: 0; padding: 8px; border-top: 0; } .public-reader { width: auto; padding: 0; } .public-reader-bar { grid-template-columns: 37px 1fr 37px; } .public-reader-brand { grid-column: 2; } .public-reader-content { padding-top: calc(var(--gap) + var(--bar-h) + 38px); } }