92 lines
1.6 KiB
CSS
92 lines
1.6 KiB
CSS
div.close {
|
|
position: fixed;
|
|
cursor: pointer;
|
|
height: 48px;
|
|
width: 48px;
|
|
opacity: .5;
|
|
border-radius: 10px;
|
|
z-index: 90;
|
|
top: 80px;
|
|
right: 10px;
|
|
}
|
|
div.close:hover {
|
|
opacity: .9;
|
|
box-shadow: 0px 0px 0px 2px #dac8d2;
|
|
border-radius: 10px;
|
|
transition: .1s ease-in;
|
|
}
|
|
div.close:before {
|
|
content: '';
|
|
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
|
position: absolute;
|
|
top: 7%;
|
|
right: 7%;
|
|
height: 41px;
|
|
width: 41px;
|
|
background-color: rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
|
|
div.arrow {
|
|
position: absolute;
|
|
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: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
div.arrow.bottom {
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
div.arrow.left {
|
|
position: fixed !important;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
div.arrow.right {
|
|
position: fixed !important;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|