b85e6d3a25
- Scroll précis vers sections table des matières avec surbrillance - Historique Ctrl+Z/Y fonctionnel pour toutes les actions IA - Mode édition automatique lors du chargement de fichiers - Support CSS GitHub Preview pour visualisation Markdown 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
454 lines
9.6 KiB
CSS
454 lines
9.6 KiB
CSS
/* CSS pour la prévisualisation du journal - Style GitHub authentique */
|
|
|
|
.markdown-preview {
|
|
/* Variables spécifiques GitHub */
|
|
--github-text-color: #1f2328;
|
|
--github-text-light: #656d76;
|
|
--github-bg-color: #ffffff;
|
|
--github-border-color: #d0d7de;
|
|
--github-border-muted: #d8dee4;
|
|
--github-accent-emphasis: #0969da;
|
|
--github-accent-fg: #0969da;
|
|
--github-neutral-muted: #afb8c1;
|
|
--github-canvas-subtle: #f6f8fa;
|
|
--github-danger-fg: #cf222e;
|
|
--github-success-fg: #1a7f37;
|
|
--github-attention-fg: #9a6700;
|
|
--github-severe-fg: #bc4c00;
|
|
--github-done-fg: #8250df;
|
|
|
|
/* Override pour thème sombre */
|
|
color: var(--github-text-color);
|
|
background: var(--github-bg-color);
|
|
border: 1px solid var(--github-border-color);
|
|
border-radius: 6px;
|
|
|
|
/* GitHub typography */
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
|
|
/* Layout comme GitHub */
|
|
max-width: none;
|
|
width: 100%;
|
|
padding: 48px;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Mode sombre GitHub */
|
|
body.dark-theme .markdown-preview {
|
|
--github-text-color: #e6edf3;
|
|
--github-text-light: #7d8590;
|
|
--github-bg-color: #0d1117;
|
|
--github-border-color: #30363d;
|
|
--github-border-muted: #21262d;
|
|
--github-accent-emphasis: #1f6feb;
|
|
--github-accent-fg: #58a6ff;
|
|
--github-neutral-muted: #6e7681;
|
|
--github-canvas-subtle: #161b22;
|
|
--github-danger-fg: #f85149;
|
|
--github-success-fg: #3fb950;
|
|
--github-attention-fg: #d29922;
|
|
--github-severe-fg: #db6d28;
|
|
--github-done-fg: #a5a3ff;
|
|
|
|
background: var(--github-bg-color);
|
|
color: var(--github-text-color);
|
|
border-color: var(--github-border-color);
|
|
}
|
|
|
|
/* Titres style GitHub */
|
|
.markdown-preview h1,
|
|
.markdown-preview h2,
|
|
.markdown-preview h3,
|
|
.markdown-preview h4,
|
|
.markdown-preview h5,
|
|
.markdown-preview h6 {
|
|
margin-top: 24px;
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
color: var(--github-text-color);
|
|
}
|
|
|
|
.markdown-preview h1 {
|
|
font-size: 2em;
|
|
border-bottom: 1px solid var(--github-border-muted);
|
|
padding-bottom: 0.3em;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-preview h2 {
|
|
font-size: 1.5em;
|
|
border-bottom: 1px solid var(--github-border-muted);
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.markdown-preview h3 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.markdown-preview h4 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.markdown-preview h5 {
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.markdown-preview h6 {
|
|
font-size: 0.85em;
|
|
color: var(--github-text-light);
|
|
}
|
|
|
|
/* Paragraphes */
|
|
.markdown-preview p {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Listes style GitHub */
|
|
.markdown-preview ul,
|
|
.markdown-preview ol {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.markdown-preview li {
|
|
word-wrap: break-all;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-preview li > p {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-preview li + li {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
/* Listes de tâches */
|
|
.markdown-preview .task-list-item {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.markdown-preview .task-list-item input[type="checkbox"] {
|
|
margin: 0 0.2em 0.25em -1.4em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Citations */
|
|
.markdown-preview blockquote {
|
|
margin: 0 0 16px 0;
|
|
padding: 0 1em;
|
|
color: var(--github-text-light);
|
|
border-left: 0.25em solid var(--github-border-color);
|
|
}
|
|
|
|
.markdown-preview blockquote > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-preview blockquote > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Code inline */
|
|
.markdown-preview code {
|
|
padding: 0.2em 0.4em;
|
|
margin: 0;
|
|
font-size: 85%;
|
|
white-space: break-spaces;
|
|
background-color: var(--github-neutral-muted);
|
|
border-radius: 6px;
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
}
|
|
|
|
body.dark-theme .markdown-preview code {
|
|
background-color: rgba(110, 118, 129, 0.4);
|
|
}
|
|
|
|
/* Blocs de code */
|
|
.markdown-preview pre {
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
background-color: var(--github-canvas-subtle);
|
|
border-radius: 6px;
|
|
overflow: auto;
|
|
font-size: 85%;
|
|
line-height: 1.45;
|
|
word-wrap: normal;
|
|
}
|
|
|
|
body.dark-theme .markdown-preview pre {
|
|
background-color: var(--github-canvas-subtle);
|
|
}
|
|
|
|
.markdown-preview pre code {
|
|
display: inline;
|
|
max-width: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
line-height: inherit;
|
|
word-wrap: normal;
|
|
background-color: transparent;
|
|
border: 0;
|
|
white-space: pre;
|
|
word-break: normal;
|
|
word-spacing: normal;
|
|
tab-size: 4;
|
|
}
|
|
|
|
/* Tables style GitHub */
|
|
.markdown-preview table {
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
display: table;
|
|
width: 100%;
|
|
overflow: auto;
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
border: 1px solid var(--github-border-color);
|
|
}
|
|
|
|
.markdown-preview table th {
|
|
font-weight: 600;
|
|
background-color: var(--github-canvas-subtle);
|
|
border: 1px solid var(--github-border-color);
|
|
padding: 6px 13px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
body.dark-theme .markdown-preview table th {
|
|
background-color: var(--github-canvas-subtle);
|
|
}
|
|
|
|
.markdown-preview table td {
|
|
border: 1px solid var(--github-border-color);
|
|
padding: 6px 13px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.markdown-preview table tr {
|
|
background-color: var(--github-bg-color);
|
|
border-top: 1px solid var(--github-border-color);
|
|
}
|
|
|
|
.markdown-preview table tr:nth-child(even) {
|
|
background-color: var(--github-canvas-subtle);
|
|
}
|
|
|
|
body.dark-theme .markdown-preview table tr:nth-child(even) {
|
|
background-color: var(--github-canvas-subtle);
|
|
}
|
|
|
|
.markdown-preview table thead tr {
|
|
background-color: var(--github-canvas-subtle);
|
|
}
|
|
|
|
body.dark-theme .markdown-preview table thead tr {
|
|
background-color: var(--github-canvas-subtle);
|
|
}
|
|
|
|
/* Liens style GitHub */
|
|
.markdown-preview a {
|
|
color: var(--github-accent-fg);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-preview a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.markdown-preview a:visited {
|
|
color: var(--github-done-fg);
|
|
}
|
|
|
|
/* Images */
|
|
.markdown-preview img {
|
|
max-width: 100%;
|
|
box-sizing: content-box;
|
|
background-color: var(--github-bg-color);
|
|
}
|
|
|
|
.markdown-preview img[align=right] {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.markdown-preview img[align=left] {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
/* Séparateurs horizontaux */
|
|
.markdown-preview hr {
|
|
height: 0.25em;
|
|
padding: 0;
|
|
margin: 24px 0;
|
|
background-color: var(--github-border-color);
|
|
border: 0;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Emphasis */
|
|
.markdown-preview strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-preview em {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Strikethrough */
|
|
.markdown-preview del {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* Keyboard keys */
|
|
.markdown-preview kbd {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
font-size: 11px;
|
|
line-height: 10px;
|
|
color: var(--github-text-light);
|
|
vertical-align: middle;
|
|
background-color: var(--github-canvas-subtle);
|
|
border: solid 1px var(--github-neutral-muted);
|
|
border-bottom-color: var(--github-neutral-muted);
|
|
border-radius: 6px;
|
|
box-shadow: inset 0 -1px 0 var(--github-neutral-muted);
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
}
|
|
|
|
/* Support pour les alertes GitHub (Notes, Tips, etc.) */
|
|
.markdown-preview .markdown-alert {
|
|
padding: 0.5rem 1em;
|
|
margin-bottom: 16px;
|
|
color: inherit;
|
|
border-left: 0.25em solid var(--github-border-color);
|
|
background-color: var(--github-canvas-subtle);
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
|
|
.markdown-preview .markdown-alert > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-preview .markdown-alert > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-preview .markdown-alert .markdown-alert-title {
|
|
display: flex;
|
|
font-weight: 500;
|
|
align-items: center;
|
|
line-height: 1;
|
|
}
|
|
|
|
.markdown-preview .markdown-alert.markdown-alert-note {
|
|
border-left-color: var(--github-accent-emphasis);
|
|
}
|
|
|
|
.markdown-preview .markdown-alert.markdown-alert-tip {
|
|
border-left-color: var(--github-success-fg);
|
|
}
|
|
|
|
.markdown-preview .markdown-alert.markdown-alert-important {
|
|
border-left-color: var(--github-done-fg);
|
|
}
|
|
|
|
.markdown-preview .markdown-alert.markdown-alert-warning {
|
|
border-left-color: var(--github-attention-fg);
|
|
}
|
|
|
|
.markdown-preview .markdown-alert.markdown-alert-caution {
|
|
border-left-color: var(--github-danger-fg);
|
|
}
|
|
|
|
/* Support pour Mermaid avec style GitHub */
|
|
.markdown-preview .mermaid {
|
|
text-align: center;
|
|
margin: 16px 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.markdown-preview .mermaid svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Support pour les footnotes */
|
|
.markdown-preview .footnotes {
|
|
font-size: 0.875em;
|
|
color: var(--github-text-light);
|
|
border-top: 1px solid var(--github-border-color);
|
|
margin-top: 24px;
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.markdown-preview .footnotes ol {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.markdown-preview .footnotes li {
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
/* Amélioration de l'espacement pour les éléments imbriqués */
|
|
.markdown-preview li p {
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-preview li blockquote {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.markdown-preview li ul,
|
|
.markdown-preview li ol {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-preview ul ul,
|
|
.markdown-preview ul ol,
|
|
.markdown-preview ol ol,
|
|
.markdown-preview ol ul {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Scrollbars GitHub-like (webkit only) */
|
|
.markdown-preview::-webkit-scrollbar {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.markdown-preview::-webkit-scrollbar-corner,
|
|
.markdown-preview::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.markdown-preview::-webkit-scrollbar-thumb {
|
|
background-color: var(--github-neutral-muted);
|
|
border-radius: 8px;
|
|
border: 4px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.markdown-preview::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--github-text-light);
|
|
}
|
|
|
|
/* Responsive pour mobile */
|
|
@media (max-width: 768px) {
|
|
.markdown-preview {
|
|
padding: 24px 16px;
|
|
}
|
|
} |