An Otter Wiki
Attachments
History
Blame
Rename
Delete
Changelog
Help
Toggle dark mode
Login
Home
A - Z
Create page
Page Index
Home
An Otter Wiki
Home
dc4a07
Commit
dc4a07
2026-10-14 08:58:35
Elcount
: nouvelle page d'accueil
home.md
..
@@ 26,3 26,248 @@
If you have any suggestions, feature requests or run into any
issues, please reach out and report them
via [github](https://github.com/redimp/otterwiki/issues).
+
+
/* ==========================================================
+
Otter Wiki - thème "moderne & doux"
+
À placer dans ./custom/custom.css (monté sur
+
/app/otterwiki/static/custom)
+
========================================================== */
+
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+
:root {
+
--ow-accent: #6366f1;
+
--ow-accent-hover: #4f46e5;
+
--ow-accent-soft: rgba(99, 102, 241, 0.10);
+
--ow-bg: #f6f7fb;
+
--ow-surface: #ffffff;
+
--ow-border: #e5e7ef;
+
--ow-text: #1f2430;
+
--ow-muted: #6b7280;
+
--ow-radius: 12px;
+
--ow-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
+
+
/* variables Halfmoon utilisées par Otter Wiki */
+
--primary-color: var(--ow-accent);
+
--primary-color-light: #818cf8;
+
--primary-color-very-light: #a5b4fc;
+
--primary-color-dark: var(--ow-accent-hover);
+
--link-color: var(--ow-accent);
+
--link-color-hover: var(--ow-accent-hover);
+
}
+
+
body.dark-mode {
+
--ow-accent: #818cf8;
+
--ow-accent-hover: #a5b4fc;
+
--ow-accent-soft: rgba(129, 140, 248, 0.14);
+
--ow-bg: #0f1117;
+
--ow-surface: #171a23;
+
--ow-border: #272b38;
+
--ow-text: #e6e8ef;
+
--ow-muted: #9aa1b2;
+
--ow-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35);
+
}
+
+
/* ---------- Base ---------- */
+
html, body {
+
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+
color: var(--ow-text);
+
-webkit-font-smoothing: antialiased;
+
}
+
body,
+
.page-wrapper,
+
.content-wrapper {
+
background: var(--ow-bg) !important;
+
}
+
+
a { transition: color .15s ease; }
+
+
::selection { background: var(--ow-accent-soft); }
+
+
/* ---------- Barre de navigation ---------- */
+
.navbar {
+
background: color-mix(in srgb, var(--ow-surface) 85%, transparent) !important;
+
backdrop-filter: blur(10px);
+
-webkit-backdrop-filter: blur(10px);
+
border-bottom: 1px solid var(--ow-border) !important;
+
box-shadow: none !important;
+
}
+
.navbar .navbar-brand,
+
.navbar a {
+
font-weight: 600;
+
letter-spacing: -0.01em;
+
}
+
+
/* ---------- Barre latérale ---------- */
+
.sidebar {
+
background: var(--ow-surface) !important;
+
border-right: 1px solid var(--ow-border) !important;
+
box-shadow: none !important;
+
}
+
.sidebar a,
+
.sidebar-link {
+
border-radius: 8px;
+
padding: .35rem .6rem;
+
transition: background .15s ease, color .15s ease;
+
}
+
.sidebar a:hover,
+
.sidebar-link:hover {
+
background: var(--ow-accent-soft) !important;
+
color: var(--ow-accent) !important;
+
text-decoration: none !important;
+
}
+
.sidebar .active,
+
.sidebar-link.active {
+
background: var(--ow-accent-soft) !important;
+
color: var(--ow-accent) !important;
+
font-weight: 600;
+
}
+
+
/* ---------- Contenu principal : effet "feuille" ---------- */
+
.content-wrapper > .content,
+
.content-wrapper .card,
+
.content-wrapper .content {
+
border-radius: var(--ow-radius);
+
}
+
.card {
+
background: var(--ow-surface) !important;
+
border: 1px solid var(--ow-border) !important;
+
box-shadow: var(--ow-shadow) !important;
+
border-radius: var(--ow-radius) !important;
+
}
+
+
/* Zone d'article */
+
.page-wrapper .content-wrapper .content,
+
.content-wrapper .card .content {
+
line-height: 1.7;
+
font-size: 1.02rem;
+
}
+
+
/* ---------- Titres ---------- */
+
h1, h2, h3, h4 {
+
font-weight: 700;
+
letter-spacing: -0.02em;
+
color: var(--ow-text);
+
}
+
h1 { font-size: 2rem; }
+
h2 {
+
margin-top: 2rem;
+
padding-bottom: .35rem;
+
border-bottom: 1px solid var(--ow-border);
+
}
+
+
/* ---------- Boutons ---------- */
+
.btn {
+
border-radius: 10px !important;
+
font-weight: 500;
+
transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
+
}
+
.btn:hover { transform: translateY(-1px); }
+
.btn:active { transform: translateY(0); }
+
.btn-primary {
+
background: var(--ow-accent) !important;
+
border-color: var(--ow-accent) !important;
+
color: #fff !important;
+
box-shadow: 0 2px 8px var(--ow-accent-soft);
+
}
+
.btn-primary:hover {
+
background: var(--ow-accent-hover) !important;
+
border-color: var(--ow-accent-hover) !important;
+
}
+
+
/* ---------- Champs de formulaire ---------- */
+
.form-control,
+
input[type="text"],
+
input[type="search"],
+
input[type="password"],
+
textarea,
+
select {
+
background: var(--ow-surface) !important;
+
border: 1px solid var(--ow-border) !important;
+
border-radius: 10px !important;
+
color: var(--ow-text) !important;
+
transition: border-color .15s ease, box-shadow .15s ease;
+
}
+
.form-control:focus,
+
input:focus,
+
textarea:focus,
+
select:focus {
+
border-color: var(--ow-accent) !important;
+
box-shadow: 0 0 0 3px var(--ow-accent-soft) !important;
+
outline: none;
+
}
+
+
/* ---------- Code ---------- */
+
code, pre, kbd, samp {
+
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
font-size: .9em;
+
}
+
code {
+
background: var(--ow-accent-soft);
+
color: var(--ow-accent);
+
padding: .12em .4em;
+
border-radius: 6px;
+
}
+
pre {
+
background: var(--ow-surface) !important;
+
border: 1px solid var(--ow-border) !important;
+
border-radius: var(--ow-radius) !important;
+
padding: 1rem 1.1rem !important;
+
box-shadow: var(--ow-shadow);
+
}
+
pre code { background: transparent; color: inherit; padding: 0; }
+
+
/* ---------- Citations ---------- */
+
blockquote {
+
margin: 1.2rem 0;
+
padding: .8rem 1.2rem;
+
border-left: 4px solid var(--ow-accent);
+
background: var(--ow-accent-soft);
+
border-radius: 0 var(--ow-radius) var(--ow-radius) 0;
+
color: var(--ow-text);
+
}
+
blockquote p:last-child { margin-bottom: 0; }
+
+
/* ---------- Tableaux ---------- */
+
table {
+
border-collapse: separate !important;
+
border-spacing: 0;
+
width: 100%;
+
border: 1px solid var(--ow-border);
+
border-radius: var(--ow-radius);
+
overflow: hidden;
+
}
+
table th {
+
background: var(--ow-accent-soft);
+
font-weight: 600;
+
text-align: left;
+
}
+
table th, table td {
+
padding: .6rem .9rem !important;
+
border: none !important;
+
border-bottom: 1px solid var(--ow-border) !important;
+
}
+
table tr:last-child td { border-bottom: none !important; }
+
table tbody tr:hover { background: var(--ow-accent-soft); }
+
+
/* ---------- Images & séparateurs ---------- */
+
.content img {
+
max-width: 100%;
+
border-radius: var(--ow-radius);
+
}
+
hr {
+
border: none;
+
border-top: 1px solid var(--ow-border);
+
margin: 2rem 0;
+
}
+
+
/* ---------- Scrollbar discrète ---------- */
+
* { scrollbar-width: thin; scrollbar-color: var(--ow-border) transparent; }
+
::-webkit-scrollbar { width: 10px; height: 10px; }
+
::-webkit-scrollbar-thumb {
+
background: var(--ow-border);
+
border-radius: 10px;
+
border: 2px solid transparent;
+
background-clip: content-box;
+
}
+
::-webkit-scrollbar-thumb:hover { background: var(--ow-muted); background-clip: content-box; }
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
