update overlay design

This commit is contained in:
Spedon
2023-03-18 01:12:01 +08:00
parent 28ad9cb099
commit 3247219da8
3 changed files with 61 additions and 97 deletions

View File

@@ -1,38 +1,15 @@
.overlay {
background-color: transparent;
position: absolute;
.overlay_cursor {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
display: grid;
mix-blend-mode: difference;
font-size: 19px;
box-sizing: border-box;
cursor: none;
grid-template-columns: repeat(3, 1fr);
user-select: none;
section {
width: 100%;
height: 100%;
}
.overlay_cursor {
position: absolute;
translate: -50% -110%;
font-size: 24px;
letter-spacing: 2px;
font-weight: bold;
color: greenyellow;
-webkit-text-stroke: 1px #fff;
}
.prev_section:hover > .overlay_cursor::after {
content: 'PREV';
}
.close_section:hover > .overlay_cursor::after {
content: 'CLOSE';
}
.next_section:hover > .overlay_cursor::after {
content: 'NEXT';
.cursor_innerText {
color: white;
transform: translate3d(-50%, -50%, 0);
}
}