truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve mermaid diagram typography, contrast, and theme variables for better readability

Browse Source
This commit is contained in:
Ümit Tunç
2026-07-30 18:12:40 +03:00
parent de3f0abcaa
commit bba1393db5
1 changed files with 59 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/projects/show.blade.php
+59 -12
View File
@@ -95,7 +95,43 @@
} }
.mermaid-canvas:active { cursor: grabbing; } .mermaid-canvas:active { cursor: grabbing; }
/* Mermaid Theme Customization */ /* Mermaid Theme Customization - High Contrast Text */
.mermaid svg text {
fill: #0f172a !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
}
.dark .mermaid svg text {
fill: #f8fafc !important;
}
.mermaid svg .titleText {
fill: #0f172a !important;
font-size: 16px !important;
font-weight: 800 !important;
}
.dark .mermaid svg .titleText {
fill: #ffffff !important;
}
.mermaid svg .sectionTitle {
fill: #0f172a !important;
font-size: 13px !important;
font-weight: 700 !important;
}
.dark .mermaid svg .sectionTitle {
fill: #f1f5f9 !important;
}
.mermaid svg .taskText {
fill: #ffffff !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
}
.mermaid svg .taskTextOutsideRight, .mermaid svg .taskTextOutsideLeft {
fill: #0f172a !important;
font-weight: 700 !important;
}
.dark .mermaid svg .taskTextOutsideRight, .dark .mermaid svg .taskTextOutsideLeft {
fill: #ffffff !important;
}
.mermaid svg .task { .mermaid svg .task {
fill: #ea580c !important; fill: #ea580c !important;
stroke: #c2410c !important; stroke: #c2410c !important;
@@ -110,22 +146,31 @@
fill: #ef4444 !important; fill: #ef4444 !important;
stroke: #b91c1c !important; stroke: #b91c1c !important;
} }
.mermaid svg .taskText {
fill: #ffffff !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
}
.mermaid svg .section0, .mermaid svg .section2 { .mermaid svg .section0, .mermaid svg .section2 {
fill: rgba(234, 88, 12, 0.08) !important; fill: rgba(234, 88, 12, 0.08) !important;
} }
.dark .mermaid svg .section0, .dark .mermaid svg .section2 { .dark .mermaid svg .section0, .dark .mermaid svg .section2 {
fill: rgba(234, 88, 12, 0.18) !important; fill: rgba(234, 88, 12, 0.22) !important;
} }
.mermaid svg .section1, .mermaid svg .section3 { .mermaid svg .section1, .mermaid svg .section3 {
fill: rgba(239, 68, 68, 0.08) !important; fill: rgba(239, 68, 68, 0.08) !important;
} }
.dark .mermaid svg .section1, .dark .mermaid svg .section3 { .dark .mermaid svg .section1, .dark .mermaid svg .section3 {
fill: rgba(239, 68, 68, 0.18) !important; fill: rgba(239, 68, 68, 0.22) !important;
}
.mermaid svg .grid .tick text {
fill: #334155 !important;
font-weight: 700 !important;
}
.dark .mermaid svg .grid .tick text {
fill: #94a3b8 !important;
}
.mermaid svg .grid .tick line {
stroke: #cbd5e1 !important;
stroke-width: 1.5px !important;
}
.dark .mermaid svg .grid .tick line {
stroke: #334155 !important;
} }
/* Sortable Dragging Styling */ /* Sortable Dragging Styling */
@@ -401,7 +446,7 @@
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-slate-900 dark:text-white font-display">1. İş Takvimi ve Gantt Çizelgesi</h2> <h2 class="text-lg font-bold text-slate-900 dark:text-white font-display">1. İş Takvimi ve Gantt Çizelgesi</h2>
<p class="text-xs text-slate-500">Proje aşamalarının ve geliştirme süreçlerinin zamansal planı</p> <p class="text-xs text-slate-700 dark:text-slate-300 font-medium">Proje aşamalarının ve geliştirme süreçlerinin zamansal planı</p>
</div> </div>
</div> </div>
</div> </div>
@@ -892,9 +937,11 @@ gantt
secondaryColor: '#ef4444', secondaryColor: '#ef4444',
secondaryTextColor: '#ffffff', secondaryTextColor: '#ffffff',
tertiaryColor: isDark ? '#1e293b' : '#fff7ed', tertiaryColor: isDark ? '#1e293b' : '#fff7ed',
sectionBkgColor: isDark ? 'rgba(234, 88, 12, 0.15)' : 'rgba(234, 88, 12, 0.07)', textColor: isDark ? '#f8fafc' : '#0f172a',
sectionBkgColor2: isDark ? 'rgba(239, 68, 68, 0.15)' : 'rgba(239, 68, 68, 0.07)', titleColor: isDark ? '#ffffff' : '#0f172a',
gridColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.08)', sectionBkgColor: isDark ? 'rgba(234, 88, 12, 0.2)' : 'rgba(234, 88, 12, 0.08)',
sectionBkgColor2: isDark ? 'rgba(239, 68, 68, 0.2)' : 'rgba(239, 68, 68, 0.08)',
gridColor: isDark ? 'rgba(255, 255, 255, 0.15)' : '#cbd5e1',
todayLineColor: '#ef4444' todayLineColor: '#ef4444'
} }
}); });