-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlucide-buttons.css
41 lines (34 loc) · 2.3 KB
/
lucide-buttons.css
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
/* Lucide titlebar buttons */
body {
--lucide-cross: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--lucide-minus: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--lucide-maximize: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'%3E%3C/path%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'%3E%3C/path%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'%3E%3C/path%3E%3C/svg%3E");
--lucide-minimize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-minimize'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3'/%3E%3Cpath d='M21 8h-3a2 2 0 0 1-2-2V3'/%3E%3Cpath d='M3 16h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
}
.titlebar-button:not(.mod-logo) svg {
mask-size: cover;
-webkit-mask-size: cover;
background-color: var(--icon-color);
color: transparent;
width: var(--icon-s);
height: var(--icon-s);
}
.titlebar-button:not(.mod-logo) {
padding: 0 var(--size-4-3);
}
.titlebar-button.mod-minimize svg {
mask-image: var(--lucide-minus);
-webkit-mask-image: var(--lucide-minus);
}
.titlebar-button.mod-maximize svg {
mask-image: var(--lucide-maximize);
-webkit-mask-image: var(--lucide-maximize);
}
.is-maximized .titlebar-button.mod-maximize svg {
mask-image: var(--lucide-minimize);
-webkit-mask-image: var(--lucide-minimize);
}
.titlebar-button.mod-close svg {
mask-image: var(--lucide-cross);
-webkit-mask-image: var(--lucide-cross);
}