gallery/style/shiny/nsfw-warning.css

112 lines
1.5 KiB
CSS
Raw Normal View History

2020-10-06 16:07:39 -04:00
.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;
2023-08-06 00:12:10 -04:00
gap: 0.5em;
2020-10-06 16:07:39 -04:00
align-items: center;
min-height: 20vh;
2022-01-03 14:45:55 -05:00
max-width: 30em;
2020-10-06 16:07:39 -04:00
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;
2022-01-03 14:45:55 -05:00
font-size: 125%;
2020-10-06 16:07:39 -04:00
}
.dialog-buttons {
grid-area: buttons;
justify-self: center;
2020-10-06 16:41:26 -04:00
display: flex;
justify-content: center;
2021-04-16 12:02:42 -04:00
margin-top: 1em;
2020-10-06 16:07:39 -04:00
}
.dialog-buttons > * {
margin: 0 1em;
2020-10-06 16:07:39 -04:00
}
.dialog button {
border: none;
border-radius: 0.75em;
padding: 0.5em 1em;
font-family: Muller;
font-weight: 600;
2021-12-03 01:24:10 -05:00
font-size: inherit;
2020-10-06 16:07:39 -04:00
color: black;
position: relative;
cursor: pointer;
}
.dialog button a {
inset: 0;
width: max-content;
text-decoration: none;
2020-10-06 16:07:39 -04:00
}
2021-04-16 12:02:42 -04:00
.dialog .yes {
2020-10-06 16:07:39 -04:00
background: hsl(100deg, 70%, 80%);
}
2021-04-16 12:02:42 -04:00
.dialog .no {
2020-10-06 16:07:39 -04:00
background: hsl(5deg, 70%, 80%);
}
2020-10-06 16:41:26 -04:00
2022-01-03 14:45:55 -05:00
.dialog p {
text-align: left;
-ms-hyphens: none;
hyphens: none;
}
.dialog strong {
font-weight: 800;
}
2020-10-06 16:41:26 -04:00
@media (pointer: coarse) {
button {
font-size: 150%;
}
}