feat: thèmes rapides gérés par le backend via fichiers CSS
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>
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
.content { background: #1e1e2e; color: #cdd6f4; }
|
||||
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #cdd6f4; }
|
||||
.content p, .content ul li, .content ol li { color: #cdd6f4; }
|
||||
.content a { color: #89b4fa; }
|
||||
.content a:visited { color: #cba6f7; }
|
||||
.content code { background: #313244; color: #cba6f7; }
|
||||
.content pre { background: #313244; }
|
||||
.content blockquote { border-color: #6c7086; color: #a6adc8; }
|
||||
.content table td, .content table th { color: #cdd6f4; }
|
||||
@@ -0,0 +1,234 @@
|
||||
/* ─────────────────────────────────────────────
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.content a:hover { color: #10b981; }
|
||||
.content table th { border-bottom-color: #10b981; }
|
||||
.content table td { border-bottom-color: rgba(16, 185, 129, 0.25); }
|
||||
@@ -0,0 +1,2 @@
|
||||
.content { font-size: 18px; }
|
||||
.content p { line-height: 1.8; }
|
||||
@@ -0,0 +1,6 @@
|
||||
.content { background: #f4ecd8; }
|
||||
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #5c4a1e; }
|
||||
.content p, .content ul li, .content ol li { color: #5c4a1e; }
|
||||
.content a { color: #7a5c2e; }
|
||||
.content code { background: #e8d5b0; color: #5c4a1e; }
|
||||
.content pre { background: #e8d5b0; }
|
||||
@@ -0,0 +1,27 @@
|
||||
body { background: #f1f5f9; }
|
||||
::selection { background: #c7d2fe; }
|
||||
.content { background: #ffffff; color: #1e293b; }
|
||||
.content a { color: #4f46e5; border-bottom: 1px solid #c7d2fe; }
|
||||
.content a:hover { color: #3730a3; border-bottom-color: #4f46e5; }
|
||||
.content a:visited { color: #6d28d9; }
|
||||
.content a:visited:hover { color: #3730a3; }
|
||||
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #0f172a; }
|
||||
.content p { color: #1e293b; }
|
||||
.content ul li, .content ol li { color: #1e293b; }
|
||||
.content code { background: #f1f5f9; color: #4f46e5; border: 1px solid #e2e8f0; }
|
||||
.content pre { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; }
|
||||
.content pre code { background: none; color: #e2e8f0; }
|
||||
.content blockquote { border-color: #818cf8; background: #f5f3ff; color: #4338ca; }
|
||||
.content table { color: #374151; }
|
||||
.content table th { border-bottom-color: #4f46e5; color: #334155; }
|
||||
.content table td { border-bottom-color: rgba(79, 70, 229, 0.25); }
|
||||
.content strong { color: #0f172a; }
|
||||
.content hr { border-color: #e2e8f0; }
|
||||
.sidebar__menu__first-level-title__link:hover { color: #818cf8; }
|
||||
.sidebar__menu__first-level-title__link.active { color: #818cf8; background: rgba(129, 140, 248, 0.08); }
|
||||
.sidebar__menu__second-level-title__link:hover { color: #818cf8; }
|
||||
.sidebar__menu__second-level-title__link.active { color: #818cf8; }
|
||||
#titlebar { background: #0f172a; border-bottom: 1px solid #1e293b; }
|
||||
#titlebar-title { color: rgba(255,255,255,0.5); }
|
||||
.titlebar-controls button { color: rgba(255,255,255,0.45); }
|
||||
.titlebar-controls button:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
|
||||
Reference in New Issue
Block a user