personal-website/src/styles/dot.css
2024-05-11 17:20:49 +08:00

24 lines
588 B
CSS

html.dark {
--dot-bg-color: #0d1117;
--dot-color: #2f353c;
--dot-mask-color: #000000;
}
html:not(.dark) {
--dot-bg-color: #ffffff;
--dot-color: #a5aeb850;
--dot-mask-color: #ffffff;
}
.bg-dot::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--dot-bg-color) 22px, transparent 1%) 50%,
linear-gradient(var(--dot-bg-color) 22px, transparent 1%) 50%,
var(--dot-color);
background-position: center center;
background-size: 24px 24px;
mask-image: linear-gradient(0deg, transparent 5%, var(--dot-mask-color));
}