-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.css
84 lines (57 loc) · 4.16 KB
/
main.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
72
73
74
75
76
77
78
79
80
81
82
83
84
/*@import url(//db.onlinewebfonts.com/c/f4d1593471d222ddebd973210265762a?family=Pokemon);
@import url(//https://fonts.googleapis.com/css?family=Open+Sans&display=swap);
@font-face {
font-family: latin-modern-sans;
src: url("/assets/fonts/LATIN-MODERN-SANS/Imsans10-bold.otf") format("opentype");
}
*/
/* global styling*/
body { font-family: "latin-modern-sans"; margin: 0; background-color: #94E6C8; -ms-overflow-style: none; scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }
p { margin: 0; }
.background { background: linear-gradient(0deg, rgba(148, 230, 200, 1) 0%, rgba(179, 237, 175, 1) 24%, rgba(203, 242, 175, 1) 66%, rgba(253, 254, 253, 1) 100%); }
.pokemon-font { font-family: pokemon!important; color: #ffcc03; -webkit-text-stroke: 2px #356ABC; }
canvas { margin: 0 auto; }
.header-button { font-size: 48px; }
#button-back { border: none; background: none; color: #E07F16; font-size: 24px; font-weight: bold; display: flex; align-items: center;}
/* header styling */
.filter-orange { margin: 10px; height: 35px; filter: invert(43%) sepia(82%) saturate(1595%) hue-rotate(10deg) brightness(106%) contrast(83%); }
.pokedex-header { max-height: 200px; width: 100%; display: absolute; box-shadow: 0px 0px 100px 2px #37C7AD40; }
.header-top { background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 28%, rgba(148, 230, 200, 1) 28%, rgba(179, 237, 175, 1) 58%, rgba(200, 255, 171, 1) 80%); }
.pokemon-general-wrapper::after { position: absolute; content: ""; display: inline-block; height: 4px; background-color: #37C7AD; width: 50%; align-self: flex-end; }
/* header detail */
.pokemon-general { display: flex; align-items: center; justify-content: space-evenly; font-size: 30px; }
/* index */
.pokemon-container { font-family: "Press Start 2P"; font-family: Pokemon; width: 120px; background-color: rgba(255, 255, 255, 0.5); border-radius: 15px;}
.pokemon-list-wrapper { margin: 0 auto; width: 80%; }
.pokemon-list-wrapper .filter-bar { width: 80%; height: 20px; background-color: #37C7AD; margin: 0 auto; display:flex; justify-content: space-evenly;}
.pokemon-list-wrapper .filter-bar .filter{ background-color: rgba(255, 255, 255, 0.5); }
.pokemon-list { /*background-color: #F4FFF1CC;*/ flex-wrap: wrap; }
.info-header { display: flex; justify-content: space-between; }
.pokemon-wrapper canvas { position: absolute; left: 25%; z-index: 1; background-color: black; }
.pokemon-general-wrapper { margin: 0; width: 50%; max-width: 1200px; }
.pokemon-list { margin: 0 auto; width: 80%; display: flex; flex-wrap: wrap; justify-content: space-evenly; }
/* detail */
.pokemon-sprite { display: flex; justify-content: space-evenly; user-select: none; }
.info-header .pokemon-sprite { height: 48px; }
.pokemon-stat-graph { display: flex; justify-content: space-evenly; }
.pokemon-stat-graph ul { list-style: none; }
.pokemon-stat-graph canvas { width: 50% }
.detail-list { display: flex; justify-content: space-evenly; flex-wrap: wrap; align-content: center; }
.pokemon-sprite-wrapper { height: 368px; width: 368px; background: radial-gradient(circle, rgba(255, 255, 255, 1) 25%, rgba(0, 0, 0, 0) 60%); display: grid; place-items: center; }
#prev-sprite { opacity: 0.4; }
#next-sprite { opacity: 0.4; }
.pokemon-ability-list-wrapper {display:flex; align-content: center;}
.pokemon-ability-list-wrapper p { background-color: #37C7AD; border-radius: 45px 45px 0 0; }
.pokemon-ability-list td::after { position: relative; display: inline-block; content: ''; height: 1px; color: #37C7AD; width: 80%; }
.pokemon-ability-list { padding: 30px; width: 50%; max-width: 400px; min-width: 350px; border-radius: 0 0 45px 45px;}
.pokemon-ability-list td { margin-top: 30px; padding-bottom: 30px; border-bottom: 1px solid gray; background: rgba(255, 255, 255, 0.5); }
#current-sprite { height: 386px; image-rendering: pixelated;}
.description-wrapper { width: 80%; min-height: 200px; background: rgba(255, 255, 255, 0.5); color:black; }
.evolution-chain-wrapper { width: 80%; height: 200px; background: rgba(255, 255, 255, 0.5); }
.pokemon-types { background: rgba(255, 255, 255, 0.5); }
/* @media only screen and (max-width: 800px) {
body {
background-color: lightblue;
}
} */