add nsfw warning dialog
This commit is contained in:
parent
d671a4c01e
commit
c807895244
12 changed files with 346 additions and 102 deletions
|
|
@ -17,6 +17,13 @@
|
|||
--focus-box: 0 0 20px hsl(55deg, 60%, 90%, 80%);
|
||||
--focus-text: hsl(334deg, 87%, 90%);
|
||||
|
||||
--shadow-col: hsl(42deg, 82%, 90%, 75%);
|
||||
--border-col: var(--text-col);
|
||||
--border: 3px solid var(--border-col);
|
||||
--border-radius: 1.5em;
|
||||
--shadow: 0 0 3em var(--shadow-col);
|
||||
--background: hsla(0, 0%, 0%, 60%);
|
||||
|
||||
font-family: Muller;
|
||||
font-size: x-large;
|
||||
font-weight: 600;
|
||||
|
|
@ -35,18 +42,15 @@ h1 { font-size: 300%; }
|
|||
h2 { font-size: 125%; }
|
||||
h3 { font-size: 110%; }
|
||||
|
||||
body {
|
||||
--shadow: hsl(42deg, 82%, 90%, 75%);
|
||||
--border-col: var(--text-col);
|
||||
|
||||
background: hsla(0, 0%, 0%, 60%);
|
||||
border: 3px solid var(--border-col);
|
||||
box-shadow: 0 0 3em var(--shadow);
|
||||
.page {
|
||||
background: var(--background);
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
|
||||
padding: 2em 4em;
|
||||
margin: 3em auto 3.5em;
|
||||
border-radius: 1.5em;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
color: var(--text-col);
|
||||
--text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%);
|
||||
|
|
@ -207,7 +211,7 @@ dd + dt {
|
|||
}
|
||||
|
||||
body {
|
||||
--shadow: hsl(42deg, 82%, 90%, 20%);
|
||||
--shadow-col: hsl(42deg, 82%, 90%, 20%);
|
||||
--border-col: black;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
@import url(base.css);
|
||||
@import url(nsfw-warning.css);
|
||||
|
||||
:root {
|
||||
--image-size: 200px;
|
||||
}
|
||||
|
||||
body {
|
||||
.page {
|
||||
--gap: 1em;
|
||||
max-width: calc(4 * var(--image-size) + 3 * var(--gap));
|
||||
padding-left: 4em;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
body {
|
||||
.page {
|
||||
width: 37.5em;
|
||||
}
|
||||
|
||||
|
|
|
|||
78
style/shiny/nsfw-warning.css
Normal file
78
style/shiny/nsfw-warning.css
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
.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: 60vw;
|
||||
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;
|
||||
}
|
||||
|
||||
.dialog-buttons {
|
||||
grid-area: buttons;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.dialog button + button {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.dialog button {
|
||||
border: none;
|
||||
border-radius: 0.75em;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
font-family: Muller;
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
}
|
||||
|
||||
button.yes {
|
||||
background: hsl(100deg, 70%, 80%);
|
||||
}
|
||||
|
||||
button.no {
|
||||
background: hsl(5deg, 70%, 80%);
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
@import url(base.css);
|
||||
@import url(nsfw-warning.css);
|
||||
|
||||
:root {
|
||||
--image-width: 1000px;
|
||||
}
|
||||
|
||||
body {
|
||||
.page {
|
||||
max-width: var(--image-width);
|
||||
}
|
||||
|
||||
|
|
|
|||
74
style/stop_hand.svg
Normal file
74
style/stop_hand.svg
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
stroke-linejoin="round"
|
||||
stroke-miterlimit="2"
|
||||
viewBox="0 0 32 32"
|
||||
version="1.1"
|
||||
id="svg17"
|
||||
sodipodi:docname="hand_paw_c2.svg"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
|
||||
<defs
|
||||
id="defs21" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="711"
|
||||
inkscape:window-height="480"
|
||||
id="namedview19"
|
||||
showgrid="false"
|
||||
inkscape:zoom="7.375"
|
||||
inkscape:cx="16"
|
||||
inkscape:cy="16"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g15" />
|
||||
<clipPath
|
||||
id="a">
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="m0 0h32v32h-32z"
|
||||
id="path2" />
|
||||
</clipPath>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<path
|
||||
d="m0 0h32v32h-32z"
|
||||
fill="none"
|
||||
id="path7" />
|
||||
<g
|
||||
clip-path="url(#a)"
|
||||
id="g15">
|
||||
<path
|
||||
d="m11.414 2.609c.714-1.542 2.276-2.613 4.086-2.613 1.914 0 3.551 1.198 4.201 2.885 1.043-.77 2.41-1.085 3.764-.747 2.41.603 3.877 3.048 3.275 5.457l-1.701 6.805c1.822-.775 4.012-.42 5.496 1.065 1.952 1.951 1.952 5.119 0 7.071 0 0-3.608 3.608-5.979 5.979-2.234 2.234-5.264 3.489-8.423 3.489h-.133v-.004h-1.035c-5.571 0-10.426-3.79-11.778-9.194-1.19-4.754-2.68-10.71-2.68-10.71-.603-2.409.863-4.854 3.272-5.457.293-.074.586-.116.877-.131-.004-2.126 1.507-4.021 3.671-4.427 1.103-.207 2.187.009 3.087.532z"
|
||||
id="path9" />
|
||||
<path
|
||||
d="m13 4.493c.002-.313.059-.622.173-.913.189-.478.526-.891.955-1.173.211-.14.444-.247.688-.316.263-.075.539-.106.813-.092.279.015.556.076.816.182.288.118.554.291.779.506.233.221.422.488.555.781.146.323.219.673.221 1.028v8.689.315c.001.067.013.133.039.195.081.191.279.315.487.304.058-.003.115-.016.169-.038.055-.024.106-.058.15-.099.046-.044.084-.098.111-.156.029-.065.043-.135.044-.206v-3.812l.949-3.794c.334-1.339 1.693-2.154 3.031-1.819 1.339.334 2.154 1.693 1.819 3.031l-2.799 11.198v1.449l2.879-2.878c1.17-1.171 3.071-1.171 4.242 0s1.171 3.072 0 4.242c0 0-3.608 3.609-5.979 5.98-1.859 1.859-4.38 2.903-7.009 2.903h-.133v-.004h-1.039c-4.65 0-8.705-3.163-9.836-7.674-1.193-4.755-2.687-10.714-2.687-10.714-.336-1.338.478-2.697 1.817-3.033.664-.166 1.333-.05 1.879.273l1.123 6.734c.012.07.038.137.077.196.036.053.082.1.135.136.05.034.106.058.165.072.056.014.115.017.173.011.206-.024.381-.178.429-.381.016-.065.017-.132.007-.198l-1.554-9.324c.01-.062.023-.124.038-.185.076-.312.213-.609.401-.87.182-.253.411-.471.673-.64.236-.152.496-.264.769-.329.266-.064.543-.085.815-.06.253.023.501.085.735.183.473.199.881.543 1.154.978.167.266.28.56.339.868l.387 2.062v5.899c.001.067.013.133.039.195.081.191.279.315.487.304.058-.003.115-.016.169-.038.055-.024.106-.058.15-.099.046-.044.084-.098.111-.156.029-.065.043-.135.044-.206z"
|
||||
fill="#00e2d7"
|
||||
id="path11" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
Loading…
Add table
Add a link
Reference in a new issue