forked from nerdydrew/Random-Pokemon-Generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
71 lines (57 loc) · 3.65 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
html,div,dl,dt,dd,ul,ol,li,pre,form,label,fieldset,p,blockquote,input{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0}
html{background:#FFF;color:#333;font:.875em/1.5 "Helvetica Neue",Arial,sans-serif;text-align:center}
body{max-width:40em;margin:0 auto;padding:.5em}
h1{font-weight:700;font-size:2em;margin:0}
h2{font-weight:400;color:#666;font-size:1.25em;font-style:italic;font-family:Georgia,serif;margin:.25em 0 .5em}
p,ul,ol{margin:0 0 1em}
article,section{margin:1em 0}
a{color:#000;text-decoration:none;border-bottom:1px solid #AAA}
a:hover{color:#666}
fieldset{border:0;cursor:default;line-height:2;margin:1em 0}
label{white-space:nowrap}
label,select{margin-right:1em}
label select{margin:0}
input[type="checkbox"]{vertical-align:baseline;margin-right:.25em}
input[type="button"],input[type="submit"]{padding:.125em .25em;cursor:pointer;font-size:1em}
abbr{cursor:help;border-bottom:1px dotted;text-decoration:none}
.clear{clear:both}
header{margin:1em 0}
#controls,#controls:before{border:1px solid #000;border-radius:2px}
#controls{padding:.5em 1em;border-bottom-width:2px;position:relative;z-index:10;margin:0 auto;display:inline-block}
#controls:before{border-top-width:2px;content:"";display:block;position:absolute;z-index:-1;top:1px;left:1px;right:1px;bottom:1px}
.loading:after{position:absolute;top:50%;right:4%;z-index:-2;content:"";width:1em;height:1em;margin:-1em 0 0;
border-radius:1em;border:.25em solid;border-color:currentColor transparent;
animation:1.25s linear infinite rotate, .5s ease-out 0s 1 fadeIn}
#results li{display:inline-block;height:calc(3em + 128px);width:33%;margin-bottom:1em;position:relative;list-style:none;animation:.5s ease-out 0s 1 fadeIn}
#results .nature{color:#888}#results .star{color:#F4D04D}
#results li.shiny:before,#results li.shiny:after,#results li.shiny .star:before,#results li.shiny .star:after{
content:"\2605";position:absolute;top:50%;left:50%;font-size:.75em;opacity:0;pointer-events:none;z-index:100}
#results li.shiny:before {animation:.6s steps(8) .075s 1 rotateStar, .075s alternate steps(2) infinite shine;font-size:1.5em}
#results li.shiny:after {animation:.6s steps(8) .150s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results li.shiny .star:before{animation:.6s steps(8) .225s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results li.shiny .star:after {animation:.6s steps(8) .300s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results img{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
#results li.imageless{font-weight:700;margin:2em 0;height:auto}
footer{font-size:.875em;padding:3em 0;color:#666;clear:both}
@media screen and (max-width:27em){header{font-size:.75em}}
@media screen and (max-width:21em){header{font-size:.625em}}
@media screen and (max-width:420px){#results li{width:49%}}
@media screen and (max-width:308px){#results li{float:none;width:auto}}
@media screen and (prefers-color-scheme: dark) {
html{background:#222;color:#FFF}
h2,footer{color:#CCC}
#controls,#controls:before{border-color:#FFF}
a{color:#DDD;border-bottom-color:#777}
a:hover{color:#FFF}
}
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes rotate { from {transform:rotate(0deg)} to {transform:rotate(360deg)} }
@keyframes shine {
from{color:#F8F838;text-shadow:2px 0 #F88008, -2px 0 #F88008, 0 2px #F88008, 0 -2px #F88008}
to {color:#F8F8F8;text-shadow:2px 0 #F8F838, -2px 0 #F8F838, 0 2px #F8F838, 0 -2px #F8F838}
}
@keyframes rotateStar {
from{opacity:1;transform:rotate( .4turn) translate(45px) rotate(-.4turn)}
to {opacity:1;transform:rotate(-.5turn) translate(45px) rotate( .5turn)}
}