gallery/style/shiny/nsfw-warning.css
2024-07-07 22:00:44 +02:00

111 lines
1.5 KiB
CSS

.dialog {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
margin: 0;
z-index: 1000;
background: hsl(340deg, 35%, 15%, 90%);
backdrop-filter: blur(15px);
color: var(--text-col);
display: grid;
}
.dialog-inner {
place-self: center;
display: grid;
grid-template:
"header header"
"icon text"
"buttons buttons"
/ 1fr 3fr;
grid-gap: 0.5em;
align-items: center;
min-height: 20vh;
max-width: 30em;
padding: 1.5em 3em 2em;
background: var(--background);
border: var(--border);
border-radius: var(--border-radius);
}
.dialog h1 {
margin: 0;
grid-area: header;
justify-self: center;
}
.dialog-icon {
height: 3em;
width: 3em;
grid-area: icon;
justify-self: center;
}
.dialog-message {
grid-area: text;
justify-self: start;
font-size: 125%;
}
.dialog-buttons {
grid-area: buttons;
justify-self: center;
display: flex;
justify-content: center;
margin-top: 1em;
}
.dialog-buttons > * {
margin: 0 1em;
}
.dialog button {
border: none;
border-radius: 0.75em;
padding: 0.5em 1em;
font-family: Muller;
font-weight: 600;
font-size: inherit;
color: black;
position: relative;
cursor: pointer;
}
.dialog button a {
inset: 0;
width: max-content;
text-decoration: none;
}
.dialog .yes {
background: hsl(100deg, 70%, 80%);
}
.dialog .no {
background: hsl(5deg, 70%, 80%);
}
.dialog p {
text-align: left;
-ms-hyphens: none;
hyphens: none;
}
.dialog strong {
font-weight: 800;
}
@media (pointer: coarse) {
button {
font-size: 150%;
}
}