1 |
- *{box-sizing:border-box;font-family:Roboto, sans-serif}html,body{margin:0;padding:0;width:100%;height:100%}#app{background-color:white;width:100%;height:100%}.loading{background-color:white;width:100%;height:100%;background-image:url("../images/loading.gif");background-position:center;background-size:128px 128px;background-repeat:no-repeat}header{width:100%;height:64px;line-height:64px;text-align:center;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}#header-home{width:100%;height:100%;background-color:#424242}#header-home .title{float:left;height:100%;color:white;padding:0 16px 0 16px;font-weight:300;font-size:32px;cursor:pointer}#header-home .link{z-index:101;position:relative;float:right;height:100%;color:white;padding:0 16px 0 16px;cursor:pointer}#header-home .title:hover,#header-home .link:hover{cursor:pointer;background-color:#393939}#header-room{width:100%;height:100%;background-color:#0091ea}#header-room .left-link,#header-room .right-link{float:left;width:64px;color:white;text-decoration:none;font-weight:300;font-size:28px}#header-room .left-link:hover,#header-room .right-link:hover{cursor:pointer;background-color:#0083d3}#header-room .center-link{display:inline-block;margin:0 auto;color:white;text-decoration:none;font-weight:300;font-size:32px}main #home{width:100%;height:auto}main #home .group{width:100%;height:448px;margin:64px 0 64px 0}main #home .group .group-title{float:left;clear:none;width:100%;height:64px;line-height:48px;text-align:center;font-size:48px}main #home .group .group-nav{background-color:transparent;color:rgba(0,0,0,0.75);float:left;clear:none;width:64px;height:384px;line-height:384px;text-align:center;font-size:64px;cursor:pointer}main #home .group .group-nav:hover{color:#222222}main #home .group .group-rooms{white-space:nowrap;text-align:center;overflow:hidden;float:left;clear:none;width:calc(100% - 128px);height:384px}main #home .group .group-rooms .rooms-room{position:relative;top:16px;display:inline-block;clear:none;width:256px;height:345px;margin:0 16px 0 16px;box-shadow:0 1px 6px 2px rgba(0,0,0,0.25);cursor:pointer}main #home .group .group-rooms .rooms-room .room-info{display:flex;flex-direction:row;align-items:center;padding:5px}main #home .group .group-rooms .rooms-room .room-image{width:100%;height:256px}main #home .group .group-rooms .rooms-room .room-grid-left{display:flex;flex-direction:column;width:75%;text-align:left;padding-left:10px}main #home .group .group-rooms .rooms-room .room-grid-left h3,main #home .group .group-rooms .rooms-room .room-grid-left p{margin:0;white-space:normal}main #home .group .group-rooms .rooms-room .room-grid-right{display:flex;flex-direction:column;width:25%}main #overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:90000;cursor:pointer}main .modal{position:fixed;display:block;box-shadow:0 1px 6px 2px rgba(0,0,0,0.25);background-color:white;z-index:90001;padding:12px;transition:top 0.5s ease;overflow:hidden}main .modal .modal-title{text-align:center;font-size:32px;margin:0 12px;height:42px;line-height:42px;display:inline-block;width:calc(100% - 24px)}main .modal .modal-exit{cursor:pointer;position:absolute;right:8px;top:8px;font-size:24px}main .modal .modal-input{outline:none;border:1px solid #d3d3d3;padding-left:8px;font-size:16px;height:42px;line-height:42px;margin:8px 12px;display:inline-block;width:calc(100% - 24px)}main .modal .modal-recaptcha{display:block;height:76px;overflow:hidden;margin:8px 12px;display:inline-block;width:calc(100% - 24px)}main .modal .modal-submit{cursor:pointer;color:white;background-color:#1976d2;font-size:24px;text-align:center;box-shadow:0 1px 3px 1px rgba(0,0,0,0.1);display:inline-block;width:calc(100% - 24px);height:42px;line-height:42px;margin:8px 12px}main .modal .modal-submit:hover{box-shadow:0 1px 3px 1px rgba(0,0,0,0.25)}main .modal .modal-account-btn{float:left;width:144px;height:144px;line-height:144px;text-align:center;background-color:#e9e9e9;border:1px solid #d3d3d3;border-radius:5px;margin:12px;color:#3a3a3a;cursor:pointer}main .modal .modal-account-btn:hover{background-color:#dfdfdf}footer{width:100%;height:200px;background-color:#e0e0e0;padding-top:26px}footer .footer-left{float:left;width:50%;height:150px;padding-left:64px}footer .footer-left .left-title{font-size:25px;color:#616161;margin-bottom:16px}footer .footer-left .left-message{font-size:15px;color:#757575;margin-bottom:16px}footer .footer-left .left-icons .icon{float:left;font-size:32px;padding-right:16px;color:#757575}footer .footer-left .left-icons .icon:hover{cursor:pointer;color:#222222}footer .footer-right{float:right;width:50%;height:150px;padding-left:64px}footer .footer-right .right-links{float:right;width:200px}footer .footer-right .links-title{float:right;width:200px;font-size:25px;color:#616161;margin-bottom:8px}footer .footer-right .link{float:right;width:200px;clear:both;font-size:15px;color:#757575;margin-bottom:2px}footer .footer-right .link:hover{cursor:pointer;color:#222222}footer .footer-message{float:left;width:100%;height:50px;line-height:50px;padding-left:128px;background-color:#d3d3d3;color:#757575}
|