56 lines
1.1 KiB
CSS
56 lines
1.1 KiB
CSS
.floating-action {
|
|
position: fixed;
|
|
bottom: 60px;
|
|
right: max(24px, calc((100vw - 1800px) / 2));
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
height: 60px;
|
|
gap: 12px;
|
|
background: #EC237F;
|
|
border-radius: 9999px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
border: none;
|
|
padding: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
}
|
|
|
|
.floating-action.is-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.floating-action-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
body[class] .floating-action {
|
|
right: max(24px, calc((100vw - 1800px) / 2));
|
|
bottom: 60px;
|
|
width: 60px;
|
|
height: 60px;
|
|
display: flex !important;
|
|
background: #EC237F;
|
|
}
|
|
|
|
body[class] .floating-action-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.floating-action {
|
|
display: none !important;
|
|
}
|
|
}
|