pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
notifications.less
(10490B)
1 /*Messagebox */
2
3 .divMessageBox{
4 width:100%;
5 height:100%;
6 position:fixed;
7 top:0;
8 left:0;
9
10 background: rgba(0,0,0,0.6);
11 z-index:100000;
12 }
13 /*
14 .MessageIE{
15 background-image: url("@{base-url}/bg.png");
16
17 }*/
18
19 .MessageBoxContainer{
20 position: relative;
21 top: 35%;
22 color: white;
23 position: relative;
24 width: 100%;
25 background-color:#232323;
26 background-color: rgba(0, 0, 0, 0.8);
27 padding:20px;
28 }
29
30 .MessageBoxMiddle{
31 position: relative;
32 left: 20%;
33 width: 60%;
34 }
35
36 .MessageBoxMiddle .MsgTitle{
37 letter-spacing: -1px;
38 font-size: 24px;
39 font-weight:300;
40 }
41
42 .MessageBoxMiddle .pText{
43 font-style: 30px;
44 }
45
46 .MessageBoxContainer input{
47 width: 50%;
48 padding: 5px;
49 }
50
51 .MessageBoxContainer select{
52 width: 50%;
53 padding: 5px;
54 }
55
56
57 .MessageBoxButtonSection{
58 width: 100%;
59 height: 30px;
60 }
61
62 .MessageBoxButtonSection button{
63 float: right;
64 margin-right: 7px;
65 padding-left: 15px;
66 padding-right: 15px;
67 font-size: 14px;
68 font-weight: bold;
69 }
70
71 /* End of MessageBox */
72
73
74
75 .LoadingBoxContainer{
76 position: relative;
77 top: 20%;
78 color: white;
79 position: relative;
80 width: 100%;
81 background-color:#232323;
82 }
83
84 .LoadingBoxMiddle{
85 position: relative;
86 left: 20%;
87 width: 50%;
88 padding: 10px;
89 }
90
91 .LoadingBoxContainer .MsgTitle{
92 font-size: 26px;
93 }
94
95 .LoadingBoxContainer .pText{
96 font-style: 30px;
97 }
98
99 #LoadingPoints{
100 position: absolute;
101
102 }
103
104 /* bigBoxes */
105 .bigBox{
106 position: fixed;
107 right: 10px;
108 bottom: 10px;
109 background-color: #004d60;
110 padding-left: 10px;
111 padding-top: 10px;
112 padding-right: 10px;
113 padding-bottom: 5px;
114 width: 390px;
115 height: 150px;
116 color: white;
117 z-index: 99999;
118 box-sizing:content-box;
119 -webkit-box-sizing:content-box;
120 -moz-box-sizing:content-box;
121 border-left: 5px solid rgba(0, 0, 0, 0.15);
122 overflow:hidden;
123 }
124
125 .bigBox span{
126 font-size: 17px;
127 font-weight: 300;
128 letter-spacing: -1px;
129 padding: 5px 0 !important;
130 display: block;
131 }
132 .bigBox p{
133 font-size: 13px;
134 margin-top: 10px;
135 }
136
137 #divMiniIcons{
138 position: fixed;
139 width: 415px;
140 right: 10px;
141 bottom: 180px;
142 z-index: 9999;
143 float:right;
144
145 }
146
147 .botClose{
148 position: absolute;
149 right: 10px;
150 height: 16px;
151 width: 15px;
152 cursor: pointer;
153 font-size: 18px;
154 opacity: .5;
155 display: block;
156 top: 15px;
157 }
158
159 .botClose:hover {
160 opacity: 1;
161 }
162
163 #divMiniIcons .cajita{
164 text-align: center;
165 vertical-align: middle;
166 padding: 4px 6px;
167 color: #FFF;
168 float: right;
169 cursor: pointer;
170 display: block;
171 background-color: #F00;
172 font-size: 17px;
173 margin-left: 4px;
174 margin-top: 5px;
175 }
176
177 #divMiniIcons .cajita:active {
178 top:1px;
179 left:1px;
180 position:relative;
181 }
182
183 .cajita img{
184 width: 23px;
185 height: 23px;
186 padding-left: 3px;
187 padding-top: 3px;
188 }
189
190 .bigBox .bigboxicon{
191 font-size: 30px;
192 text-align: left;
193 position: absolute;
194 top: 120px;
195 left: 6px;
196 z-index: 0;
197 }
198
199 .bigBox .bigboxnumber{
200 width: 100%;
201 text-align: right;
202 font-size: 25px;
203 }
204
205 /* End of bigBoxes */
206
207 /* SmallBox */
208 #divSmallBoxes{
209
210 position: fixed;
211 right: 0;
212 top: 0;
213 z-index: 9999;
214
215 }
216
217 .SmallBox{
218 position: absolute;
219 right: 5px;
220 top: 20px;
221 width: 420px;
222 color: white;
223 z-index: 9999;
224 overflow:hidden;
225 border:1px solid transparent;
226 }
227
228 .SmallBox:hover{
229 border:1px solid #fff;
230 cursor: pointer;
231 }
232
233
234 .SmallBox .foto{
235 font-size: 50px;
236 position: absolute;
237 left: 17px;
238 }
239
240 .SmallBox .textoFull{
241 width: 93%;
242 float: left;
243 padding-left: 20px;
244 }
245
246 .SmallBox .textoFoto{
247 width: 78%;
248 margin: 3px 20px 3px 80px;
249 float: left;
250 }
251
252 .miniPic {
253 position: absolute;
254 bottom: 8px;
255 right: 9px;
256 }
257
258 .miniIcono{
259 height: 100%;
260 font-size:20px;
261 }
262
263
264 .SmallBox span{
265 font-size: 17px;
266 font-weight: 300;
267 letter-spacing: -1px;
268 display:block;
269 margin:4px 0;
270 }
271 .SmallBox p{
272 font-size: 13px;
273 margin-top: 2px;
274 }
275
276
277 /* End of SmallBox */
278
279 #pageslide {
280 /* These styles MUST be included. Do not change. */
281 display: none;
282 position: absolute;
283 position: fixed;
284 top: 0;
285 height: 100%;
286 z-index: 999999;
287
288 /* Specify the width of your pageslide here */
289 width: 305px;
290 padding: 20px;
291
292 /* These styles are optional, and describe how the pageslide will look */
293 background-color: #004d60;
294 color: #FFF;
295 -webkit-box-shadow: inset 0 0 5px 5px #222;
296 -moz-shadow: inset 0 0 0px 0px #222;
297 box-shadow: inset 0 0 0px 0px #222;
298 }
299
300 .purehtml{
301 color: white;
302 font-size: 16px;
303 }
304
305
306 /* Mobile Phones */
307 @media screen and (max-width: 450px) and (max-width: 767px) {
308
309 /* SmallBox Responsive */
310 #divSmallBoxes{
311
312 position: fixed;
313 width: 90%;
314 right: 0;
315 top: 0;
316
317 }
318
319 .SmallBox{
320 width: 95%;
321 }
322
323 .SmallBox:hover{
324 box-shadow: 0px 0px 10px #888888;
325 cursor: pointer;
326 }
327
328 .SmallBox span{
329 font-size: 16px;
330 /*font-weight:bold;*/
331 }
332 .SmallBox p{
333 font-size: 12px;
334 margin-top: 2px;
335 }
336
337
338 .SmallBox .textoFull{
339 width: 93%;
340 float: left;
341 padding-left: 20px;
342 }
343
344 .SmallBox .textoFoto{
345 width: 55%;
346 margin: 3px 20px 3px 80px;
347 float: left;
348 }
349
350
351 /* End of SmallBox Responsive*/
352
353
354 /* bigBoxes Responsive */
355 .bigBox{
356 position: fixed;
357 right: 10px;
358 bottom: 10px;
359 background-color: #004d60;
360 padding-left: 10px;
361 padding-top: 10px;
362 padding-right: 10px;
363 padding-bottom: 5px;
364 width: 88%;
365 height: 150px;
366 color: white;
367 z-index: 99999;
368 }
369
370
371 /* End of bigBoxes Responsive */
372
373
374 /*Messagebox Responsive */
375
376 .divMessageBox{
377 width:100%;
378 height:100%;
379 position:fixed;
380 top:0;
381 left:0;
382 background: rgba(0,0,0,0.6);
383 z-index:100000;
384 }
385
386 .MessageBoxContainer{
387 position: relative;
388 top: 25%;
389 color: white;
390 position: relative;
391 width: 100%;
392 background-color:#232323;
393 }
394
395 .MessageBoxMiddle{
396 position: relative;
397 left: 0;
398 width: 100%;
399 padding: 3px;
400 }
401
402 .MessageBoxMiddle .MsgTitle{
403 font-size: 22px;
404 }
405
406 .MessageBoxMiddle .pText{
407 font-style: 10px;
408 }
409
410 .MessageBoxContainer input{
411 width: 50%;
412 padding: 5px;
413 }
414
415 .MessageBoxContainer select{
416 width: 50%;
417 padding: 5px;
418 }
419
420
421 .MessageBoxButtonSection{
422 width: 100%;
423 height: 30px;
424 }
425
426 .MessageBoxButtonSection button{
427 float: right;
428 margin-right: 5px;
429 padding-left: 15px;
430 padding-right: 15px;
431 }
432
433
434 /* End of MessageBox Responsive */
435
436
437 }
438
439
440
441
442 /* Animations */
443
444 .animated {
445 -webkit-animation-duration: 1s;
446 -moz-animation-duration: 1s;
447 -o-animation-duration: 1s;
448 animation-duration: 1s;
449 -webkit-animation-fill-mode: both;
450 -moz-animation-fill-mode: both;
451 -o-animation-fill-mode: both;
452 animation-fill-mode: both;
453 }
454
455 .animated.fast {
456 -webkit-animation-duration: 0.4s;
457 -moz-animation-duration: 0.4s;
458 -ms-animation-duration: 0.4s;
459 -o-animation-duration: 0.4s;
460 animation-duration: 0.4s;
461 }
462
463 @-webkit-keyframes fadeIn {
464 0% {opacity: 0;}
465 100% {opacity: 1;}
466 }
467
468 @-moz-keyframes fadeIn {
469 0% {opacity: 0;}
470 100% {opacity: 1;}
471 }
472
473 @-o-keyframes fadeIn {
474 0% {opacity: 0;}
475 100% {opacity: 1;}
476 }
477
478 @keyframes fadeIn {
479 0% {opacity: 0;}
480 100% {opacity: 1;}
481 }
482
483 .fadeIn {
484 -webkit-animation-name: fadeIn;
485 -moz-animation-name: fadeIn;
486 -o-animation-name: fadeIn;
487 animation-name: fadeIn;
488 }
489
490 @-webkit-keyframes fadeInRight {
491 0% {
492 opacity: 0;
493 -webkit-transform: translateX(20px);
494 }
495
496 100% {
497 opacity: 1;
498 -webkit-transform: translateX(0);
499 }
500 }
501
502 @-moz-keyframes fadeInRight {
503 0% {
504 opacity: 0;
505 -moz-transform: translateX(20px);
506 }
507
508 100% {
509 opacity: 1;
510 -moz-transform: translateX(0);
511 }
512 }
513
514 @-o-keyframes fadeInRight {
515 0% {
516 opacity: 0;
517 -o-transform: translateX(20px);
518 }
519
520 100% {
521 opacity: 1;
522 -o-transform: translateX(0);
523 }
524 }
525
526 @keyframes fadeInRight {
527 0% {
528 opacity: 0;
529 transform: translateX(20px);
530 }
531
532 100% {
533 opacity: 1;
534 transform: translateX(0);
535 }
536 }
537
538 .fadeInRight {
539 -webkit-animation-name: fadeInRight;
540 -moz-animation-name: fadeInRight;
541 -o-animation-name: fadeInRight;
542 animation-name: fadeInRight;
543 }
544
545 @-webkit-keyframes fadeInUp {
546 0% {
547 opacity: 0;
548 -webkit-transform: translateY(20px);
549 }
550
551 100% {
552 opacity: 1;
553 -webkit-transform: translateY(0);
554 }
555 }
556
557 @-moz-keyframes fadeInUp {
558 0% {
559 opacity: 0;
560 -moz-transform: translateY(20px);
561 }
562
563 100% {
564 opacity: 1;
565 -moz-transform: translateY(0);
566 }
567 }
568
569 @-o-keyframes fadeInUp {
570 0% {
571 opacity: 0;
572 -o-transform: translateY(20px);
573 }
574
575 100% {
576 opacity: 1;
577 -o-transform: translateY(0);
578 }
579 }
580
581 @keyframes fadeInUp {
582 0% {
583 opacity: 0;
584 transform: translateY(20px);
585 }
586
587 100% {
588 opacity: 1;
589 transform: translateY(0);
590 }
591 }
592
593 .fadeInUp {
594 -webkit-animation-name: fadeInUp;
595 -moz-animation-name: fadeInUp;
596 -o-animation-name: fadeInUp;
597 animation-name: fadeInUp;
598 }
599
600 @-webkit-keyframes fadeOut {
601 0% {opacity: 1;}
602 100% {opacity: 0;}
603 }
604
605 @-moz-keyframes fadeOut {
606 0% {opacity: 1;}
607 100% {opacity: 0;}
608 }
609
610 @-o-keyframes fadeOut {
611 0% {opacity: 1;}
612 100% {opacity: 0;}
613 }
614
615 @keyframes fadeOut {
616 0% {opacity: 1;}
617 100% {opacity: 0;}
618 }
619
620 .fadeOut {
621 -webkit-animation-name: fadeOut;
622 -moz-animation-name: fadeOut;
623 -o-animation-name: fadeOut;
624 animation-name: fadeOut;
625 }
626 @-webkit-keyframes fadeOutLeft {
627 0% {
628 opacity: 1;
629 -webkit-transform: translateX(0);
630 }
631
632 100% {
633 opacity: 0;
634 -webkit-transform: translateX(-20px);
635 }
636 }
637
638 @-moz-keyframes fadeOutLeft {
639 0% {
640 opacity: 1;
641 -moz-transform: translateX(0);
642 }
643
644 100% {
645 opacity: 0;
646 -moz-transform: translateX(-20px);
647 }
648 }
649
650 @-o-keyframes fadeOutLeft {
651 0% {
652 opacity: 1;
653 -o-transform: translateX(0);
654 }
655
656 100% {
657 opacity: 0;
658 -o-transform: translateX(-20px);
659 }
660 }
661
662 @keyframes fadeOutLeft {
663 0% {
664 opacity: 1;
665 transform: translateX(0);
666 }
667
668 100% {
669 opacity: 0;
670 transform: translateX(-20px);
671 }
672 }
673
674 .fadeOutLeft {
675 -webkit-animation-name: fadeOutLeft;
676 -moz-animation-name: fadeOutLeft;
677 -o-animation-name: fadeOutLeft;
678 animation-name: fadeOutLeft;
679 }