90 lines
1.6 KiB
CSS
90 lines
1.6 KiB
CSS
img[tabindex="0"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
img[tabindex="0"]:focus-visible {
|
|
outline: .15rem solid var(--color-teal);
|
|
}
|
|
|
|
dialog {
|
|
margin: auto;
|
|
flex-flow: column;
|
|
background: transparent;
|
|
border: none;
|
|
position: absolute;
|
|
}
|
|
|
|
dialog[open] {
|
|
display: flex;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background-color: rgba(from var(--color-bg) r g b / .8);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
body:has(dialog[open]) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.close-dialog {
|
|
background-color: rgba(from var(--color-teal) r g b / .35);
|
|
font-size: 1.5rem;
|
|
padding: 0 .5rem .15rem;
|
|
border-radius: 1rem;
|
|
color: var(--color-teal);
|
|
box-shadow: .15rem .15rem var(--color-shadow);
|
|
border: .08rem solid var(--color-teal);
|
|
align-self: flex-end;
|
|
justify-self: flex-start;
|
|
margin: 0 .1rem;
|
|
/* Click animation handling */
|
|
position: relative;
|
|
top: 1rem;
|
|
left: -.15rem;
|
|
transition: top .1s ease-in, left .1s ease-in;
|
|
}
|
|
|
|
.close-dialog:focus-visible {
|
|
outline: none;
|
|
background-color: var(--color-teal);
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
.close-dialog:hover {
|
|
outline: none;
|
|
background-color: var(--color-teal);
|
|
color: var(--color-bg);
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.close-dialog:focus-visible {
|
|
outline-offset: .08rem;
|
|
outline: .08rem solid;
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
.close-dialog:hover {
|
|
outline-offset: .08rem;
|
|
outline: .08rem solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Click animation */
|
|
.close-dialog:active {
|
|
top: 1.1rem;
|
|
left: -.05rem;
|
|
box-shadow: .05rem .05rem var(--color-shadow);
|
|
}
|
|
|
|
.modal-img {
|
|
max-height: calc(90vh - 2rem);
|
|
object-fit: contain;
|
|
width: auto;
|
|
max-width: 90%;
|
|
margin: 0 auto;
|
|
}
|
