style1.css1 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. @font-face {
  2. font-family: 'icomoon';
  3. src: url('../fonts/meteocons/icomoon.eot?26rom9');
  4. src: url('../fonts/meteocons/icomoon.eot?26rom9#iefix') format('embedded-opentype'), url('../fonts/meteocons/icomoon.ttf?26rom9') format('truetype'), url('../fonts/meteocons/icomoon.woff?26rom9') format('woff'), url('../fonts/meteocons/icomoon.svg?26rom9#icomoon') format('svg');
  5. font-weight: normal;
  6. font-style: normal;
  7. }
  8. .icon {
  9. font-family: 'icomoon';
  10. speak: none;
  11. font-style: normal;
  12. font-weight: normal;
  13. font-variant: normal;
  14. text-transform: none;
  15. line-height: 1;
  16. /* Better Font Rendering =========== */
  17. -webkit-font-smoothing: antialiased;
  18. -moz-osx-font-smoothing: grayscale;
  19. }
  20. .icon--radioactive:before {
  21. content: "\e905";
  22. }
  23. .icon--sun:before {
  24. content: "\e900";
  25. }
  26. .icon--drizzle:before {
  27. content: "\e902";
  28. }
  29. .icon--rainy:before {
  30. content: "\e903";
  31. }
  32. .icon--storm:before {
  33. content: "\e906";
  34. }
  35. .slideshow {
  36. position: relative;
  37. height: 100vh;
  38. width: 100vw;
  39. background: url(../img/city.jpg) no-repeat center top;
  40. background-size: cover;
  41. overflow: hidden;
  42. }
  43. .slideshow::before {
  44. content: '';
  45. position: absolute;
  46. left: 0;
  47. top: 0;
  48. width: 100%;
  49. height: 100%;
  50. background: rgba(255, 255, 255, 0.2);
  51. }
  52. .slide {
  53. position: absolute;
  54. top: 0;
  55. left: 0;
  56. width: 100%;
  57. height: 100%;
  58. text-align: center;
  59. padding: 35vh 0 0 0;
  60. pointer-events: none;
  61. line-height: 1;
  62. font-family: "Roboto", sans-serif;
  63. }
  64. .slide--current {
  65. pointer-events: auto;
  66. }
  67. .slideshow__nav {
  68. text-align: center;
  69. width: 100%;
  70. display: -webkit-flex;
  71. display: flex;
  72. -webkit-flex-wrap: wrap;
  73. flex-wrap: wrap;
  74. -webkit-justify-content: center;
  75. justify-content: center;
  76. -webkit-align-items: center;
  77. align-items: center;
  78. position: absolute;
  79. bottom: 28vh;
  80. }
  81. .nav-item {
  82. display: block;
  83. padding: 1em;
  84. color: #252445;
  85. -webkit-transition: color 0.3s;
  86. transition: color 0.3s;
  87. }
  88. .nav-item:hover,
  89. .nav-item:focus,
  90. .nav-item--current {
  91. color: #fff;
  92. }
  93. .nav-item .icon {
  94. font-size: 2em;
  95. }
  96. .nav-item span {
  97. display: block;
  98. margin: 0.25em 0 0 0;
  99. font-weight: 700;
  100. }
  101. /* Content */
  102. .slide__element {
  103. opacity: 0;
  104. color: #252445;
  105. -webkit-transform: translate3d(0, 50px, 0);
  106. transform: translate3d(0, 50px, 0);
  107. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  108. transition: transform 0.3s, opacity 0.3s;
  109. }
  110. .slide--current .slide__element {
  111. opacity: 1;
  112. -webkit-transform: translate3d(0, 0, 0);
  113. transform: translate3d(0, 0, 0);
  114. }
  115. .slide__element--temp {
  116. font-size: 8em;
  117. font-weight: 700;
  118. margin: 0 0 0.1em;
  119. }
  120. .slide__element--temp small {
  121. font-size: 0.25em;
  122. }
  123. .slide__element--info {
  124. font-size: 2em;
  125. }
  126. .slide__element--date {
  127. font-size: 1em;
  128. font-weight: 700;
  129. margin: 0 0 1em;
  130. }
  131. @media screen and (max-height: 39em) {
  132. .slideshow {
  133. font-size: 75%;
  134. }
  135. .slide {
  136. padding-top: 35vh;
  137. }
  138. .slideshow__nav {
  139. bottom: 6em;
  140. }
  141. }
  142. .el-login {
  143. text-align: center;
  144. width: 100%;
  145. display: -webkit-flex;
  146. display: flex;
  147. -webkit-flex-wrap: wrap;
  148. flex-wrap: wrap;
  149. -webkit-justify-content: center;
  150. justify-content: center;
  151. -webkit-align-items: center;
  152. align-items: center;
  153. position: absolute;
  154. bottom: 28vh;
  155. }
  156. .login {
  157. background: #1BBA9A;
  158. width: 400px;
  159. height: 400px;
  160. color: #F0F1F0;
  161. font-weight: bold;
  162. }
  163. .closeform {
  164. cursor: pointer;
  165. height: 30px;
  166. position: absolute;
  167. right: 12px;
  168. top: 30px;
  169. -webkit-transition: color 0.2s ease-in-out;
  170. -moz-transition: color 0.2s ease-in-out;
  171. -o-transition: color 0.2s ease-in-out;
  172. transition: color 0.2s ease-in-out;
  173. width: 30px;
  174. z-index: 2000;
  175. }
  176. .login-head {
  177. padding: 2em 0;
  178. background: #6D4A70;
  179. position: relative;
  180. }
  181. .login-head h1 {
  182. color: #fff;
  183. font-size: 1.5em;
  184. text-align: left;
  185. margin: 0 23px;
  186. }
  187. .login form {
  188. position: relative;
  189. text-align: left;
  190. padding: 1em 2em;
  191. }
  192. .login form p {
  193. margin-bottom: 5px;
  194. }
  195. .login form label {
  196. display: block;
  197. font-size: 16px;
  198. padding: 10px 0 0;
  199. color: #FCFCFC;
  200. letter-spacing: 1px;
  201. font-weight: normal;
  202. }
  203. .login form input {
  204. padding: 10px;
  205. width: 100%;
  206. border: 2px solid #F0F1F0;
  207. background: transparent;
  208. color: #F0F1F0;
  209. font-weight: 300;
  210. font-size: 24px;
  211. }
  212. .login form input:focus {
  213. outline: 0;
  214. }
  215. .login form button {
  216. display: block;
  217. margin-top: 30px;
  218. padding: 1em;
  219. width: 100%;
  220. border: none;
  221. background: #337ab7;
  222. color: #1BBA9A;
  223. letter-spacing: 1px;
  224. line-height: 0;
  225. font-size: 17px;
  226. }