/* Tanid v2 — thème sombre par défaut, jour et sépia en option (préférences lecteur en localStorage, classes posées sur par assets/js/app.js). */ :root { color-scheme: dark; --bg: #14161d; --bg-soft: #1d2029; --fg: #e8e6e3; --muted: #9b98a0; --accent: #c8a24b; --error: #e06c5c; --line: #2a2d38; --line2: #3a3d48; } html.theme-light { color-scheme: light; --bg: #f2efe9; --bg-soft: #fbf9f5; --fg: #26242e; --muted: #6f6a74; --accent: #8a6d2a; --error: #b03a2e; --line: #ddd6ca; --line2: #c9c2b4; } html.theme-sepia { color-scheme: light; --bg: #f0e3c9; --bg-soft: #f7ecd8; --fg: #463929; --muted: #77694f; --accent: #8a5a1f; --error: #a5382c; --line: #dccdaa; --line2: #c9b88f; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at top, var(--bg-soft), var(--bg) 70%); color: var(--fg); font-family: Georgia, 'Times New Roman', serif; } /* --- Barre de navigation --- */ .topnav { display: flex; align-items: baseline; justify-content: space-between; padding: .8rem 1.5rem; border-bottom: 1px solid var(--line); } .topnav a { color: var(--fg); text-decoration: none; } .topnav a:hover { color: var(--accent); } .topnav .brand { color: var(--accent); letter-spacing: .25rem; text-transform: uppercase; font-size: 1.1rem; } .nav-right { display: flex; gap: 1rem; font-size: .95rem; flex-wrap: wrap; } .nav-me { color: var(--muted); } .topnav .lang { color: var(--muted); border: 1px solid var(--line2); border-radius: .3rem; padding: 0 .4rem; font-size: .85rem; } /* --- Mise en page --- */ .page { max-width: 52rem; margin: 0 auto; padding: 2.5rem 1.5rem; } /* --- Vitrine --- */ .hero { max-width: 38rem; text-align: center; padding-top: 14vh; } .hero h1 { font-size: 3.5rem; margin: 0 0 .5rem; letter-spacing: .35rem; color: var(--accent); text-transform: uppercase; } .tagline { font-size: 1.3rem; font-style: italic; margin: 0 0 2rem; } .pitch { color: var(--muted); line-height: 1.7; margin: 0 0 2.5rem; } .status { display: inline-block; font-size: .85rem; letter-spacing: .1rem; text-transform: uppercase; color: var(--muted); border: 1px solid var(--muted); border-radius: 999px; padding: .4rem 1.2rem; } /* --- Formulaires et cartes --- */ .two-cols { display: flex; gap: 2rem; flex-wrap: wrap; } .card { flex: 1 1 18rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: .5rem; padding: 1.5rem; } .card h2 { margin-top: 0; color: var(--accent); font-size: 1.2rem; } label { display: block; margin-bottom: 1rem; color: var(--muted); font-size: .95rem; } input, textarea, select { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line2); border-radius: .3rem; font: inherit; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } textarea { line-height: 1.6; resize: vertical; } .btn { display: inline-block; background: var(--accent); color: #14161d; border: none; border-radius: .3rem; padding: .6rem 1.4rem; font: inherit; font-weight: bold; cursor: pointer; text-decoration: none; } .btn:hover { filter: brightness(1.1); } .error { color: var(--error); border: 1px solid var(--error); border-radius: .3rem; padding: .6rem 1rem; } /* --- Listes, badges, variantes de boutons --- */ .muted { color: var(--muted); } .muted a { color: var(--muted); } table.list { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; } table.list th { text-align: left; color: var(--muted); font-weight: normal; font-size: .85rem; text-transform: uppercase; letter-spacing: .05rem; } table.list th, table.list td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); } table.list a { color: var(--fg); } table.list a:hover { color: var(--accent); } .badge { font-size: .75rem; text-transform: uppercase; letter-spacing: .05rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: .1rem .6rem; margin-left: .4rem; } .badge-ok { color: #7aa35c; border-color: #7aa35c; } .badge-warn { color: var(--error); border-color: var(--error); } .page .card { margin-bottom: 2rem; } /* --- Accueil : dernières histoires --- */ .latest { list-style: none; padding: 0; margin: 0 0 1.5rem; } .latest li { margin: .5rem 0; } .latest a { color: var(--fg); text-decoration: none; font-size: 1.1rem; } .latest a:hover { color: var(--accent); } /* --- Bibliothèque --- */ .filter { display: flex; gap: .6rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; } .filter select { width: auto; margin: 0; } .filter input[type=search] { width: auto; flex: 1 1 10rem; margin: 0; } .pager { text-align: center; } .pager .btn { margin: 0 .6rem; } .story-card { display: flex; gap: 1.2rem; } .story-card .cover { width: 90px; height: 120px; object-fit: cover; border-radius: .3rem; flex-shrink: 0; } .story-body { min-width: 0; flex: 1; } .story-card h2 { margin-top: 0; margin-bottom: .2rem; } .story-card h2 a { color: var(--fg); text-decoration: none; } .story-card h2 a:hover { color: var(--accent); } .story-meta { font-size: .9rem; } .story-meta a { color: var(--muted); } .story-meta a:hover { color: var(--accent); } /* --- Lecture --- */ .reading { max-width: 40rem; } .chapter-content { line-height: 1.85; font-size: 1.08rem; margin-bottom: 2.5rem; } .chapter-content img { max-width: 100%; } .chapter-content a { color: var(--accent); } .choices { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2.5rem; } .choice { display: block; padding: .9rem 1.2rem; background: var(--bg-soft); border: 1px solid var(--line2); border-radius: .5rem; color: var(--fg); text-decoration: none; } .choice:hover { border-color: var(--accent); color: var(--accent); } .fin { text-align: center; font-size: 1.6rem; letter-spacing: .5rem; color: var(--accent); text-transform: uppercase; } .center { text-align: center; } .center .btn { margin: 0 .3rem; } .reader-bar { display: flex; gap: 1rem; align-items: center; justify-content: center; border-top: 1px solid var(--line); padding-top: 1.5rem; } .reader-bar select { display: inline-block; width: auto; margin: 0 .3rem 0 0; padding: .3rem .5rem; } .toc { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; } .toc select { display: inline-block; width: auto; margin: 0 .3rem 0 0; padding: .3rem .5rem; max-width: 16rem; } .move-cell { white-space: nowrap; } /* --- Préférences lecteur : taille (5 crans, 3 = défaut) et police --- */ html[data-fs="1"] .chapter-content { font-size: .9rem; } html[data-fs="2"] .chapter-content { font-size: 1rem; } html[data-fs="3"] .chapter-content { font-size: 1.1rem; } html[data-fs="4"] .chapter-content { font-size: 1.22rem; } html[data-fs="5"] .chapter-content { font-size: 1.35rem; } html.font-sans .chapter-content { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } /* --- Panneau « Aa » de la page de lecture (créé en JS) --- */ .reader-settings-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--bg-soft); color: var(--fg); border: 1px solid var(--line2); font: inherit; font-size: 1.05rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .reader-settings-btn:hover { border-color: var(--accent); color: var(--accent); } .reader-settings { position: fixed; right: 1rem; bottom: 4.4rem; z-index: 10; background: var(--bg-soft); border: 1px solid var(--line2); border-radius: .5rem; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); } .reader-settings .row { display: flex; gap: .4rem; } .reader-settings button { flex: 1; min-width: 3.2rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line2); border-radius: .3rem; padding: .4rem .6rem; font: inherit; font-size: .95rem; cursor: pointer; } .reader-settings button:hover { border-color: var(--accent); } .reader-settings button.on { border-color: var(--accent); color: var(--accent); } /* --- Graphe de l'histoire (SVG serveur, cf. graph.php) --- */ .graph-wrap { overflow-x: auto; } svg.graph .node rect { fill: var(--bg-soft); stroke: var(--line2); stroke-width: 1.5; } svg.graph .node text { fill: var(--fg); font-family: Georgia, serif; font-size: 13px; } svg.graph .node:hover rect { stroke: var(--accent); } svg.graph .end rect { stroke: #7aa35c; } svg.graph .orphan rect { stroke: var(--error); stroke-dasharray: 4 3; } svg.graph .start rect { stroke: var(--accent); stroke-width: 2.5; } svg.graph g.edge { cursor: pointer; } svg.graph .edge-line { stroke: var(--muted); stroke-width: 1.5; fill: none; marker-end: url(#arrow); } svg.graph .edge-hit { stroke: transparent; stroke-width: 12; fill: none; } svg.graph g.edge:hover .edge-line { stroke: var(--accent); } svg.graph .node.picked rect { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 3; } .graph-legend .lg { display: inline-block; width: .85rem; height: .85rem; border-radius: .2rem; vertical-align: -.1rem; background: var(--bg-soft); } .lg-start { border: 2px solid var(--accent); } .lg-end { border: 1.5px solid #7aa35c; } .lg-orphan { border: 1.5px dashed var(--error); } /* --- Mobile --- */ @media (max-width: 640px) { .topnav { flex-direction: column; align-items: center; gap: .5rem; padding: .8rem 1rem; } .nav-right { justify-content: center; } .page { padding: 1.5rem 1rem; } .hero { padding-top: 6vh; } .hero h1 { font-size: 2.4rem; letter-spacing: .25rem; } .tagline { font-size: 1.15rem; } .card { padding: 1rem; } /* Tableaux : défilement horizontal plutôt que débordement. */ table.list { display: block; overflow-x: auto; white-space: nowrap; } .reader-bar { flex-wrap: wrap; } .chapter-content { font-size: 1.02rem; } } form.inline { display: inline; margin: 0; } .btn-sm { padding: .3rem .8rem; font-size: .85rem; font-weight: normal; } .btn-danger { background: transparent; color: var(--error); border: 1px solid var(--error); } .btn-danger:hover { background: var(--error); color: #14161d; } /* --- Formulaires : compléments (type d'histoire, admin) --- */ fieldset.kind { border: 1px solid var(--line2); border-radius: .3rem; margin: 0 0 1rem; padding: .6rem 1rem; } fieldset.kind legend { color: var(--muted); font-size: .95rem; padding: 0 .4rem; } label.radio { margin-bottom: .4rem; color: var(--fg); } label.radio input { display: inline; width: auto; margin-right: .4rem; } .input-inline { display: inline-block; width: auto; margin: 0 .3rem 0 0; padding: .3rem .5rem; } .card h3 { color: var(--accent); font-size: 1.05rem; margin: 1.5rem 0 .8rem; } /* --- Éditeur Markdown (barre d'outils + aperçu, cf. app.js) --- */ .md-toolbar { display: flex; gap: .3rem; margin: .4rem 0; } .md-toolbar button { background: var(--bg); color: var(--fg); border: 1px solid var(--line2); border-radius: .3rem; min-width: 2.2rem; padding: .25rem .5rem; font: inherit; font-size: .9rem; cursor: pointer; } .md-toolbar button:hover { border-color: var(--accent); color: var(--accent); } .md-toolbar .md-preview-btn { margin-left: auto; } .md-preview { border: 1px dashed var(--line2); border-radius: .3rem; padding: 1rem 1.2rem; margin-top: .3rem; } /* --- Couverture --- */ .cover-preview { width: 120px; border-radius: .3rem; }