Follow popup clickable (#1839)

* Made follow popup clickable

* Fixed follow-poput styling

* had commented out visits check
This commit is contained in:
t1enne
2022-04-17 20:59:05 +02:00
committed by GitHub
parent 770b5d05f0
commit efbe4bc3a3
2 changed files with 62 additions and 39 deletions

View File

@@ -270,6 +270,13 @@ header {
.single-col #external-actions-container {
justify-content: flex-start;
}
.single-col #follow-button-popup {
left: 0px;
}
.single-col #follow-button-popup::before {
left: 24px;
right: auto;
}
@media screen and (max-height: 500px) {
.single-col.touch-screen:not(.touch-keyboard-active) {
@@ -564,16 +571,50 @@ header {
#notify-button-container #follow-button-popup {
position: absolute;
background-color: var(--owncast-purple);
z-index: 1;
right: 30px;
bottom: 42px;
right: 0px;
min-width: 14rem;
bottom: calc(100% + .5rem);
opacity: 0;
transform: translateY(0%);
animation: fade-in 300ms forwards;
animation-delay: 1s;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(-20%);
} to {
opacity: 1;
transform: translateY(0);
}
}
#notify-button-container .external-action-icon {
margin: 0.25em 0.5em 0.25em 0.5em;
}
#notify-button-container button {
border-color: #b8bbc2;
border-width: 1px;
/* #notify-button-container button { */
/* border-color: #b8bbc2; */
/* border-width: 1px; */
/* } */
#follow-button-popup::before {
position: absolute;
z-index: -1;
content: "";
right: 1.5rem;
top: 100%;
border-style: solid;
border-width: .5rem .5rem .0rem;
border-color: var(--owncast-purple) transparent transparent;
transition-duration: 0.3s;
transition-property: transform;
}
#follow-button-popup .popout-close-button {
background-color: #fdf9f91c;
}