styles.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. body {
  2. -webkit-perspective: 800px;
  3. perspective: 800px;
  4. height: 100vh;
  5. margin: 0;
  6. overflow: hidden;
  7. font-family: 'Gudea', sans-serif;
  8. background: #EA5C54;
  9. /* Old browsers */
  10. /* FF3.6+ */
  11. /* W3C */
  12. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EA5C54 ', endColorstr='#bb6dec',GradientType=1 );
  13. /* IE6-9 fallback on horizontal gradient */
  14. }
  15. body ::-webkit-input-placeholder {
  16. color: #4E546D;
  17. }
  18. body .authent {
  19. box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
  20. display: none;
  21. background: #35394a;
  22. /* Old browsers */
  23. /* FF3.6+ */
  24. /* Chrome10+,Safari5.1+ */
  25. /* Opera 11.10+ */
  26. /* IE10+ */
  27. background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
  28. /* W3C */
  29. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
  30. /* IE6-9 fallback on horizontal gradient */
  31. position: absolute;
  32. left: 0;
  33. right: 90px;
  34. margin: auto;
  35. width: 100px;
  36. color: white;
  37. text-transform: uppercase;
  38. letter-spacing: 1px;
  39. text-align: center;
  40. padding: 20px 70px;
  41. top: 200px;
  42. bottom: 0;
  43. height: 70px;
  44. opacity: 0;
  45. }
  46. body .authent p {
  47. text-align: center;
  48. color: white;
  49. }
  50. body .success {
  51. display: none;
  52. color: #d5d8e2;
  53. }
  54. body .success p {
  55. font-size: 14px;
  56. }
  57. body p {
  58. color: #D3D7F7;
  59. font-size: 10px;
  60. text-align: left;
  61. }
  62. body .testtwo {
  63. left: -320px !important;
  64. }
  65. body .test {
  66. box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
  67. pointer-events: none;
  68. top: -100px !important;
  69. -webkit-transform: rotateX(70deg) scale(0.8) !important;
  70. transform: rotateX(70deg) scale(0.8) !important;
  71. opacity: .6 !important;
  72. -webkit-filter: blur(1px);
  73. filter: blur(1px);
  74. }
  75. body .login
  76. {
  77. box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  78. opacity: 1;
  79. top: 20px;
  80. -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
  81. -webkit-transition-property: -webkit-transform,opacity,box-shadow,top,left;
  82. transition-property: transform,opacity,box-shadow,top,left;
  83. -webkit-transition-duration: .5s;
  84. transition-duration: .5s;
  85. -webkit-transform-origin: 161px 100%;
  86. -ms-transform-origin: 161px 100%;
  87. transform-origin: 161px 100%;
  88. -webkit-transform: rotateX(0deg);
  89. transform: rotateX(0deg);
  90. position: relative;
  91. width: 240px;
  92. /*border-top: 2px solid #D8312A;*/
  93. height: 300px;
  94. position: absolute;
  95. left: 0;
  96. right: 0;
  97. margin: auto;
  98. top: 0;
  99. bottom: 0;
  100. padding: 100px 40px 40px 40px;
  101. background: #35394a;
  102. /* Old browsers */
  103. /* FF3.6+ */
  104. background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #35394a), color-stop(100%, rgb(0, 0, 0)));
  105. /* Chrome,Safari4+ */
  106. background: -webkit-linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
  107. /* Chrome10+,Safari5.1+ */
  108. /* Opera 11.10+ */
  109. /* IE10+ */
  110. background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
  111. /* W3C */
  112. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
  113. /* IE6-9 fallback on horizontal gradient */
  114. }
  115. body .login .validation {
  116. position: absolute;
  117. z-index: 1;
  118. right: 10px;
  119. top: 14px;
  120. opacity: 0;
  121. }
  122. body .login .disclaimer {
  123. position: absolute;
  124. bottom: 20px;
  125. left: 35px;
  126. width: 250px;
  127. }
  128. body .login_title {
  129. color: #D3D7F7;
  130. height: 60px;
  131. text-align: left;
  132. font-size: 16px;
  133. }
  134. body .login_fields {
  135. height: 208px;
  136. position: absolute;
  137. left: 0;
  138. }
  139. body .login_fields .icon {
  140. position: absolute;
  141. z-index: 1;
  142. left: 36px;
  143. top: 10px;
  144. opacity: .5;
  145. }
  146. body .login_fields input[type='password'],body .login_fields input[type='text'] {
  147. color: #61BFFF !important;
  148. }
  149. body .login_fields input[type='text'], body .login_fields input[type='password'] {
  150. color: #afb1be;
  151. width: 190px;
  152. margin-top: -2px;
  153. background: rgba(57, 61, 82, 0);
  154. left: 0;
  155. padding: 10px 65px;
  156. border-top: 2px solid rgba(57, 61, 82, 0);
  157. border-bottom: 2px solid rgba(57, 61, 82, 0);
  158. border-right: none;
  159. border-left: none;
  160. outline: none;
  161. font-family: 'Gudea', sans-serif;
  162. box-shadow: none;
  163. }
  164. body .login_fields__user, body .login_fields__password {
  165. position: relative;
  166. }
  167. body .login_fields__submit {
  168. position: relative;
  169. top: 17px;
  170. left: 0;
  171. width: 80%;
  172. right: 0;
  173. margin: auto;
  174. }
  175. body .login_fields__submit .forgot {
  176. float: right;
  177. font-size: 10px;
  178. margin-top: 11px;
  179. text-decoration: underline;
  180. }
  181. body .login_fields__submit .forgot a {
  182. color: #606479;
  183. }
  184. body .login_fields__submit input {
  185. border-radius: 50px;
  186. background: transparent;
  187. padding: 10px 50px;
  188. border: 2px solid #4FA1D9;
  189. color: #4FA1D9;
  190. text-transform: uppercase;
  191. font-size: 11px;
  192. -webkit-transition-property: background,color;
  193. transition-property: background,color;
  194. -webkit-transition-duration: .2s;
  195. transition-duration: .2s;
  196. }
  197. body .login_fields__submit input:focus {
  198. box-shadow: none;
  199. outline: none;
  200. }
  201. body .login_fields__submit input:hover {
  202. color: white;
  203. background: #4FA1D9;
  204. cursor: pointer;
  205. -webkit-transition-property: background,color;
  206. transition-property: background,color;
  207. -webkit-transition-duration: .2s;
  208. transition-duration: .2s;
  209. }
  210. /* Color Schemes */
  211. .love {
  212. position: absolute;
  213. right: 20px;
  214. bottom: 0px;
  215. font-size: 11px;
  216. font-weight: normal;
  217. }
  218. .love p {
  219. color: white;
  220. font-weight: normal;
  221. font-family: 'Open Sans', sans-serif;
  222. }
  223. .love a {
  224. color: white;
  225. font-weight: 700;
  226. text-decoration: none;
  227. }
  228. .love img {
  229. position: relative;
  230. top: 3px;
  231. margin: 0px 4px;
  232. width: 10px;
  233. }
  234. .brand {
  235. position: absolute;
  236. left: 20px;
  237. bottom: 14px;
  238. }
  239. .brand img {
  240. width: 30px;
  241. }