123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- @font-face {
- font-family: 'icomoon';
- src: url('../fonts/meteocons/icomoon.eot?26rom9');
- 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');
- font-weight: normal;
- font-style: normal;
- }
- .icon {
- font-family: 'icomoon';
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- .icon--radioactive:before {
- content: "\e905";
- }
- .icon--sun:before {
- content: "\e900";
- }
- .icon--drizzle:before {
- content: "\e902";
- }
- .icon--rainy:before {
- content: "\e903";
- }
- .icon--storm:before {
- content: "\e906";
- }
- .slideshow {
- position: relative;
- height: 100vh;
- width: 100vw;
- background: url(../img/city.jpg) no-repeat center top;
- background-size: cover;
- overflow: hidden;
- }
- .slideshow::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background: rgba(255, 255, 255, 0.2);
- }
- .slide {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- text-align: center;
- padding: 35vh 0 0 0;
- pointer-events: none;
- line-height: 1;
- font-family: "Roboto", sans-serif;
- }
- .slide--current {
- pointer-events: auto;
- }
- .slideshow__nav {
- text-align: center;
- width: 100%;
- display: -webkit-flex;
- display: flex;
- -webkit-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-align-items: center;
- align-items: center;
- position: absolute;
- bottom: 28vh;
- }
- .nav-item {
- display: block;
- padding: 1em;
- color: #252445;
- -webkit-transition: color 0.3s;
- transition: color 0.3s;
- }
- .nav-item:hover,
- .nav-item:focus,
- .nav-item--current {
- color: #fff;
- }
- .nav-item .icon {
- font-size: 2em;
- }
- .nav-item span {
- display: block;
- margin: 0.25em 0 0 0;
- font-weight: 700;
- }
- /* Content */
- .slide__element {
- opacity: 0;
- color: #252445;
- -webkit-transform: translate3d(0, 50px, 0);
- transform: translate3d(0, 50px, 0);
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- }
- .slide--current .slide__element {
- opacity: 1;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- .slide__element--temp {
- font-size: 8em;
- font-weight: 700;
- margin: 0 0 0.1em;
- }
- .slide__element--temp small {
- font-size: 0.25em;
- }
- .slide__element--info {
- font-size: 2em;
- }
- .slide__element--date {
- font-size: 1em;
- font-weight: 700;
- margin: 0 0 1em;
- }
- @media screen and (max-height: 39em) {
- .slideshow {
- font-size: 75%;
- }
- .slide {
- padding-top: 35vh;
- }
- .slideshow__nav {
- bottom: 6em;
- }
- }
- .el-login {
- text-align: center;
- width: 100%;
- display: -webkit-flex;
- display: flex;
- -webkit-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-align-items: center;
- align-items: center;
- position: absolute;
- bottom: 28vh;
- }
- .login {
- background: #1BBA9A;
- width: 400px;
- height: 400px;
- color: #F0F1F0;
- font-weight: bold;
- }
- .closeform {
- cursor: pointer;
- height: 30px;
- position: absolute;
- right: 12px;
- top: 30px;
- -webkit-transition: color 0.2s ease-in-out;
- -moz-transition: color 0.2s ease-in-out;
- -o-transition: color 0.2s ease-in-out;
- transition: color 0.2s ease-in-out;
- width: 30px;
- z-index: 2000;
- }
- .login-head {
- padding: 2em 0;
- background: #6D4A70;
- position: relative;
- }
- .login-head h1 {
- color: #fff;
- font-size: 1.5em;
- text-align: left;
- margin: 0 23px;
- }
- .login form {
- position: relative;
- text-align: left;
- padding: 1em 2em;
- }
- .login form p {
- margin-bottom: 5px;
- }
- .login form label {
- display: block;
- font-size: 16px;
- padding: 10px 0 0;
- color: #FCFCFC;
- letter-spacing: 1px;
- font-weight: normal;
- }
- .login form input {
- padding: 10px;
- width: 100%;
- border: 2px solid #F0F1F0;
- background: transparent;
- color: #F0F1F0;
- font-weight: 300;
- font-size: 24px;
- }
- .login form input:focus {
- outline: 0;
- }
- .login form button {
- display: block;
- margin-top: 30px;
- padding: 1em;
- width: 100%;
- border: none;
- background: #337ab7;
- color: #1BBA9A;
- letter-spacing: 1px;
- line-height: 0;
- font-size: 17px;
- }
|