119 lines
2.9 KiB
CSS
119 lines
2.9 KiB
CSS
/* ===================================================================
|
|
🎨 WIKI THEME - E:/WIKI
|
|
Palette par thème pour embellir le wiki dans Obsidian
|
|
À installer dans : .obsidian/snippets/wiki-theme.css
|
|
Puis activer dans : Paramètres > Apparence > Extraits CSS
|
|
=================================================================== */
|
|
|
|
/* 🎨 Variables globales */
|
|
.theme-dark {
|
|
--color-ia: #7dd3fc; /* cyan */
|
|
--color-security: #fca5a5; /* rouge doux */
|
|
--color-autohost: #86efac; /* vert */
|
|
--color-web: #fdba74; /* orange */
|
|
--color-business: #c4b5fd; /* violet */
|
|
--color-pratique: #fcd34d; /* jaune */
|
|
}
|
|
|
|
/* Tags colorés (méthode simple, via tags YAML) */
|
|
.tag[href="#ia"],
|
|
.tag[href="#IA"] {
|
|
color: var(--color-ia);
|
|
background-color: rgba(125, 211, 252, 0.1);
|
|
}
|
|
|
|
.tag[href="#security"],
|
|
.tag[href="#security"],
|
|
.tag[href="#Security"] {
|
|
color: var(--color-security);
|
|
background-color: rgba(252, 165, 165, 0.1);
|
|
}
|
|
|
|
.tag[href="#auto-hébergement"],
|
|
.tag[href="#auto-hebergement"] {
|
|
color: var(--color-autohost);
|
|
background-color: rgba(134, 239, 172, 0.1);
|
|
}
|
|
|
|
.tag[href="#web"] {
|
|
color: var(--color-web);
|
|
background-color: rgba(253, 186, 116, 0.1);
|
|
}
|
|
|
|
/* 🎯 Titres avec couleurs thématiques (basé sur les emojis) */
|
|
h1 {
|
|
border-bottom: 3px solid var(--text-accent);
|
|
padding-bottom: 0.3em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Liens internes (couleur par défaut accentuée) */
|
|
.internal-link {
|
|
color: var(--text-accent);
|
|
text-decoration: none;
|
|
background-color: rgba(var(--text-accent-rgb), 0.05);
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.internal-link:hover {
|
|
background-color: rgba(var(--text-accent-rgb), 0.15);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 📋 Styliser les callouts/checklists */
|
|
.callout {
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 📊 Tableaux comparatifs - style moderne */
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 1em 0;
|
|
font-size: 0.95em;
|
|
}
|
|
table th {
|
|
background-color: var(--background-secondary);
|
|
color: var(--text-accent);
|
|
padding: 10px;
|
|
text-align: left;
|
|
border-bottom: 2px solid var(--text-accent);
|
|
}
|
|
table td {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
table tr:hover {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
/* 🎯 Code blocks - lisibilité améliorée */
|
|
code {
|
|
background-color: var(--background-secondary);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
pre code {
|
|
background-color: var(--background-primary-alt);
|
|
display: block;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
border-left: 3px solid var(--text-accent);
|
|
}
|
|
|
|
/* ✨ Animation douce sur les titres de section */
|
|
h2, h3, h4 {
|
|
transition: color 0.2s;
|
|
}
|
|
h2:hover, h3:hover, h4:hover {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
/* 📜 Section "Liens" stylisée */
|
|
h2:has(+ ul) {
|
|
/* les sections de liens */
|
|
}
|