Skip to content

Commit c9e9bb8

Browse files
codeyomacodeyoma
committed
Quartz sync: May 26, 2025, 10:49 PM
1 parent eeaa011 commit c9e9bb8

File tree

1 file changed

+134
-134
lines changed

1 file changed

+134
-134
lines changed

‎quartz/components/styles/markmap.scss‎

Lines changed: 134 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,152 @@
11
@use "../../styles/variables.scss" as *;
22

33
.markmap {
4-
&>.global-markmap-outer {
5-
position: fixed;
6-
z-index: 9999;
7-
left: 0;
4+
&>.global-markmap-outer {
5+
position: fixed;
6+
z-index: 9999;
7+
left: 0;
8+
top: 0;
9+
width: 100vw;
10+
height: 100%;
11+
backdrop-filter: blur(4px);
12+
display: none;
13+
overflow: hidden;
14+
15+
&.active {
16+
display: inline-block;
17+
}
18+
19+
&>.global-markmap-container {
20+
border: 1px solid var(--lightgray);
21+
background-color: var(--light);
22+
border-radius: 5px;
23+
box-sizing: border-box;
24+
position: fixed;
25+
top: 50%;
26+
left: 50%;
27+
transform: translate(-50%, -50%);
28+
height: 80vh;
29+
width: 80vw;
30+
transition: width 0.2s ease, height 0.2s ease, top 0.2s ease, left 0.2s ease, transform 0.2s ease;
31+
32+
&.fullscreen {
833
top: 0;
34+
left: 0;
35+
transform: none;
936
width: 100vw;
37+
height: 100vh;
38+
}
39+
40+
@media all and not ($desktop) {
41+
width: 90%;
42+
}
43+
44+
#global-markmap {
45+
position: absolute;
46+
width: 100%;
1047
height: 100%;
11-
backdrop-filter: blur(4px);
12-
display: none;
13-
overflow: hidden;
48+
z-index: 0;
49+
color: var(--darkgray);
50+
cursor: grab;
51+
pointer-events: all;
52+
53+
54+
pre {
55+
padding: 0;
56+
position: static;
57+
}
58+
59+
& span {
60+
position: static;
61+
62+
.katex-html {
63+
display: none;
64+
}
65+
}
66+
67+
code {
68+
border-radius: 3px;
69+
padding: 0.12em;
70+
}
71+
72+
img {
73+
margin-top: 1em;
74+
margin-bottom: 0;
75+
}
76+
}
77+
78+
#global-markmap g.markmap-node {
79+
pointer-events: all;
80+
}
81+
82+
#global-markmap g.markmap-node text,
83+
#global-markmap g.markmap-node foreignObject,
84+
#global-markmap g.markmap-node foreignObject * {
85+
user-select: none !important;
86+
-webkit-user-select: none !important;
87+
pointer-events: none !important;
88+
}
89+
90+
#global-markmap g.markmap-node foreignObject a {
91+
pointer-events: auto !important;
92+
user-select: text !important;
93+
}
94+
95+
#global-markmap-toolbar {
96+
position: absolute;
97+
top: 10;
98+
left: 0;
99+
right: 0;
100+
width: 100%;
101+
z-index: 10;
102+
color: var(--italic);
14103

15-
&.active {
16-
display: inline-block;
104+
.mm-toolbar-brand {
105+
display: none;
17106
}
18107

19-
&>.global-markmap-container {
20-
border: 1px solid var(--lightgray);
21-
background-color: var(--light);
22-
border-radius: 5px;
23-
box-sizing: border-box;
24-
position: fixed;
25-
top: 50%;
26-
left: 50%;
27-
transform: translate(-50%, -50%);
28-
height: 80vh;
29-
width: 80vw;
30-
transition: width 0.2s ease, height 0.2s ease, top 0.2s ease, left 0.2s ease, transform 0.2s ease;
31-
32-
&.fullscreen {
33-
top: 0;
34-
left: 0;
35-
transform: none;
36-
width: 100vw;
37-
height: 100vh;
38-
}
39-
40-
@media all and not ($desktop) {
41-
width: 90%;
42-
}
43-
44-
#global-markmap {
45-
position: absolute;
46-
width: 100%;
47-
height: 100%;
48-
z-index: 0;
49-
color: var(--darkgray);
50-
cursor: grab;
51-
pointer-events: all;
52-
53-
54-
pre {
55-
padding: 0;
56-
position: static;
57-
}
58-
59-
& span {
60-
position: static;
61-
62-
.katex-html {
63-
display: none;
64-
}
65-
}
66-
67-
code {
68-
border-radius: 5px;
69-
padding: 0.12em;
70-
}
71-
72-
img {
73-
margin-top: 1em;
74-
margin-bottom: 0;
75-
}
76-
}
77-
78-
#global-markmap g.markmap-node {
79-
pointer-events: all;
80-
}
81-
82-
#global-markmap g.markmap-node text,
83-
#global-markmap g.markmap-node foreignObject,
84-
#global-markmap g.markmap-node foreignObject * {
85-
user-select: none !important;
86-
-webkit-user-select: none !important;
87-
pointer-events: none !important;
88-
}
89-
90-
#global-markmap g.markmap-node foreignObject a {
91-
pointer-events: auto !important;
92-
user-select: text !important;
93-
}
94-
95-
#global-markmap-toolbar {
96-
position: absolute;
97-
top: 10;
98-
left: 0;
99-
right: 0;
100-
width: 100%;
101-
z-index: 10;
102-
color: var(--italic);
103-
104-
.mm-toolbar-brand {
105-
display: none;
106-
}
107-
108-
.mm-toolbar {
109-
display: flex !important;
110-
flex-direction: row !important;
111-
justify-content: center;
112-
align-items: center;
113-
gap: 0.5rem;
114-
115-
.mm-toolbar-item {
116-
cursor: pointer;
117-
}
118-
119-
.active {
120-
filter: drop-shadow(0 0 0 currentColor) drop-shadow(0 0 2px currentColor);
121-
}
122-
}
123-
}
108+
.mm-toolbar {
109+
display: flex !important;
110+
flex-direction: row !important;
111+
justify-content: center;
112+
align-items: center;
113+
gap: 0.5rem;
114+
115+
.mm-toolbar-item {
116+
cursor: pointer;
117+
}
118+
119+
.active {
120+
filter: drop-shadow(0 0 0 currentColor) drop-shadow(0 0 2px currentColor);
121+
}
124122
}
123+
}
125124
}
125+
}
126126

127127
}
128128

129129
.markmapmode {
130-
cursor: pointer;
131-
padding: 0;
132-
position: relative;
133-
background: none;
134-
border: none;
130+
cursor: pointer;
131+
padding: 0;
132+
position: relative;
133+
background: none;
134+
border: none;
135+
width: 20px;
136+
height: 20px;
137+
text-align: inherit;
138+
flex-shrink: 0;
139+
display: flex;
140+
141+
& svg {
142+
position: absolute;
135143
width: 20px;
136144
height: 20px;
137-
text-align: inherit;
138-
flex-shrink: 0;
139-
display: flex;
140-
141-
& svg {
142-
position: absolute;
143-
width: 20px;
144-
height: 20px;
145-
top: 50%;
146-
left: 50%;
147-
transform: translate(-50%, -50%) rotate(270deg);
148-
fill: var(--darkgray);
149-
stroke: var(--darkgray);
150-
transition: opacity 0.1s ease;
151-
}
145+
top: 50%;
146+
left: 50%;
147+
transform: translate(-50%, -50%) rotate(270deg);
148+
fill: var(--darkgray);
149+
stroke: var(--darkgray);
150+
transition: opacity 0.1s ease;
151+
}
152152
}

0 commit comments

Comments
 (0)