.fake-link-drag {
user-select: none;
}
.fake-link {
color: #0275d8;
cursor: pointer;
transition: color .3s;
}
.fake-link:hover {
color: #0275d8;
text-decoration: underline;
}
.fake-link-namu {
color: #0275d8;
cursor: pointer;
}
.fake-link-namu:hover {
text-decoration: underline;
}
.fake-link-no {
color: #ff0000;
cursor: pointer;
transition: color .3s;
}
.fake-link-no:hover {
color: #ff0000;
text-decoration: underline;
}
.fake-link-no-namu {
color: #ff0000;
cursor: pointer;
}
.fake-link-no-namu:hover {
text-decoration: underline;
}
.fake-link-ex {
color: #009900;
cursor: pointer;
transition: color .3s;
}
.fake-link-ex:hover {
color: #009900;
text-decoration: underline;
}
.fake-link-ex-namu {
color: #009900;
cursor: pointer;
}
.fake-link-ex-namu:hover {
text-decoration: underline;
}
.fake-link-ex-icon {
font-family: 'Font Awesome 5 Free';
font-weight: 600;
user-select: none;
font-size: .8em;
padding: .2em;
color: #ffffff;
background: #009900;
}
.fake-link-bottom-url {
opacity: 0;
transition: opacity .5s ease-in-out;
position: fixed;
bottom: 0;
left: 0;
border-radius: 0 5px 0 0;
background: #38393c;
padding: 0 3px;
font-size: .9em;
color: white;
}
.fake-link:hover .fake-link-no:hover .fake-link-ex:hover .fake-link-bottom-url {
opacity: 1;
}
@media screen and (max-width: 768px) {
.fake-link:active, .fake-link-no:active, .fake-link-ex:active, .fake-link-namu:active, .fake-link-no-namu:active, .fake-link-ex-namu:active {
animation-name: btn-background;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: steps(1, end);
animation-fill-mode: forwards;
}
}
/* 파란 박스가 0.5초 뒤 사라지는 애니메이션 */
@keyframes btn-background {
from {
background: blue;
background: rgba(0, 0, 255, 0.1);
}
to {
background: none;
}
}