-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
229 lines (203 loc) · 6.88 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
/* Font Styling CSS */
@font-face{
font-family: 'pokemongo';
src: url('pokemongo.woff');
}
[class^="type-"], [class^="weather-"], [class^="item-"]{
font-family: 'pokemongo';
}
[class^="type-"]::after{
font-size: 2rem;
}
.type-bug::after { content: '\e012'; color: #80c601; }
.type-dark::after { content: '\e013'; color: #525061; }
.type-dragon::after { content: '\e014'; color: #1d67ba; }
.type-electric::after { content: '\e015'; color: #fed03d; }
.type-fairy::after { content: '\e016'; color: #f592da; }
.type-fighting::after { content: '\e017'; color: #d54c63; }
.type-fire::after { content: '\e018'; color: #ff9d2b; }
.type-flying::after { content: '\e019'; color: #6e89d6; }
.type-ghost::after { content: '\e01a'; color: #8175c9; }
.type-grass::after { content: '\e01b'; color: #38ae52; }
.type-ground::after { content: '\e01c'; color: #ce6b2f; }
.type-ice::after { content: '\e01d'; color: #68d2c7; }
.type-normal::after { content: '\e01e'; color: #7e8383; }
.type-poison::after { content: '\e01f'; color: #e157ca; }
.type-psychic::after { content: '\e020'; color: #e42850; }
.type-rock::after { content: '\e021'; color: #cbb866; }
.type-steel::after { content: '\e022'; color: #2b7c8f; }
.type-water::after { content: '\e023'; color: #5ab0db; }
[class^="weather-"]::after{
font-size: 2.5rem;
}
.weather-clear::after { content: '\e028'; }
.weather-cloudy::after { content: '\e029'; }
.weather-fog::after { content: '\e02a'; }
.weather-partially-cloudy-day::after { content: '\e02b'; }
.weather-partially-cloudy-night::after { content: '\e02c'; }
.weather-rain::after { content: '\e02d'; }
.weather-snow::after { content: '\e02e'; }
.weather-sunny::after { content: '\e02f'; }
.weather-windy::after { content: '\e030'; }
[class^="item-"]::after, [class^="item-"]::before{
font-size: 4.0rem;
position: absolute;
margin-top: -0.7rem;
font-size: 2.2rem;
padding: 0 0 0 0.2rem;
display: inline-block;
}
[class^="item-"]{
position: relative;
display: inline-block;
margin: 0 1rem 0 0;
width: 2.5rem;
height: 2.5rem;
}
.item-dragonscale::after {
position: inherit;
content: '\e03b';
color: #1c78b1;
background:
/* Shade */
linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(33,33,33,0) 45%,rgba(33,33,33,0) 100%),
/* Ribbon colours */
radial-gradient(at top right, #ecf0b3 0%,#ecf0b3 28%,#aeeccc 28.1%,#70dfe7 28.1%,#70dfe7 44%,#4cd0e9 44.1%,#4cd0e9 60%,#30a4cd 60.1%,#30a4cd 74%,#48b3dc 74.1%,#48b3dc 86%,#349cc8 86.1%,#349cc8 100%);
width: 2.3rem;
height: 2.5rem;
margin: 0;
background-size: auto,
2.5rem 2.5rem;
/* Firefox will pick up on this -webkit property as well. */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Another webkit property Firefox will pick up on */
-webkit-text-stroke: 0.5px #cecece;
}
.item-kingsrock::before { content: '\e03c'; color: #66310d; }
.item-kingsrock::after { content: '\e03d'; color: #bb9977;
background: linear-gradient(to right, #ceb594 0%,#d7a57c 44%,#8a6137 57%,#7d4c1a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.item-metalcoat::before { content: '\e03e'; color: #305482;
background: linear-gradient(to right, #d0e0f1 0%,#485678 51%,#d0e0f1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.item-metalcoat::after { content: '\e03f'; color: #bfdceb; }
.item-sinnohstone::before {
content: '';
background: radial-gradient(ellipse at center, #a77191 0%, #432438 100%);
border-radius: 0.35rem;
border-radius: calc(0.35rem + 1px);
width: 0.7rem;
height: 0.7rem;
display: block;
padding: 0;
left: 0.5rem;
top: 1.9rem;
border: 1px solid rgba(33,33,33,0.5);
}
.item-sinnohstone::after { content: '\e041'; color: #a0b0c9;
background: linear-gradient(-25deg, #b2c3d5 0%,#93a4b5 33%,#fdfdfd 51%,#cbd3db 69%,#96a7c8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px #cecece;
}
.item-sunstone::after { content: '\e03a'; color: #de4a20;
background: radial-gradient(ellipse at center, rgba(254,218,82,1) 0%,rgba(251,205,76,1) 7%,rgba(251,158,54,1) 20%,rgba(253,125,41,1) 30%,rgba(249,107,36,1) 38%,rgba(242,95,35,1) 43%,rgba(228,77,36,1) 54%,rgba(223,69,34,1) 59%,rgba(221,65,31,1) 65%,rgba(219,64,28,1) 74%,rgba(215,66,29,1) 78%,rgba(195,62,29,1) 91%,rgba(188,60,31,1) 100%);
/* Firefox will pick up on this -webkit property as well. */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.item-upgrade::before { content: '\e038'; color: #4a4a73; }
.item-upgrade::after { content: '\e039'; color: #fffc4d; -webkit-text-stroke: #8c5b10 0.5px; }
/** The settings-like themed checkbox **/
.pogo-checkbox input[type="checkbox"] {
opacity: 0;
width: 1rem;
height: 1rem;
}
.pogo-checkbox label {
position: relative;
display: inline-block;
line-height: 1.75rem;
padding-left: 1.5rem;
margin-left: -1rem;
}
.pogo-checkbox label::before{
position: absolute;
content: "\e050";
display: inline-block;
color: #28cea9;
font-size: 1.5rem;
margin-left: -1.75rem;
}
.pogo-checkbox input[type="checkbox"]:checked+label::before{
content: "\e051";
}
/*Adding focus styles on the outer-box of the fake checkbox*/
.pogo-checkbox input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/** Made up switch **/
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
display: block;
position: absolute;
}
.switch:focus-within{
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #28cea9;
}
input:focus + .slider {
box-shadow: 0 0 1px #28cea9;
}
input:checked + .slider:before {
transform: translateX(18px);
}
/* Rounded sliders */
.slider.round {
border-radius: 23px;
}
.slider.round:before {
border-radius: 50%;
}
.switch + label{
margin-left: 0.3rem;
}
.toggle-checkbox button{
padding: 0.1rem;
}