/* ======================================================================= write.mlav.land — 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: #2f6f4f; --accent-soft: #e3f0e9; --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) */ } [data-theme="dark"] { --bg: #1e1e1e; --bg-soft: #262626; --bg-sidebar: #202020; --border: #3a3a3a; --text: #e6e6e6; --text-soft: #a0a0a0; --accent: #6cc59a; --accent-soft: #243a30; --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) */ } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } 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; } /* --- Login --------------------------------------------------------------- */ .login-page { display: grid; place-items: center; background: var(--bg-soft); } .login-card { background: var(--bg); padding: 2.5rem; border-radius: 12px; box-shadow: var(--shadow); width: min(360px, 90vw); text-align: center; border: 1px solid var(--border); } .login-card h1 { margin: 0; font-size: 1.6rem; } .login-card .subtitle { color: var(--text-soft); margin-top: .25rem; } .login-card form { display: grid; gap: 1rem; margin-top: 1.5rem; text-align: left; } .login-card label { display: grid; gap: .3rem; font-size: .85rem; color: var(--text-soft); } .login-card input, .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; } .login-card button, .admin-main button[type="submit"] { padding: .65rem; border: none; border-radius: var(--radius); background: var(--accent); color: #fff; 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); transition: left .18s ease, width .18s ease; } /* Sidebar réduite : la navbar se recentre sur la pleine largeur. */ #app.sidebar-collapsed .topbar { left: 50vw; width: min(880px, calc(100vw - 2 * var(--gap))); } .topbar-title { display: flex; align-items: baseline; 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; } .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); } /* 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); transition: width .18s ease, height .18s ease, border-radius .18s ease; } .sidebar-head { display: flex; align-items: center; gap: .25rem; padding: 8px; flex: 0 0 auto; } .sidebar-tools { display: flex; gap: .1rem; margin-left: auto; } .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 .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; } .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); transition: padding-left .18s ease; } #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; } .lock-banner { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; font-size: .85rem; border-radius: 12px; margin: 0 0 1rem; border: 1px solid var(--glass-border); } .lock-banner.locked { background: #fdecea; color: #8a2018; border-color: #f3c6c0; } .lock-banner.free { background: var(--bg-soft); } .lock-banner.editing { background: var(--accent-soft); } [data-theme="dark"] .lock-banner.locked { background: #3a201e; color: var(--danger); border-color: #5a2c27; } .banner-text { flex: 1; display: flex; align-items: center; gap: .5rem; } .banner-ic { display: inline-grid; place-items: center; flex: 0 0 auto; } .banner-btn { border: 1px solid currentColor; background: transparent; color: inherit; padding: .25rem .7rem; border-radius: var(--radius-pill); font-weight: 600; font-size: .8rem; } /* 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); } .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 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; } .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); } .prose pre { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 1em; overflow: auto; } .prose pre code { background: none; border: none; padding: 0; } .prose img { max-width: 100%; border-radius: 6px; } .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: var(--bg-soft); } .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); border-top: 1px solid var(--border); margin-top: 2.5em; padding-top: 1em; } .footnote-ref a, a.footnote-backref { color: var(--accent); text-decoration: none; } /* Images dark/light */ .md-figure { margin: 1.2em 0; text-align: center; } .md-figure figcaption { font-size: .82rem; color: var(--text-soft); margin-top: .4em; } .dual-image .img-dark { display: none; } [data-theme="dark"] .dual-image .img-light { display: none; } [data-theme="dark"] .dual-image .img-dark { display: inline-block; } /* 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. */ border: 1px solid color-mix(in srgb, var(--cal, rgb(67,133,190)) 35%, transparent); border-left: 4px solid var(--cal, rgb(67,133,190)); background: color-mix(in srgb, var(--cal, rgb(67,133,190)) 10%, transparent); border-radius: 8px; padding: .7em .9em; 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); } /* 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; } /* --- 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: #fff; border-color: var(--accent); } dialog menu button[value="cancel"] { order: 1; } .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-caption-field { display: grid; gap: .3rem; font-size: .85rem; color: var(--text-soft); margin-top: 1rem; } #img-caption { width: 100%; } .img-dialog.busy menu button#img-ok { opacity: .6; } /* --- Admin (coque frosted) ---------------------------------------------- */ .admin-page .topbar { left: 50vw; width: min(880px, calc(100vw - 2 * var(--gap))); } .admin-main { max-width: 720px; margin: 0 auto; padding: calc(var(--gap) + var(--bar-h) + var(--gap)) 1rem 3rem; display: grid; gap: 1.2rem; } .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; } .admin-main form { display: grid; gap: .8rem; max-width: 360px; } .admin-main label { display: grid; gap: .3rem; font-size: .85rem; color: var(--text-soft); } #users-table { width: 100%; border-collapse: collapse; } #users-table th, #users-table td { border-bottom: 1px solid var(--glass-border); padding: .5rem; text-align: left; } button.danger { background: var(--danger); color: #fff; border: none; border-radius: var(--radius); padding: .35rem .7rem; }