Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/Resources/Styles/_helpers.scss @ 1538:d1806b4e4839

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
moving OrthancStone/Samples/ as Applications/Samples/
author Sebastien Jodogne <s.jodogne@gmail.com>
date Tue, 11 Aug 2020 13:24:38 +0200
parents StoneWebViewer/Resources/Styles/_helpers.scss@fb74ed5d8c22
children
comparison
equal deleted inserted replaced
1537:de8cf5859e84 1538:d1806b4e4839
1 /*
2 * Source code taken from private Osimis' frontend toolbox 3.2.1.
3 */
4
5 /**
6 _overlay.scss
7 */
8 .overlay__transparent{
9 position:fixed;
10 top:0;
11 left:0;
12 width:100%;
13 height:100%;
14 z-index: 1;
15 }
16
17 /** _transition.scss **/
18 .transition,
19 %transition{
20 &{
21 transition: 0.3s all ease;
22 }
23 }
24
25 .transition--long,
26 %transition--long{
27 &{
28 transition: 0.6s all ease;
29 }
30 }
31
32
33 /** _list.scss **/
34 // This is used in the study information panel.
35 dd+dt{
36 clear:both;
37 }
38 .listDefinition{
39 width:100%;
40 line-height: 1.3;
41 }
42 .listDefinition__term{
43 clear:both;
44 float:left;
45 text-align: right;
46 padding-right:10px;
47 width:50%;
48 @extend .font__light;
49
50 }
51 .listDefinition__data{
52 text-align: left;
53 padding-left:10px;
54 float:right;
55 width:50%;
56 @extend .font__normal;
57
58 }
59
60
61 /** _animation.scss **/
62 @keyframes blink__primary {
63 0% { color: $primary; }
64 100% { color: $text-color; }
65 }
66
67 .blink__primary{
68 animation: blink__primary 0.8s linear infinite;
69 }
70
71 [translate-cloak]{
72 transition: 0.3s all ease;
73 opacity: 1;
74 &.translate-cloak{
75 opacity: 0;
76 }
77 }
78
79 /** _button.scss **/
80 .button__unstyled,
81 %button__unstyled{
82 background-color:inherit;
83 border:none;
84 text-decoration: none;
85 text-align:left;
86 padding:0;
87 cursor: pointer;
88 *{
89 pointer-events: none;
90 }
91 &:hover, &:active, &:focus{
92 outline:0;
93 }
94 }
95 .button__base,
96 %button__base{
97 @extend .button__unstyled;
98 transition: 0.3s all ease;
99 //& *,& *:before,& *:after{
100 // @extend .transition;
101 //}
102 }
103 .button__state--active{
104 @extend .button__base;
105 opacity:1;
106 &:hover{
107 opacity:0.9;
108 color:$primary;
109 }
110 }
111 .button__state--inactive{
112 @extend .button__base;
113 opacity:0.333;
114 &:hover{
115 opacity:0.4333;
116 color:$primary;
117 }
118 }
119 .button__iconed{
120 @extend .button__base;
121 opacity: 1;
122 &:hover, &:focus, &.active{
123 opacity: 0.75;
124 color:$primary;
125 }
126 }
127 .button__switch--base,
128 %button__switch--base{
129 @extend .button__base;
130 padding:5px 0px;
131 display:inline-block;
132 text-align: center;
133 border-top: 1px solid;
134 border-bottom: 1px solid;
135 border-color: $primary;
136 background-color: white;
137 overflow: hidden;
138 &:hover, &:focus{
139 background-color: lighten($primary, 10);
140 color:white;
141 }
142 &.active{
143 background-color:$primary;
144 color:white;
145 }
146 }
147 .button__switch{
148 @extend .button__switch--base;
149 }
150 .button__switch--first{
151 @extend .button__switch--base;
152 border-left: 1px solid $primary;
153 border-radius: 5px 0 0 5px;
154 }
155 .button__switch--last{
156 @extend .button__switch--base;
157 border-right: 1px solid $primary;
158 border-radius: 0 5px 5px 0;
159 }
160 .button__lightgrey--hover{
161 @extend .button__base;
162 &:hover, &:focus, &.active{
163 background-color: $lightGrey;
164 }
165 }
166 .button__text-danger--hover{
167 @extend .button__base;
168 &:hover, &:focus, &.active{
169 color: $dangerColor;
170 }
171 }
172 .button__text-primary--hover{
173 @extend .button__base;
174 &:hover, &:focus, &.active{
175 color: $primary;
176 }
177 }
178 .button__danger--hover{
179 @extend .button__base;
180 &:hover, &:focus, &.active{
181 background-color: $dangerColor;
182 color:white;
183 }
184 }
185 .button__text{
186 @extend .button__base;
187 opacity:0.66;
188 &:hover, &.active, &:focus{
189 opacity:1;
190 }
191 }
192 .button__text--underlined{
193 @extend .button__base;
194 text-decoration: underline;
195 &:hover, &.active, &:focus{
196 text-decoration:none;
197 }
198 }
199 .button__bordered{
200 @extend .button__base;
201 border-bottom: 2px solid $text-color;
202 &:hover, &:focus, &.active{
203 border-color: $primary;
204 }
205 }
206 .button__bordered--inverted{
207 @extend .button__base;
208 border-bottom: 2px solid white;
209 }
210 .button__close{
211 @extend .button__base;
212 position:absolute;
213 top:0;
214 right:0;
215 opacity:0.6;
216 z-index:10;
217 &:hover, &:focus{
218 opacity:1;
219 }
220 }
221
222
223 /** _block.scss **/
224 .block{
225 display: block !important;
226 }
227
228
229 /** _boxsizing.scss **/
230 .boxsizing__borderbox{
231 box-sizing:border-box;
232 }
233 .boxsizing__contentbox{
234 box-sizing:content-box;
235 }
236
237
238 /** _scrollable.scss **/
239 .scrollable{
240 overflow-y:auto;
241 }
242 .scrollable--x{
243 overflow-x:auto;
244 }
245 .no-scroll{
246 overflow:hidden;
247 }
248
249
250 /** _float.scss **/
251 .float__right,
252 %float__right{
253 float:right;
254 }
255 .float__left,
256 %float__left{
257 float:left;
258 }
259
260
261 /** _fonts.scss **/
262 .font__bold,
263 %font__bold{
264 font-weight:600;
265 }
266 .font__normal,
267 %font__normal{
268 font-weight: 400;
269 }
270 .font__light,
271 %font__light{
272 font-weight: 200;
273 }
274 .fontColor__primary{
275 color:$primary;
276 }
277 .fontColor__lightGrey{
278 color:$lightGrey;
279 }
280 .fontColor__normal{
281 color:$text-color;
282 }
283 .fontColor__darker{
284 color:$darkGrey;
285 }
286 .fontColor__white{
287 color:white;
288 }
289
290
291 /** _forms.scss **/
292 .textarea__unstyled{
293 border:none;
294 outline:none;
295 background-color:transparent;
296 color:inherit;
297 resize:none;
298 padding:0;
299 margin:0;
300 width:100%;
301 }
302
303
304 /** _position.scss **/
305 .position__relative{
306 position: relative;
307 }
308
309
310 /** _margin.scss **/
311 .margin__auto{
312 margin:auto;
313 }
314
315
316 /** _helpers.scss **/
317 $steps: (
318 0,5,8,10,
319 11,12,13,14,15,16,17,18,19,20,
320 21,22,23,24,25,26,27,28,29,30,
321 31,32,33,34,35,36,37,38,39,40,
322 41,42,43,44,45,46,47,48,49,50,
323 55,60,64,65,70,72,75,80,85,90,95,96,100,
324 110,120,130,140,150,160,170,180,190,200,
325 210,220,230,240,250,260,270,280,290,300,
326 310,320,330,340,350,360,370,380,390,400,
327 410,420,430,440,450,460,470,480,490,500
328 );
329
330
331 /*************HELPERS**************/
332 /**********************************/
333
334 /*** identical width and height ***/
335 @each $step in $steps {
336 .wh__#{$step} {
337 width: $step + px !important;
338 height: $step + px !important;
339 }
340 .lh__#{$step} {
341 line-height: $step + px !important;
342 }
343 }
344 .lh__1{
345 line-height: 1 !important;
346 }
347 .no-wrap{
348 white-space: nowrap;
349 }
350
351 .ov-h{
352 overflow: hidden;
353 }
354 .va-m{
355 vertical-align: middle;
356 }
357 .bg-inherit{
358 background-color:inherit;
359 }
360 .bg-black{
361 background-color: black;
362 }
363 .v-center{
364 &:before {
365 content: '';
366 display: inline-block;
367 height: 100%;
368 vertical-align: middle;
369 margin-top: -0.25em; /* Adjusts for spacing */
370 }
371 }
372 .fluid-height{
373 height:100%;
374 }
375 .visibility__hidden{
376 visibility: hidden;
377 }
378
379 .pointerEvents__none{
380 pointer-events: none;
381 }
382
383 /* Padding Helpers */
384 .pn {
385 padding: 0 !important;
386 }
387 .p1 {
388 padding: 1px !important;
389 }
390 .p2 {
391 padding: 2px !important;
392 }
393 .p3 {
394 padding: 3px !important;
395 }
396 .p4 {
397 padding: 4px !important;
398 }
399 .p5 {
400 padding: 5px !important;
401 }
402 .p6 {
403 padding: 6px !important;
404 }
405 .p7 {
406 padding: 7px !important;
407 }
408 .p8 {
409 padding: 8px !important;
410 }
411 .p10 {
412 padding: 10px !important;
413 }
414 .p12 {
415 padding: 12px !important;
416 }
417 .p15 {
418 padding: 15px !important;
419 }
420 .p20 {
421 padding: 20px !important;
422 }
423 .p25 {
424 padding: 25px !important;
425 }
426 .p30 {
427 padding: 30px !important;
428 }
429 .p35 {
430 padding: 35px !important;
431 }
432 .p40 {
433 padding: 40px !important;
434 }
435 .p50 {
436 padding: 50px !important;
437 }
438 .ptn {
439 padding-top: 0 !important;
440 }
441 .pt5 {
442 padding-top: 5px !important;
443 }
444 .pt10 {
445 padding-top: 10px !important;
446 }
447 .pt15 {
448 padding-top: 15px !important;
449 }
450 .pt20 {
451 padding-top: 20px !important;
452 }
453 .pt25 {
454 padding-top: 25px !important;
455 }
456 .pt30 {
457 padding-top: 30px !important;
458 }
459 .pt35 {
460 padding-top: 35px !important;
461 }
462 .pt40 {
463 padding-top: 40px !important;
464 }
465 .pt50 {
466 padding-top: 50px !important;
467 }
468 .prn {
469 padding-right: 0 !important;
470 }
471 .pr5 {
472 padding-right: 5px !important;
473 }
474 .pr10 {
475 padding-right: 10px !important;
476 }
477 .pr15 {
478 padding-right: 15px !important;
479 }
480 .pr20 {
481 padding-right: 20px !important;
482 }
483 .pr25 {
484 padding-right: 25px !important;
485 }
486 .pr30 {
487 padding-right: 30px !important;
488 }
489 .pr35 {
490 padding-right: 35px !important;
491 }
492 .pr40 {
493 padding-right: 40px !important;
494 }
495 .pr50 {
496 padding-right: 50px !important;
497 }
498 .pbn {
499 padding-bottom: 0 !important;
500 }
501 .pb5 {
502 padding-bottom: 5px !important;
503 }
504 .pb10 {
505 padding-bottom: 10px !important;
506 }
507 .pb15 {
508 padding-bottom: 15px !important;
509 }
510 .pb20 {
511 padding-bottom: 20px !important;
512 }
513 .pb25 {
514 padding-bottom: 25px !important;
515 }
516 .pb30 {
517 padding-bottom: 30px !important;
518 }
519 .pb35 {
520 padding-bottom: 35px !important;
521 }
522 .pb40 {
523 padding-bottom: 40px !important;
524 }
525 .pb50 {
526 padding-bottom: 50px !important;
527 }
528 .pln {
529 padding-left: 0 !important;
530 }
531 .pl5 {
532 padding-left: 5px !important;
533 }
534 .pl10 {
535 padding-left: 10px !important;
536 }
537 .pl15 {
538 padding-left: 15px !important;
539 }
540 .pl20 {
541 padding-left: 20px !important;
542 }
543 .pl25 {
544 padding-left: 25px !important;
545 }
546 .pl30 {
547 padding-left: 30px !important;
548 }
549 .pl35 {
550 padding-left: 35px !important;
551 }
552 .pl40 {
553 padding-left: 40px !important;
554 }
555 .pl50 {
556 padding-left: 50px !important;
557 }
558
559 /* Axis Padding (both top/bottom or left/right) */
560 .pv5 {
561 padding-top: 5px !important;
562 padding-bottom: 5px !important;
563 }
564 .pv8 {
565 padding-top: 8px !important;
566 padding-bottom: 8px !important;
567 }
568 .pv10 {
569 padding-top: 10px !important;
570 padding-bottom: 10px !important;
571 }
572 .pv15 {
573 padding-top: 15px !important;
574 padding-bottom: 15px !important;
575 }
576 .pv20 {
577 padding-top: 20px !important;
578 padding-bottom: 20px !important;
579 }
580 .pv25 {
581 padding-top: 25px !important;
582 padding-bottom: 25px !important;
583 }
584 .pv30 {
585 padding-top: 30px !important;
586 padding-bottom: 30px !important;
587 }
588 .pv40 {
589 padding-top: 40px !important;
590 padding-bottom: 40px !important;
591 }
592 .pv50 {
593 padding-top: 50px !important;
594 padding-bottom: 50px !important;
595 }
596 .ph5 {
597 padding-left: 5px !important;
598 padding-right: 5px !important;
599 }
600 .ph8 {
601 padding-left: 8px !important;
602 padding-right: 8px !important;
603 }
604 .ph10 {
605 padding-left: 10px !important;
606 padding-right: 10px !important;
607 }
608 .ph15 {
609 padding-left: 15px !important;
610 padding-right: 15px !important;
611 }
612 .ph20 {
613 padding-left: 20px !important;
614 padding-right: 20px !important;
615 }
616 .ph25 {
617 padding-left: 25px !important;
618 padding-right: 25px !important;
619 }
620 .ph30 {
621 padding-left: 30px !important;
622 padding-right: 30px !important;
623 }
624 .ph40 {
625 padding-left: 40px !important;
626 padding-right: 40px !important;
627 }
628 .ph50 {
629 padding-left: 50px !important;
630 padding-right: 50px !important;
631 }
632
633 /* margin center helper */
634 .mauto {
635 margin-left: auto;
636 margin-right: auto;
637 }
638 .mn {
639 margin: 0 !important;
640 }
641 .m1 {
642 margin: 1px !important;
643 }
644 .m2 {
645 margin: 2px !important;
646 }
647 .m3 {
648 margin: 3px !important;
649 }
650 .m4 {
651 margin: 4px !important;
652 }
653 .m5 {
654 margin: 5px !important;
655 }
656 .m8 {
657 margin: 8px !important;
658 }
659 .m10 {
660 margin: 10px !important;
661 }
662 .m15 {
663 margin: 15px !important;
664 }
665 .m20 {
666 margin: 20px !important;
667 }
668 .m25 {
669 margin: 25px !important;
670 }
671 .m30 {
672 margin: 30px !important;
673 }
674 .m35 {
675 margin: 35px !important;
676 }
677 .m40 {
678 margin: 40px !important;
679 }
680 .m50 {
681 margin: 50px !important;
682 }
683 .mtn {
684 margin-top: 0 !important;
685 }
686 .mt5 {
687 margin-top: 5px !important;
688 }
689 .mt10 {
690 margin-top: 10px !important;
691 }
692 .mt15 {
693 margin-top: 15px !important;
694 }
695 .mt20 {
696 margin-top: 20px !important;
697 }
698 .mt25 {
699 margin-top: 25px !important;
700 }
701 .mt30 {
702 margin-top: 30px !important;
703 }
704 .mt35 {
705 margin-top: 35px !important;
706 }
707 .mt40 {
708 margin-top: 40px !important;
709 }
710 .mt50 {
711 margin-top: 50px !important;
712 }
713 .mt70 {
714 margin-top: 70px !important;
715 }
716 .mrn {
717 margin-right: 0 !important;
718 }
719 .mr5 {
720 margin-right: 5px !important;
721 }
722 .mr10 {
723 margin-right: 10px !important;
724 }
725 .mr15 {
726 margin-right: 15px !important;
727 }
728 .mr20 {
729 margin-right: 20px !important;
730 }
731 .mr25 {
732 margin-right: 25px !important;
733 }
734 .mr30 {
735 margin-right: 30px !important;
736 }
737 .mr35 {
738 margin-right: 35px !important;
739 }
740 .mr40 {
741 margin-right: 40px !important;
742 }
743 .mr50 {
744 margin-right: 50px !important;
745 }
746 .mbn {
747 margin-bottom: 0 !important;
748 }
749 .mb5 {
750 margin-bottom: 5px !important;
751 }
752 .mb10 {
753 margin-bottom: 10px !important;
754 }
755 .mb15 {
756 margin-bottom: 15px !important;
757 }
758 .mb20 {
759 margin-bottom: 20px !important;
760 }
761 .mb25 {
762 margin-bottom: 25px !important;
763 }
764 .mb30 {
765 margin-bottom: 30px !important;
766 }
767 .mb35 {
768 margin-bottom: 35px !important;
769 }
770 .mb40 {
771 margin-bottom: 40px !important;
772 }
773 .mb50 {
774 margin-bottom: 50px !important;
775 }
776 .mb70 {
777 margin-bottom: 70px !important;
778 }
779 .mln {
780 margin-left: 0 !important;
781 }
782 .ml5 {
783 margin-left: 5px !important;
784 }
785 .ml10 {
786 margin-left: 10px !important;
787 }
788 .ml15 {
789 margin-left: 15px !important;
790 }
791 .ml20 {
792 margin-left: 20px !important;
793 }
794 .ml25 {
795 margin-left: 25px !important;
796 }
797 .ml30 {
798 margin-left: 30px !important;
799 }
800 .ml35 {
801 margin-left: 35px !important;
802 }
803 .ml40 {
804 margin-left: 40px !important;
805 }
806 .ml50 {
807 margin-left: 50px !important;
808 }
809
810 /* Axis Margins (both top/bottom or left/right) */
811 .mv5 {
812 margin-top: 5px !important;
813 margin-bottom: 5px !important;
814 }
815 .mv10 {
816 margin-top: 10px !important;
817 margin-bottom: 10px !important;
818 }
819 .mv15 {
820 margin-top: 15px !important;
821 margin-bottom: 15px !important;
822 }
823 .mv20 {
824 margin-top: 20px !important;
825 margin-bottom: 20px !important;
826 }
827 .mv25 {
828 margin-top: 25px !important;
829 margin-bottom: 25px !important;
830 }
831 .mv30 {
832 margin-top: 30px !important;
833 margin-bottom: 30px !important;
834 }
835 .mv40 {
836 margin-top: 40px !important;
837 margin-bottom: 40px !important;
838 }
839 .mv50 {
840 margin-top: 50px !important;
841 margin-bottom: 50px !important;
842 }
843 .mv70 {
844 margin-top: 70px !important;
845 margin-bottom: 70px !important;
846 }
847 .mh5 {
848 margin-left: 5px !important;
849 margin-right: 5px !important;
850 }
851 .mh10 {
852 margin-left: 10px !important;
853 margin-right: 10px !important;
854 }
855 .mh15 {
856 margin-left: 15px !important;
857 margin-right: 15px !important;
858 }
859 .mh20 {
860 margin-left: 20px !important;
861 margin-right: 20px !important;
862 }
863 .mh25 {
864 margin-left: 25px !important;
865 margin-right: 25px !important;
866 }
867 .mh30 {
868 margin-left: 30px !important;
869 margin-right: 30px !important;
870 }
871 .mh40 {
872 margin-left: 40px !important;
873 margin-right: 40px !important;
874 }
875 .mh50 {
876 margin-left: 50px !important;
877 margin-right: 50px !important;
878 }
879 .mh70 {
880 margin-left: 70px !important;
881 margin-right: 70px !important;
882 }
883
884 /* Negative Margin Helpers */
885 .mtn5 {
886 margin-top: -5px !important;
887 }
888 .mtn10 {
889 margin-top: -10px !important;
890 }
891 .mtn15 {
892 margin-top: -15px !important;
893 }
894 .mtn20 {
895 margin-top: -20px !important;
896 }
897 .mtn30 {
898 margin-top: -30px !important;
899 }
900 .mrn5 {
901 margin-right: -5px !important;
902 }
903 .mrn10 {
904 margin-right: -10px !important;
905 }
906 .mrn15 {
907 margin-right: -15px !important;
908 }
909 .mrn20 {
910 margin-right: -20px !important;
911 }
912 .mrn30 {
913 margin-right: -30px !important;
914 }
915 .mbn5 {
916 margin-bottom: -5px !important;
917 }
918 .mbn10 {
919 margin-bottom: -10px !important;
920 }
921 .mbn15 {
922 margin-bottom: -15px !important;
923 }
924 .mbn20 {
925 margin-bottom: -20px !important;
926 }
927 .mbn30 {
928 margin-bottom: -30px !important;
929 }
930 .mln5 {
931 margin-left: -5px !important;
932 }
933 .mln10 {
934 margin-left: -10px !important;
935 }
936 .mln15 {
937 margin-left: -15px !important;
938 }
939 .mln20 {
940 margin-left: -20px !important;
941 }
942 .mln30 {
943 margin-left: -30px !important;
944 }
945
946 /* Vertical Negative Margin "mv" + "n" + "x" */
947 .mvn5 {
948 margin-top: -5px !important;
949 margin-bottom: -5px !important;
950 }
951 .mvn10 {
952 margin-top: -10px !important;
953 margin-bottom: -10px !important;
954 }
955 .mvn15 {
956 margin-top: -15px !important;
957 margin-bottom: -15px !important;
958 }
959 .mvn20 {
960 margin-top: -20px !important;
961 margin-bottom: -20px !important;
962 }
963 .mvn30 {
964 margin-top: -30px !important;
965 margin-bottom: -30px !important;
966 }
967
968 /* Horizontal Negative Margin "mh" + "n" + "x" */
969 .mhn5 {
970 margin-left: -5px !important;
971 margin-right: -5px !important;
972 }
973 .mhn10 {
974 margin-left: -10px !important;
975 margin-right: -10px !important;
976 }
977 .mhn15 {
978 margin-left: -15px !important;
979 margin-right: -15px !important;
980 }
981 .mhn20 {
982 margin-left: -20px !important;
983 margin-right: -20px !important;
984 }
985 .mhn30 {
986 margin-left: -30px !important;
987 margin-right: -30px !important;
988 }
989
990 /* Vertical Align Helpers */
991 .va-t {
992 vertical-align: top !important;
993 }
994 .va-m {
995 vertical-align: middle !important;
996 }
997 .va-b {
998 vertical-align: bottom !important;
999 }
1000 .va-s {
1001 vertical-align: super !important;
1002 }
1003
1004 /* Text Helpers */
1005 .text-left {
1006 text-align: left !important;
1007 }
1008 .text-right {
1009 text-align: right !important;
1010 }
1011 .text-center {
1012 text-align: center !important;
1013 }
1014 .text-justify {
1015 text-align: justify !important;
1016 }
1017 .text-nowrap {
1018 white-space: nowrap !important;
1019 }
1020
1021 /* Inline Block Helper */
1022 .ib,
1023 .inline-object {
1024 display: inline-block !important;
1025 }
1026
1027 .clear {
1028 clear: both;
1029 }
1030
1031 // warning popup
1032
1033 .wvWarning {
1034 position: relative;
1035 width: 320px;
1036 min-height: 130px;
1037 z-index: 999;
1038 left: calc(50% - 160px);
1039 border: #000 solid 1px;
1040 -webkit-border-radius: 7px;
1041 -moz-border-radius: 7px;
1042 border-radius: 7px;
1043 color: #FF5722;
1044 box-shadow: 0px 3px 23px #ff980078;
1045 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
1046 -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
1047 -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
1048 animation-name: example;
1049 animation-duration: 2s;
1050 animation-fill-mode: both;
1051 animation-timing-function: ease-out;
1052 }
1053
1054 @-webkit-keyframes example {
1055 from {top: 0vh;opacity: 0;background: #868686}
1056 to {top: 10vh;opacity: 1;background: #ffffff}
1057 }
1058
1059 @keyframes example {
1060 from {top: 0vh;opacity: 0;background: #868686}
1061 to {top: 10vh;opacity: 1;background: #ffffff}
1062 }
1063
1064 .wvWarning-content{
1065 position: relative;
1066 width: 190px;
1067 min-height: 88px;
1068 max-height: 80vh;
1069 margin: auto;
1070 }
1071 .wvWarning-icon{
1072 font-size: 32px;
1073 }
1074 .wvWarning-text{
1075 position: relative;
1076 }
1077 .wvWarning-button{
1078 background-color: #f1ededcc;
1079 color: #607D8B;
1080 width: 50px;
1081 font-weight: 600;
1082 margin-top: 2px;
1083 margin-right: 30px;
1084 }
1085
1086 .wvScreenToSmallWarning {
1087 position: fixed;
1088 display: block;
1089 top: 0;
1090 left: 0;
1091 background-color: white;
1092 color: #333;
1093 width: 100%;
1094 height: 100%;
1095 z-index: 1000;
1096 }
1097
1098 .wvScreenToSmallWarning-content {
1099 padding: 10px;
1100 text-align: center;
1101 }
1102
1103 /* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */
1104 @media only screen and (min-width: 550px) and (min-height: 280px) {
1105 .wvScreenToSmallWarning {
1106 display: none;
1107 }
1108 }
1109
1110 /* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */
1111 @media only screen and (min-width: 280px) and (min-height: 550px) {
1112 .wvScreenToSmallWarning {
1113 display: none;
1114 }
1115 }