projects / picsort / blame
| Commit | Line | Data |
|---|---|---|
| 0dd95dc2 SW |
1 | @-webkit-keyframes fadeOut { |
| 2 | from { opacity: 1; } | |
| 3 | to { opacity: 0; } | |
| 4 | } | |
| 5 | @keyframes fadeOut { | |
| 6 | from { opacity: 1; } | |
| 7 | to { opacity: 0; } | |
| 8 | } | |
| 9 | ||
| 7a8b563c SW |
10 | img { |
| 11 | -webkit-transform-origin: top left; | |
| 12 | -ms-transform-origin: top left; | |
| 13 | transform-origin: top left; | |
| 14 | } | |
| 15 | ||
| 59a0fba1 | 16 | .rot90 { |
| e44ce0d9 | 17 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); |
| 7a8b563c SW |
18 | -webkit-transform: rotate(90deg) translateY(-100%);; |
| 19 | -moz-transform: rotate(90deg) translateY(-100%);; | |
| 20 | -o-transform: rotate(90deg) translateY(-100%);; | |
| 21 | rotation: 90deg translateY(-100%);; | |
| 59a0fba1 SW |
22 | } |
| 23 | .rot180 { | |
| e44ce0d9 | 24 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); |
| 7a8b563c SW |
25 | -webkit-transform: rotate(180deg) translate(-100%,-100%); |
| 26 | -moz-transform: rotate(180deg) translate(-100%,-100%); | |
| 27 | -o-transform: rotate(180deg) translate(-100%,-100%); | |
| 28 | rotation: 180deg translate(-100%,-100%); | |
| 59a0fba1 SW |
29 | } |
| 30 | .rot270 { | |
| e44ce0d9 | 31 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); |
| 7a8b563c SW |
32 | -webkit-transform: rotate(270deg) translateX(-100%); |
| 33 | -moz-transform: rotate(270deg) translateX(-100%); | |
| 34 | -o-transform: rotate(270deg) translateX(-100%); | |
| 35 | rotation: 270deg translateX(-100%); | |
| 59a0fba1 SW |
36 | } |
| 37 | ||
| 0dd95dc2 SW |
38 | #message { |
| 39 | position: fixed; | |
| 40 | font-size: 18pt; | |
| 41 | margin: 2em; | |
| 42 | border-radius: 10px; | |
| 43 | padding: .3em; | |
| 44 | color: white; | |
| 45 | font-weight: bold; | |
| 46 | font-family: sans-serif; | |
| 47 | background-color: rgba(200,200,200,0.5); | |
| 48 | } | |
| 49 | ||
| 5498080c | 50 | .inputcontainer { |
| d92eb78e SW |
51 | position: fixed; |
| 52 | width: 100%; | |
| eaa5e016 | 53 | height: 100%; |
| d92eb78e SW |
54 | } |
| 55 | #name { | |
| 56 | display: block; | |
| 57 | margin-left: auto; | |
| 58 | margin-right: auto; | |
| 59 | font-size: 30pt; | |
| 60 | } | |
| eaa5e016 SW |
61 | #shell_out { |
| 62 | display: none; | |
| 63 | width: 80%; | |
| 64 | height: 80%; | |
| 65 | margin: 5em; | |
| 66 | color: white; | |
| 67 | background-color: black; | |
| 68 | padding: 1em; | |
| 69 | } | |
| d92eb78e | 70 | |
| 0dd95dc2 SW |
71 | .fade { |
| 72 | opacity: 0; | |
| 0dd95dc2 SW |
73 | -webkit-animation-duration: 2s; |
| 74 | -webkit-animation-name: fadeOut; | |
| e44ce0d9 SW |
75 | animation-duration: 2s; |
| 76 | animation-name: fadeOut; | |
| 0dd95dc2 SW |
77 | } |
| 78 | ||
| ecb5b4ef SW |
79 | .fit_view { |
| 80 | max-width: 100%; | |
| 81 | max-height: 100%; | |
| 82 | } |