no-bull.sh
A Neptunia Character Sorter
1body {
2 font-family: Arial, Helvetica, sans-serif;
3 font-size: 16px;
4}
5
6.container {
7 display: flex;
8 flex-flow: column nowrap;
9 align-items: center;
10 margin-top: 1em;
11}
12
13.progress {
14 margin: 1em auto;
15 width: 500px;
16 display: none;
17}
18
19.progressbar {
20 position: relative;
21 width: 492px;
22 border: 1px solid black;
23 padding: 3px;
24 margin: 2px 0px;
25}
26
27.progresstext {
28 position: absolute;
29 width: 492px;
30 margin: 3px 0px;
31 text-align: center;
32 font-size: 0.7em;
33}
34
35.progressfill {
36 height: 20px;
37 background-color: lightgreen;
38 width: 0%;
39}
40
41.sorter {
42 margin: 0px auto;
43 display: grid;
44 grid-template-columns: 120px 1fr 120px;
45 grid-gap: 5px;
46 width: 420px;
47}
48
49.button {
50 border: 1px solid black;
51 text-align: center;
52 padding: 10%;
53 grid-column: 2 / 3;
54 cursor: pointer;
55}
56
57.starting.start.button {
58 grid-row: span 6;
59}
60
61.starting.load.button {
62 grid-row: span 3;
63 display: none;
64}
65
66.sorting.button, .finished.button {
67 grid-row: span 2;
68 display: none;
69}
70
71.loading.button {
72 grid-row: span 6;
73 display: none;
74}
75
76.loading.button > div {
77 width: 25px;
78 height: 25px;
79 margin: 50px auto;
80 background-color: #333;
81
82 border-radius: 100%;
83 -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
84 animation: sk-scaleout 1.0s infinite ease-in-out;
85}
86
87/* Animation taken from: http://tobiasahlin.com/spinkit/ */
88
89.loading.button > span {
90 margin: auto auto 20%;
91 font-size: 0.7em;
92}
93
94@-webkit-keyframes sk-scaleout {
95 0% { -webkit-transform: scale(0) }
96 100% {
97 -webkit-transform: scale(1.0);
98 opacity: 0;
99 }
100}
101
102@keyframes sk-scaleout {
103 0% {
104 -webkit-transform: scale(0);
105 transform: scale(0);
106 } 100% {
107 -webkit-transform: scale(1.0);
108 transform: scale(1.0);
109 opacity: 0;
110 }
111}
112
113.sorter > .image {
114 width: 120px;
115 height: 180px;
116 margin: auto;
117 grid-row: 1 / 7;
118 cursor: pointer;
119}
120
121.sorter > .text {
122 width: 120px;
123 height: 60px;
124 display: none;
125}
126
127.sorter > .text > p {
128 margin: 0.5em 5px 0px;
129 width: calc(100%-10px);
130 text-align: center;
131 font-size: 0.8em;
132 line-height: 1.5em;
133 word-wrap: break-word;
134 word-break: break-all;
135}
136
137.sorter > .left {
138 grid-column: 1 / 2;
139 border: 1px solid #000000;
140}
141
142.sorter > .right {
143 grid-column: 3 / 4;
144 border: 1px solid #000000;
145}
146
147.options {
148 margin: 1em auto;
149 display: grid;
150 text-align: left;
151 grid-template-columns: repeat(3, 1fr);
152 grid-gap: 10px;
153 width: 450px;
154}
155
156.options > div {
157 font-size: 0.5625em;
158}
159
160label {
161 cursor: pointer;
162}
163
164label:hover {
165 color: #990000;
166}
167
168.options > .large.option, .options > hr {
169 grid-column: span 3;
170 text-align: center;
171 width: 100%;
172}
173
174.image.selector {
175 margin-top: 0.5em;
176 width: 500px;
177 display: none;
178 text-align: center;
179 font-size: 0.75em;
180}
181
182.time.taken {
183 margin-top: 0.5em;
184 width: 500px;
185 display: none;
186 text-align: center;
187 font-size: 0.75em;
188}
189
190.results {
191 font-size: 0.75em;
192 display: flex;
193 align-content: flex-start;
194 width: 80%;
195 margin: 2em auto;
196}
197
198@media all and (min-width: 600px) {
199 .results {
200 flex-flow: column wrap;
201 max-height: calc(5 * (175px + 2px) + 1 * (15px + 2px));
202 /* 2px for borders */
203 }
204}
205
206@media all and (max-width: 600px) {
207 .results {
208 flex-flow: column nowrap;
209 }
210}
211
212.result {
213 height: 15px;
214 margin-bottom: -1px;
215 display: grid;
216 width: 211px;
217 grid-template-columns: repeat(2, 1fr);
218 border: 1px solid #000;
219 margin-right: 5px;
220}
221
222.result.image {
223 height: 175px;
224}
225
226.result.image img {
227 height: 160px;
228}
229
230.result.spacer {
231 height: 1px;
232 background-color: #000;
233}
234
235.result.head {
236 background-color: #000;
237 color: #FFF;
238}
239
240.result > .left {
241 width: 35px;
242 padding: 1px 3px 1px 0.5em;
243 grid-column: 1 / 2;
244 text-align: right;
245}
246
247.result.image .left {
248 position: relative;
249}
250
251.result.image > .left span {
252 position: absolute;
253 top: 50%;
254 right: 3px;
255 margin-top: -0.375em;
256}
257
258.result > .right {
259 width: 160px;
260 padding: 1px 0em 1px 0em;
261 grid-column: 2 / 3;
262 border-left: 1px solid #000;
263 text-align: center;
264}
265
266.info {
267 margin: 2em auto 3em;
268 display: block;
269 text-align: center;
270 font-size: 0.6875em;
271 width: 80%;
272 line-height: 1.2em;
273}
274
275a {
276 color: #990000;
277 font-weight: bold;
278 text-decoration: none;
279 cursor: pointer;
280}
281
282a:hover {
283 color: #FF6600;
284}
285
286a:visited {
287 color: #6600FF;
288}