blob: aae47ec5fad0a8e45c0ef58fa71e8a13ec7c76b8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
// Mermaid 图表样式
// 基础容器样式
.mermaid
display flex
justify-content center
align-items center
margin $margin-l-0 auto
padding $margin-m-2
background $color-text-fourth
border $line-third solid $color-border
border-radius $margin-s-2
cursor pointer
transition all $transition-duration ease
max-width 100%
overflow auto
position relative
// 悬停效果
&:hover
border-color $color-accent
box-shadow 0 4*$px 12*$px rgba(0, 0, 0, 0.1)
// 提示文字
&::after
content "点击放大"
position absolute
bottom $margin-s-2
right $margin-s-2
font-size $font-size-post-tag
color $color-text-secondary
opacity 0
transition opacity $transition-duration
&:hover::after
opacity 1
// SVG 图表样式
svg
max-width 100%
height auto
// Mermaid 放大模态框
.mermaid-modal
display none
position fixed
top 0
left 0
width 100%
height 100%
background $color-overlay
z-index 10000
justify-content center
align-items center
padding $margin-primary
&.active
display flex
// 关闭按钮
.mermaid-close
position absolute
top $margin-m-2
right $margin-m-2
width 48*$px
height 48*$px
background $color-background
border $line-third solid $color-border
border-radius 50%
cursor pointer
display flex
justify-content center
align-items center
font-size 24*$px
color $color-text-primary
transition all $transition-duration
&:hover
background $color-accent
color $color-background
border-color $color-accent
// 放大后的图表容器
.mermaid-content
max-width 95vw
max-height 90vh
overflow auto
background $color-background
padding $margin-l-0
border-radius $margin-s-2
box-shadow 0 8*$px 32*$px rgba(0, 0, 0, 0.3)
svg
display block
max-width none
max-height none
|
