|
|
@ -88,3 +88,50 @@ body |
|
|
|
opacity: 0.3; |
|
|
|
transition: width ease-in-out 0.5s, opacity 0.5s; |
|
|
|
} |
|
|
|
|
|
|
|
.selectColor { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.cc{ |
|
|
|
position: absolute; |
|
|
|
width: 10vw; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
#cc-blue{ |
|
|
|
top: 20vw; |
|
|
|
left: 50vw; |
|
|
|
transition: top 0.5s, left 0.5s; |
|
|
|
} |
|
|
|
#cc-green{ |
|
|
|
top: 20vw; |
|
|
|
right: 50vw; |
|
|
|
transition: top 0.5s, right 0.5s; |
|
|
|
} |
|
|
|
#cc-yellow{ |
|
|
|
top: 10vw; |
|
|
|
right: 50vw; |
|
|
|
transition: top 0.5s, right 0.5s; |
|
|
|
} |
|
|
|
#cc-red{ |
|
|
|
top: 10vw; |
|
|
|
left: 50vw; |
|
|
|
transition: top 0.5s, left 0.5s; |
|
|
|
} |
|
|
|
#cc-blue:hover{ |
|
|
|
top: calc(20vw + 15px); |
|
|
|
left: calc(50vw + 15px); |
|
|
|
} |
|
|
|
#cc-red:hover{ |
|
|
|
top: calc(10vw - 15px); |
|
|
|
left: calc(50vw + 15px); |
|
|
|
} |
|
|
|
#cc-yellow:hover{ |
|
|
|
top: calc(10vw - 15px); |
|
|
|
right: calc(50vw + 15px); |
|
|
|
} |
|
|
|
#cc-green:hover{ |
|
|
|
top: calc(20vw + 15px); |
|
|
|
right: calc(50vw + 15px); |
|
|
|
} |