rajoute le support de l'utilisation de markdown (sur un sous-ensemble) dans la description des campagnes et des propositions
This commit is contained in:
Yannick Le Duc
@@ -1,8 +1,52 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme {
|
||||
--color-background: 0 0% 100%;
|
||||
--color-foreground: 222.2 84% 4.9%;
|
||||
--color-card: 0 0% 100%;
|
||||
--color-card-foreground: 222.2 84% 4.9%;
|
||||
--color-popover: 0 0% 100%;
|
||||
--color-popover-foreground: 222.2 84% 4.9%;
|
||||
--color-primary: 222.2 47.4% 11.2%;
|
||||
--color-primary-foreground: 210 40% 98%;
|
||||
--color-secondary: 210 40% 96%;
|
||||
--color-secondary-foreground: 222.2 84% 4.9%;
|
||||
--color-muted: 210 40% 96%;
|
||||
--color-muted-foreground: 215.4 16.3% 46.9%;
|
||||
--color-accent: 210 40% 96%;
|
||||
--color-accent-foreground: 222.2 84% 4.9%;
|
||||
--color-destructive: 0 84.2% 60.2%;
|
||||
--color-destructive-foreground: 210 40% 98%;
|
||||
--color-border: 214.3 31.8% 91.4%;
|
||||
--color-input: 214.3 31.8% 91.4%;
|
||||
--color-ring: 222.2 84% 4.9%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
@theme dark {
|
||||
--color-background: 222.2 84% 4.9%;
|
||||
--color-foreground: 210 40% 98%;
|
||||
--color-card: 222.2 84% 4.9%;
|
||||
--color-card-foreground: 210 40% 98%;
|
||||
--color-popover: 222.2 84% 4.9%;
|
||||
--color-popover-foreground: 210 40% 98%;
|
||||
--color-primary: 210 40% 98%;
|
||||
--color-primary-foreground: 222.2 47.4% 11.2%;
|
||||
--color-secondary: 217.2 32.6% 17.5%;
|
||||
--color-secondary-foreground: 210 40% 98%;
|
||||
--color-muted: 217.2 32.6% 17.5%;
|
||||
--color-muted-foreground: 215 20.2% 65.1%;
|
||||
--color-accent: 217.2 32.6% 17.5%;
|
||||
--color-accent-foreground: 210 40% 98%;
|
||||
--color-destructive: 0 62.8% 30.6%;
|
||||
--color-destructive-foreground: 210 40% 98%;
|
||||
--color-border: 217.2 32.6% 17.5%;
|
||||
--color-input: 217.2 32.6% 17.5%;
|
||||
--color-ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
@@ -181,7 +225,7 @@
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@@ -202,3 +246,202 @@
|
||||
linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
/* Styles pour le support Markdown */
|
||||
.prose {
|
||||
color: hsl(222.2 84% 4.9%);
|
||||
}
|
||||
|
||||
.prose h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
color: hsl(222.2 84% 4.9%);
|
||||
}
|
||||
|
||||
.prose h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 1.25rem;
|
||||
color: hsl(222.2 84% 4.9%);
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
color: hsl(222.2 84% 4.9%);
|
||||
}
|
||||
|
||||
/* Styles spécifiques pour la page de vote - titres markdown plus petits */
|
||||
.vote-page .prose h1 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.vote-page .prose h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.vote-page .prose h3 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.375rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.prose strong {
|
||||
font-weight: 600;
|
||||
color: hsl(222.2 84% 4.9%);
|
||||
}
|
||||
|
||||
.prose em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.prose u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose del {
|
||||
text-decoration: line-through;
|
||||
color: hsl(215.4 16.3% 46.9%);
|
||||
}
|
||||
|
||||
.prose ul {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.prose ol {
|
||||
list-style-type: decimal;
|
||||
list-style-position: inside;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.prose li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: hsl(222.2 47.4% 11.2%);
|
||||
text-decoration: underline;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
color: hsl(222.2 47.4% 11.2% / 0.8);
|
||||
}
|
||||
|
||||
.prose hr {
|
||||
border-color: hsl(214.3 31.8% 91.4%);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.prose br {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Styles pour l'éditeur markdown */
|
||||
.markdown-editor {
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.markdown-editor:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px hsl(222.2 84% 4.9%), 0 0 0 4px hsl(222.2 84% 4.9% / 0.1);
|
||||
}
|
||||
|
||||
/* Styles pour la prévisualisation */
|
||||
.markdown-preview {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Styles pour les onglets */
|
||||
.markdown-tabs {
|
||||
border-bottom: 1px solid hsl(214.3 31.8% 91.4%);
|
||||
}
|
||||
|
||||
.markdown-tab {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.markdown-tab:hover {
|
||||
border-color: hsl(214.3 31.8% 91.4%);
|
||||
}
|
||||
|
||||
.markdown-tab.active {
|
||||
border-color: hsl(222.2 47.4% 11.2%);
|
||||
color: hsl(222.2 47.4% 11.2%);
|
||||
}
|
||||
|
||||
/* Styles pour le mode sombre */
|
||||
.dark .prose {
|
||||
color: hsl(210 40% 98%);
|
||||
}
|
||||
|
||||
.dark .prose h1,
|
||||
.dark .prose h2,
|
||||
.dark .prose h3,
|
||||
.dark .prose strong {
|
||||
color: hsl(210 40% 98%);
|
||||
}
|
||||
|
||||
/* Styles spécifiques pour la page de vote en mode sombre */
|
||||
.dark .vote-page .prose h1,
|
||||
.dark .vote-page .prose h2,
|
||||
.dark .vote-page .prose h3 {
|
||||
color: hsl(210 40% 98%);
|
||||
}
|
||||
|
||||
.dark .prose del {
|
||||
color: hsl(215 20.2% 65.1%);
|
||||
}
|
||||
|
||||
.dark .prose a {
|
||||
color: hsl(210 40% 98%);
|
||||
}
|
||||
|
||||
.dark .prose a:hover {
|
||||
color: hsl(210 40% 98% / 0.8);
|
||||
}
|
||||
|
||||
.dark .prose hr {
|
||||
border-color: hsl(217.2 32.6% 17.5%);
|
||||
}
|
||||
|
||||
.dark .markdown-editor:focus {
|
||||
box-shadow: 0 0 0 2px hsl(210 40% 98%), 0 0 0 4px hsl(210 40% 98% / 0.1);
|
||||
}
|
||||
|
||||
.dark .markdown-tabs {
|
||||
border-bottom: 1px solid hsl(217.2 32.6% 17.5%);
|
||||
}
|
||||
|
||||
.dark .markdown-tab:hover {
|
||||
border-color: hsl(217.2 32.6% 17.5%);
|
||||
}
|
||||
|
||||
.dark .markdown-tab.active {
|
||||
border-color: hsl(210 40% 98%);
|
||||
color: hsl(210 40% 98%);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user