89 lines
1.4 KiB
CSS
89 lines
1.4 KiB
CSS
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
right: 48px;
|
||
|
|
top: 48px;
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
opacity: 0.8;
|
||
|
|
background-color: rgba(0,0,0,0.5);
|
||
|
|
}
|
||
|
|
.close:hover {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
.close:before, .close:after {
|
||
|
|
position: absolute;
|
||
|
|
left: 23px;
|
||
|
|
top: 3px;
|
||
|
|
content: ' ';
|
||
|
|
height: 40px;
|
||
|
|
width: 2px;
|
||
|
|
background-color: #333;
|
||
|
|
}
|
||
|
|
.close:before {
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
.close:after {
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
div.arrow {
|
||
|
|
position: fixed;
|
||
|
|
cursor: pointer;
|
||
|
|
height: 70px;
|
||
|
|
width: 70px;
|
||
|
|
background-color: #000;
|
||
|
|
opacity: .5;
|
||
|
|
border-radius: 10px;
|
||
|
|
z-index: 90;
|
||
|
|
}
|
||
|
|
div.arrow:hover {
|
||
|
|
opacity: .9;
|
||
|
|
box-shadow: 0px 0px 0px 2px #dac8d2;
|
||
|
|
border-radius: 10px;
|
||
|
|
transition: .1s ease-in;
|
||
|
|
}
|
||
|
|
div.arrow:before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 7%;
|
||
|
|
left: 7%;
|
||
|
|
height: 60px;
|
||
|
|
width: 60px;
|
||
|
|
background-color: rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
div.top:before {
|
||
|
|
clip-path: polygon(0% 77%, 50% 23%, 100% 77%);
|
||
|
|
}
|
||
|
|
div.bottom:before {
|
||
|
|
clip-path: polygon(0% 23%, 100% 23%, 50% 77%);
|
||
|
|
}
|
||
|
|
div.left:before {
|
||
|
|
clip-path: polygon(23% 50%, 77% 0%, 77% 100%);
|
||
|
|
}
|
||
|
|
div.right:before {
|
||
|
|
clip-path: polygon(23% 0%, 77% 50%, 23% 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
div.arrow.top {
|
||
|
|
top: 80px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
div.arrow.bottom {
|
||
|
|
bottom: 80px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
div.arrow.left {
|
||
|
|
left: 20px;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
div.arrow.right {
|
||
|
|
right: 20px;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|