e34528c886
Les thèmes ne sont plus codés en dur dans le JS. Chaque thème est un fichier CSS dans src-tauri/resources/themes/, embarqué à la compilation via include_str!. Le backend expose list_themes et get_theme_css comme commandes Tauri ; le frontend charge et met en cache le CSS à la demande. Ajout du thème "Défaut" (basé sur Shell Indigo) avec commentaires sur chaque règle et rendu complet des tableaux (en-têtes en majuscules, bordure extérieure, séparateurs verticaux, lignes alternées) aligné sur MarkdownRender-nodejs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
235 lines
5.6 KiB
CSS
235 lines
5.6 KiB
CSS
/* ─────────────────────────────────────────────
|
|
Thème par défaut — basé sur Shell Indigo
|
|
Modifiez les valeurs pour personnaliser
|
|
l'apparence de Pena.
|
|
───────────────────────────────────────────── */
|
|
|
|
|
|
/* ── Page ──────────────────────────────────── */
|
|
|
|
/* Couleur de fond de la fenêtre (visible autour du contenu) */
|
|
body {
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
/* Couleur de surbrillance lors d'une sélection de texte */
|
|
::selection {
|
|
background: #c7d2fe;
|
|
}
|
|
|
|
|
|
/* ── Zone de contenu ────────────────────────── */
|
|
|
|
/* Fond et couleur de texte principale de la zone de lecture */
|
|
.content {
|
|
background: #ffffff;
|
|
color: #1e293b;
|
|
}
|
|
|
|
|
|
/* ── Liens ──────────────────────────────────── */
|
|
|
|
/* Lien normal (non visité) */
|
|
.content a {
|
|
color: #4f46e5;
|
|
border-bottom: 1px solid #c7d2fe;
|
|
}
|
|
|
|
/* Lien au survol de la souris */
|
|
.content a:hover {
|
|
color: #3730a3;
|
|
border-bottom-color: #4f46e5;
|
|
}
|
|
|
|
/* Lien déjà visité */
|
|
.content a:visited {
|
|
color: #6d28d9;
|
|
}
|
|
|
|
/* Lien déjà visité au survol */
|
|
.content a:visited:hover {
|
|
color: #3730a3;
|
|
}
|
|
|
|
|
|
/* ── Titres ─────────────────────────────────── */
|
|
|
|
/* Couleur commune à tous les niveaux de titre (h1 à h6) */
|
|
.content h1,
|
|
.content h2,
|
|
.content h3,
|
|
.content h4,
|
|
.content h5,
|
|
.content h6 {
|
|
color: #0f172a;
|
|
}
|
|
|
|
|
|
/* ── Texte courant ──────────────────────────── */
|
|
|
|
/* Paragraphes */
|
|
.content p {
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* Éléments de liste (à puces et numérotées) */
|
|
.content ul li,
|
|
.content ol li {
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* Texte en gras */
|
|
.content strong {
|
|
color: #0f172a;
|
|
}
|
|
|
|
/* Ligne de séparation horizontale (---) */
|
|
.content hr {
|
|
border-color: #e2e8f0;
|
|
}
|
|
|
|
|
|
/* ── Code ───────────────────────────────────── */
|
|
|
|
/* Code inline (entre backticks simples) */
|
|
.content code {
|
|
background: #f1f5f9;
|
|
color: #4f46e5;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
/* Bloc de code (entre triple backticks) */
|
|
.content pre {
|
|
background: #0f172a;
|
|
border: 1px solid #1e293b;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Texte à l'intérieur d'un bloc de code */
|
|
.content pre code {
|
|
background: none;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
|
|
/* ── Citation ───────────────────────────────── */
|
|
|
|
/* Bloc de citation (> texte) */
|
|
.content blockquote {
|
|
border-color: #818cf8;
|
|
background: #f5f3ff;
|
|
color: #4338ca;
|
|
}
|
|
|
|
|
|
/* ── Tableaux ───────────────────────────────── */
|
|
|
|
/* Conteneur : bordure extérieure et coins arrondis */
|
|
.content table {
|
|
font-size: 0.875rem;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
color: #374151;
|
|
}
|
|
|
|
/* Ligne d'en-tête : fond gris clair */
|
|
.content thead {
|
|
background: #e2e8f0;
|
|
}
|
|
|
|
/* Cellule d'en-tête : texte en majuscules espacées, séparateur vertical */
|
|
.content table th {
|
|
padding: 0.6rem 1rem;
|
|
font-size: 0.77rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: #334155;
|
|
border-bottom: 2px solid #4f46e5;
|
|
border-right: 1px solid #cbd5e1;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Pas de bordure droite sur la dernière colonne d'en-tête */
|
|
.content table th:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Cellule de données : padding, séparateurs horizontaux et verticaux */
|
|
.content table td {
|
|
padding: 0.6rem 1rem;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
border-right: 1px solid #e2e8f0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Pas de bordure droite sur la dernière colonne */
|
|
.content table td:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Pas de bordure basse sur la dernière ligne (évite le double bord avec le conteneur) */
|
|
.content tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Lignes paires : fond légèrement différent pour faciliter la lecture */
|
|
.content tbody tr:nth-child(even) {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* Ligne au survol : mise en évidence */
|
|
.content tbody tr:hover {
|
|
background: #eff6ff;
|
|
}
|
|
|
|
|
|
/* ── Barre latérale ─────────────────────────── */
|
|
|
|
/* Lien de premier niveau au survol */
|
|
.sidebar__menu__first-level-title__link:hover {
|
|
color: #818cf8;
|
|
}
|
|
|
|
/* Lien de premier niveau actif (page ouverte) */
|
|
.sidebar__menu__first-level-title__link.active {
|
|
color: #818cf8;
|
|
background: rgba(129, 140, 248, 0.08);
|
|
}
|
|
|
|
/* Lien de second niveau au survol */
|
|
.sidebar__menu__second-level-title__link:hover {
|
|
color: #818cf8;
|
|
}
|
|
|
|
/* Lien de second niveau actif (page ouverte) */
|
|
.sidebar__menu__second-level-title__link.active {
|
|
color: #818cf8;
|
|
}
|
|
|
|
|
|
/* ── Barre de titre ─────────────────────────── */
|
|
|
|
/* Fond et bordure inférieure de la barre de titre */
|
|
#titlebar {
|
|
background: #0f172a;
|
|
border-bottom: 1px solid #1e293b;
|
|
}
|
|
|
|
/* Texte du titre de la fenêtre */
|
|
#titlebar-title {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Boutons de contrôle (réduire, agrandir, fermer) au repos */
|
|
.titlebar-controls button {
|
|
color: rgba(255, 255, 255, 0.45);
|
|
}
|
|
|
|
/* Boutons de contrôle au survol */
|
|
.titlebar-controls button:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|