2023-04-30 13:38:30 +02:00
|
|
|
#image-highlighter {
|
2024-02-16 22:49:06 +01:00
|
|
|
position: fixed;
|
|
|
|
display: flex;
|
|
|
|
inset: 0;
|
|
|
|
z-index: 10000;
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
visibility: hidden;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
transition:
|
|
|
|
visbility 0.1s linear,
|
|
|
|
background-color 0.1s linear;
|
2023-04-30 13:38:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#image-highlighter > * {
|
2024-02-16 22:49:06 +01:00
|
|
|
max-width: 80vw;
|
|
|
|
max-height: 80vh;
|
|
|
|
animation: image-highlight 0.1s linear;
|
|
|
|
transition:
|
|
|
|
transform 0.1s linear,
|
|
|
|
opacity 0.1s linear;
|
2023-04-30 13:38:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#image-highlighter > *.remove {
|
2024-02-16 22:49:06 +01:00
|
|
|
transform: scale(0.8) !important;
|
|
|
|
opacity: 0 !important;
|
2023-04-30 13:38:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#image-highlighter:not(:empty) {
|
2024-02-16 22:49:06 +01:00
|
|
|
background-color: rgba(0, 0, 0, 0.37);
|
|
|
|
visibility: visible;
|
2023-04-30 13:38:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes image-highlight {
|
2024-02-16 22:49:06 +01:00
|
|
|
from {
|
|
|
|
transform: scale(0.8);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
transform: scale(1);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|