feat: add bilibili diagram echarts and improve style
This commit is contained in:
Dillon
@@ -1,15 +1,7 @@
|
||||
/** Font **/
|
||||
/* Lato */
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
|
||||
|
||||
/* Montserrat */
|
||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
|
||||
|
||||
/* Roboto */
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
|
||||
|
||||
html {
|
||||
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
|
||||
font-family: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
|
||||
|
||||
/* scrollbar, only support webkit */
|
||||
&::-webkit-scrollbar {
|
||||
|
||||
@@ -3,6 +3,10 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-mobile {
|
||||
display: block !important;
|
||||
position: fixed;
|
||||
@@ -141,7 +145,15 @@
|
||||
|
||||
/* iPads (portrait and landscape) ----------- */
|
||||
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
.post-warp {
|
||||
max-width: 560px !important;
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
margin-left: 580px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktops and laptops ----------- */
|
||||
|
||||
|
||||
78
assets/css/_mermaid/class.scss
Normal file
78
assets/css/_mermaid/class.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
g.classGroup text {
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.classLabel .label {
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
@mixin composition {
|
||||
fill: $nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
@include composition;
|
||||
}
|
||||
59
assets/css/_mermaid/dark/index.scss
Normal file
59
assets/css/_mermaid/dark/index.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
$mainBkg: #BDD5EA;
|
||||
$secondBkg: #6D6D65;
|
||||
$mainContrastColor: lightgrey;
|
||||
$darkTextColor: #323D47;
|
||||
$lineColor: $mainContrastColor;
|
||||
$border1: #81B1DB;
|
||||
$border2: rgba(255, 255, 255, 0.25);
|
||||
$arrowheadColor: $mainContrastColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: purple;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #F9FFFE;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: $mainContrastColor;
|
||||
$signalColor: $mainContrastColor;
|
||||
$signalTextColor: $mainContrastColor;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $darkTextColor;
|
||||
$loopTextColor: $mainContrastColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(255, 255, 255, 0.3);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #EAE8B9;
|
||||
$taskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$taskBkgColor: $mainBkg;
|
||||
$taskTextColor: $darkTextColor;
|
||||
$taskTextLightColor: $mainContrastColor;
|
||||
$taskTextOutsideColor: $taskTextLightColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$activeTaskBkgColor: #81B1DB;
|
||||
$gridColor: $mainContrastColor;
|
||||
$doneTaskBkgColor: $mainContrastColor;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #E83737;
|
||||
$critBkgColor: #E83737;
|
||||
$taskTextDarkColor: $darkTextColor;
|
||||
$todayLineColor: #DB5757;
|
||||
|
||||
@import '../mermaid';
|
||||
57
assets/css/_mermaid/default/index.scss
Normal file
57
assets/css/_mermaid/default/index.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
$mainBkg: #ECECFF;
|
||||
$secondBkg: #ffffde;
|
||||
$lineColor: #333333;
|
||||
$border1: #CCCCFF;
|
||||
$border2: #aaaa33;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: #9370DB;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$loopTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(102, 102, 255, 0.49);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #fff400;
|
||||
$taskBorderColor: #534fbc;
|
||||
$taskBkgColor: #8a90dd;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: #534fbc;
|
||||
$activeTaskBkgColor: #bfc7ff;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
@import '../mermaid';
|
||||
58
assets/css/_mermaid/flowchart.scss
Normal file
58
assets/css/_mermaid/flowchart.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
.label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon {
|
||||
fill: $mainBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.node.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: $arrowheadColor;
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: $lineColor;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: $edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: $secondBkg;
|
||||
stroke: $clusterBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 12px;
|
||||
background: $secondBkg;
|
||||
border: 1px solid $border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
58
assets/css/_mermaid/forest/index.scss
Normal file
58
assets/css/_mermaid/forest/index.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
$mainBkg: #cde498;
|
||||
$secondBkg: #cdffb2;
|
||||
$lineColor: #1a3318;
|
||||
$lineColor: green;
|
||||
$border1: #13540c;
|
||||
$border2: #6eaa49;
|
||||
$arrowheadColor: green;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: #326932;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$loopTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: #6eaa49;
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #6eaa49;
|
||||
$taskBorderColor: $border1;
|
||||
$taskBkgColor: #487e3a;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
@import '../mermaid';
|
||||
236
assets/css/_mermaid/gantt.scss
Normal file
236
assets/css/_mermaid/gantt.scss
Normal file
@@ -0,0 +1,236 @@
|
||||
/** Section styling */
|
||||
|
||||
.section {
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: $sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: $sectionBkgColor2;
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: $altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: $gridColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: $todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.taskText {
|
||||
text-anchor: middle;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Special case clickable */
|
||||
.task.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.taskText.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: $taskTextColor;
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: $taskBkgColor;
|
||||
stroke: $taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2
|
||||
{
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke: $activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Completed task */
|
||||
|
||||
.done0,
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: $doneTaskBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneText0,
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Tasks on the critical line */
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.milestone {
|
||||
transform: rotate(45deg) scale(0.8,0.8);
|
||||
}
|
||||
|
||||
.milestoneText {
|
||||
font-style: italic;
|
||||
}
|
||||
.doneCritText0,
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: $taskTextDarkColor;
|
||||
}
|
||||
6
assets/css/_mermaid/git.scss
Normal file
6
assets/css/_mermaid/git.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.commit-id,
|
||||
.commit-msg,
|
||||
.branch-label {
|
||||
fill: lightgrey;
|
||||
color: lightgrey;
|
||||
}
|
||||
5
assets/css/_mermaid/mermaid.scss
Normal file
5
assets/css/_mermaid/mermaid.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import 'flowchart';
|
||||
@import 'sequence';
|
||||
@import 'gantt';
|
||||
@import 'class';
|
||||
@import 'git';
|
||||
62
assets/css/_mermaid/neutral/index.scss
Normal file
62
assets/css/_mermaid/neutral/index.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
$mainBkg: #eee;
|
||||
$contrast: #26a;
|
||||
$secondBkg: lighten($contrast, 55%);
|
||||
$lineColor: #666;
|
||||
$border1: #999;
|
||||
$border2: $contrast;
|
||||
$note: #ffa;
|
||||
$text: #333;
|
||||
$critical: #d42;
|
||||
$done: #bbb;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: $text;
|
||||
$edgeLabelBackground: white;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: $text;
|
||||
$actorLineColor: $lineColor;
|
||||
$signalColor: $text;
|
||||
$signalTextColor: $text;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $text;
|
||||
$loopTextColor: $text;
|
||||
$noteBorderColor: darken($note, 60%);
|
||||
$noteBkgColor: $note;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: lighten($contrast, 30%);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: lighten($contrast, 30%);
|
||||
$taskBorderColor: darken($contrast, 10%);
|
||||
$taskBkgColor: $contrast;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: $text;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lighten($border1, 30%);
|
||||
$doneTaskBkgColor: $done;
|
||||
$doneTaskBorderColor: $lineColor;
|
||||
$critBkgColor: $critical;
|
||||
$critBorderColor: darken($critBkgColor, 10%);
|
||||
$todayLineColor: $critBkgColor;
|
||||
|
||||
@import '../mermaid';
|
||||
96
assets/css/_mermaid/sequence.scss
Normal file
96
assets/css/_mermaid/sequence.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
.actor {
|
||||
stroke: $actorBorder;
|
||||
fill: $actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: $actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: $actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: '2 2';
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: '2 2';
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
#arrowhead {
|
||||
fill: $signalColor;
|
||||
}
|
||||
|
||||
.sequenceNumber {
|
||||
fill: $sequenceNumberColor;
|
||||
}
|
||||
|
||||
#sequencenumber {
|
||||
fill: $signalColor;
|
||||
}
|
||||
|
||||
#crosshead path {
|
||||
fill: $signalColor !important;
|
||||
stroke: $signalColor !important;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: $signalTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBkgColor;
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText {
|
||||
fill: $loopTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopLine {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: '2 2';
|
||||
stroke: $labelBoxBorderColor;
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
}
|
||||
|
||||
.noteText {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.activation0 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
.activation1 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
.activation2 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
@@ -44,6 +44,51 @@
|
||||
}
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
max-width: 240px;
|
||||
margin-left: 800px;
|
||||
padding: 10px;
|
||||
border-left: 1px solid $global-border-color;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
top: 120px;
|
||||
|
||||
.post-toc-title {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-toc-content {
|
||||
&.always-active ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>nav>ul {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 10px;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-active > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
color: $global-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
h2,
|
||||
h3,
|
||||
@@ -95,25 +140,42 @@
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
border-spacing: 0;
|
||||
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 5px 15px;
|
||||
border: 1px double #ebe9f5;
|
||||
> table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
border-spacing: 0;
|
||||
box-shadow: 2px 2px 3px rgba(0,0,0,.125);
|
||||
background: $table-background-color;
|
||||
|
||||
.dark-theme & {
|
||||
background: $table-background-color-dark;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: $table-thead-color;
|
||||
|
||||
.dark-theme & {
|
||||
background-color: $table-thead-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 5px 15px;
|
||||
border: 1px double $global-border-color;
|
||||
|
||||
.dark-theme & {
|
||||
border: 1px double $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
|
||||
img:hover {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
}
|
||||
|
||||
.image-caption:not(:empty) {
|
||||
@@ -136,10 +198,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img[data-action="zoom"] {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.featured_image {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
@@ -193,6 +251,70 @@
|
||||
@import "../_partial/_post/code";
|
||||
@import "../_partial/_post/admonition";
|
||||
|
||||
.mermaid {
|
||||
@import "../_mermaid/neutral/index";
|
||||
|
||||
.dark-theme & {
|
||||
@import "../_mermaid/dark/index";
|
||||
}
|
||||
}
|
||||
|
||||
.echarts {
|
||||
margin: 3% auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bilibili {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 75%;
|
||||
margin: 3% auto;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
position: relative;
|
||||
border-top: 1px dashed $global-border-color;
|
||||
border-bottom: none;
|
||||
|
||||
.dark-theme & {
|
||||
border-top: 1px dashed $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .25em;
|
||||
background-color: $global-background-color;
|
||||
border: 1px solid $global-border-color;
|
||||
border-bottom-color: $global-border-color;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 -1px 0 $global-border-color;
|
||||
box-shadow: inset 0 -1px 0 $global-border-color;
|
||||
font-size: .8em;
|
||||
line-height: 1.25;
|
||||
font-family: $code-font-family;
|
||||
color: $code-color;
|
||||
|
||||
.dark-theme & {
|
||||
background-color: $global-background-color-dark;
|
||||
border: 1px solid $global-border-color-dark;
|
||||
border-bottom-color: $global-border-color-dark;
|
||||
-webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
|
||||
box-shadow: inset 0 -1px 0 $global-border-color-dark;
|
||||
color: $code-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.typeit {
|
||||
.code {
|
||||
padding: 6px;
|
||||
@@ -246,13 +368,11 @@
|
||||
}
|
||||
|
||||
.post-info {
|
||||
margin-top: 5rem;
|
||||
border-top: 1px solid $global-border-color;
|
||||
margin-top: 3rem;
|
||||
border-bottom: 1px solid $global-border-color;
|
||||
|
||||
.post-info-item {
|
||||
margin: 5px 0;
|
||||
}
|
||||
padding: 1rem 0 0.3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.dark-theme & {
|
||||
border-top: 1px solid $global-border-color-dark;
|
||||
@@ -261,7 +381,7 @@
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
padding: 1rem 0 1rem;
|
||||
padding: 0.3rem 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@@ -3,10 +3,10 @@ pre {
|
||||
padding: 7px;
|
||||
font-size: $code-font-size;
|
||||
font-family: $code-font-family;
|
||||
background: $l-code-background;
|
||||
background: $code-background;
|
||||
|
||||
.dark-theme & {
|
||||
background: $d-code-background;
|
||||
background: $code-background-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,20 +14,20 @@ code {
|
||||
padding: 3px 5px;
|
||||
border-radius: 4px;
|
||||
color: $code-color;
|
||||
background: $l-code-background;
|
||||
background: $code-background;
|
||||
|
||||
.dark-theme & {
|
||||
color: $code-color-dark;
|
||||
background: $d-code-background;
|
||||
background: $code-background-dark;
|
||||
}
|
||||
}
|
||||
|
||||
p > code {
|
||||
background: darken($l-code-background, 3%);
|
||||
background: darken($code-background, 3%);
|
||||
|
||||
.dark-theme & {
|
||||
color: $code-color-dark;
|
||||
background: darken($d-code-background, 3%);
|
||||
background: darken($code-background-dark, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ p > code {
|
||||
overflow-x: auto;
|
||||
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
|
||||
position: relative;
|
||||
background: $l-code-background;
|
||||
background: $code-background;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
@@ -56,11 +56,11 @@ p > code {
|
||||
font-size: $code-font-size;
|
||||
font-weight: bold;
|
||||
color: darken($code-info-color, 10%);
|
||||
background: darken($l-code-background, 3%);
|
||||
background: darken($code-background, 3%);
|
||||
content: 'Code';
|
||||
|
||||
.dark-theme & {
|
||||
background: darken($d-code-background, 3%);
|
||||
background: darken($code-background-dark, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -81,7 +81,7 @@ p > code {
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 40px 7px 10px;
|
||||
padding: 38px 7px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,7 +90,7 @@ p > code {
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 40px 10px 10px;
|
||||
padding: 38px 10px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -100,10 +100,10 @@ p > code {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-color: $l-code-background;
|
||||
border-color: $code-background;
|
||||
|
||||
.dark-theme & {
|
||||
border-color: $d-code-background;
|
||||
border-color: $code-background-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,7 +183,7 @@ p > code {
|
||||
/* GenericTraceback */ .gt { color: #d33682 }
|
||||
|
||||
.dark-theme & {
|
||||
background: $d-code-background;
|
||||
background: $code-background-dark;
|
||||
|
||||
/* Keyword */ .chroma .k { color: #D371E3 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #D371E3 }
|
||||
|
||||
@@ -35,15 +35,27 @@ $pagination-link-color-dark: #a9a9b3 !default;
|
||||
$pagination-link-active-color: #000 !default;
|
||||
$pagination-link-active-color-dark: #fff !default;
|
||||
|
||||
// Color of the table background.
|
||||
$table-background-color: white !default;
|
||||
$table-background-color-dark: #272C34 !default;
|
||||
|
||||
// Color of the table thead.
|
||||
$table-thead-color: #EDEDED !default;
|
||||
$table-thead-color-dark: #20252B !default;
|
||||
|
||||
// ========== Code ========== //
|
||||
// Color of the code.
|
||||
$code-color: #E74C3C !default;
|
||||
$code-color-dark: #E5BF78 !default;
|
||||
|
||||
// Color of the code background.
|
||||
$code-background: whitesmoke !default;
|
||||
$code-background-dark: #272C34 !default;
|
||||
|
||||
$code-info-color: #cacaca !default;
|
||||
|
||||
// Font size of code.
|
||||
$code-font-size: 14px !default;
|
||||
$code-font-size: 13px !default;
|
||||
|
||||
// Font family of the code.
|
||||
$code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace !default;
|
||||
@@ -94,7 +106,3 @@ $code-type-list: (
|
||||
language-toml: "TOML",
|
||||
language-diff: "Diff"
|
||||
) !default;
|
||||
|
||||
// Color of the code background.
|
||||
$l-code-background: #F8F5EC !default;
|
||||
$d-code-background: #272C34 !default;
|
||||
|
||||
Reference in New Issue
Block a user