app.css

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);@import url(https://fonts.googleapis.com/css?family=Concert+One:300,400,500,700);.page-container{width:100%;min-width:290px}.page-content{padding-top:40px}.header{width:100vw;height:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:fixed;background-color:#70777b;color:#fff;z-index:5}.header__title{margin:0 0 2px;font-family:Concert One,sans-serif;font-size:20px;font-weight:400;letter-spacing:.3px}.search-container{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:25px auto 0;font-family:Roboto,sans-serif}.search-info{margin:0 20px 18px;text-align:center;font-size:14px}.searchbar-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.searchbar-input-container{width:360px;min-height:38px}.searchbar-input{width:100%;height:38px;padding-left:30px;background-color:#e8e9eb;border-radius:3px 0 0 3px;border:none;font-size:16px;font-weight:500;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .2s linear;transition:all .2s linear}.searchbar-input:focus,.searchbar-input:hover{outline:none;-webkit-box-shadow:inset 0 0 3px #349acc;box-shadow:inset 0 0 3px #349acc}.searchbar-input::-webkit-input-placeholder{font-style:italic}.searchbar-input:-ms-input-placeholder{font-style:italic}.searchbar-input::placeholder{font-style:italic}.btn-search{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:38px;border-left:1px solid #fff;padding:0 20px;background-color:#9ba0a3;color:#fff;font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:0 3px 3px 0;-webkit-transition:all .3s linear;transition:all .3s linear;cursor:pointer}.btn-search:hover{background-color:#404448}.searchbar-dropdown{position:absolute;width:360px;height:164px;padding-top:8px;background-color:#fff;-webkit-box-shadow:0 2px 10px -2px rgba(0,0,0,.7);box-shadow:0 2px 10px -2px rgba(0,0,0,.7);top:200px;left:400px;overflow-y:scroll;z-index:100}.dropdown-item{font-family:Roboto,sans-serif;padding:4px 4px 4px 17px;-webkit-transition:all .1s linear;transition:all .1s linear;cursor:pointer}.dropdown-item--active,.dropdown-item:hover{background-color:#add8e6}.dropdown-item--main{font-weight:600}@media (max-width:420px){.searchbar-dropdown,.searchbar-input-container{width:calc(100% - 72px)}.btn-search{max-width:80px;padding:0 10px}.search-info{max-width:260px;line-height:1.44;font-size:1em}}.issues-container{width:600px;margin:20px auto 0;font-family:Roboto,sans-serif;border:1px solid #d9e2e3}.issues-container--fade{opacity:.5}.repo-title{width:600px;margin:30px auto 0;font-family:Roboto,sans-serif;color:#1e90ff;opacity:.9;font-size:18px}.issues-header{-ms-flex-pack:justify;justify-content:space-between;padding:10px 30px;background-color:#f5f5f5;border-bottom:1px solid #d9e2e3}.issues-header,.issues-toolbar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.issues-toolbar{font-size:14px}.issues-toolbar__button{padding:8px;margin:0 5px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.issues-toolbar__button:first-child{margin-left:15px}.issues-toolbar__button:last-child{margin-right:15px}.issues-toolbar__button.active{color:#fff;background-color:#70777b;border-radius:3px}.issue-item{display:-ms-flexbox;display:flex;padding:11px 15px;border-bottom:1px solid #d9e2e3}.issue-item__title{margin-bottom:5px;font-weight:500;font-size:16px}.issue-item__info{font-size:13px;opacity:.6}.issue-item:last-child{border-bottom:none}.issue-item:hover{background-color:#f5f5f5}.issue-icon{width:15px;height:15px;margin-right:12px;display:block;margin-top:2px;background-image:url(/images/info.svg);background-size:15px 15px}.message-container{width:600px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin:30px auto;padding:20px 30px;border:1px solid #d3d3d3;border-radius:3px;color:#db7093;text-align:center;line-height:23px;font-family:Roboto,sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}.message-container img{width:150px;height:150px;margin-top:20px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.message-container:hover img{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.message-container--error{border:1px solid #f08080;color:#f08080}.nav-button{margin-top:15px;margin-bottom:20px;color:#349acc;font-size:14px;cursor:pointer}.nav-button:hover{color:#4169e1}.issue-repo-container{width:600px;margin:109px auto 0;padding:4px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-family:Roboto,sans-serif;font-weight:500;cursor:pointer;-webkit-transition:all .3s linear;transition:all .3s linear;-webkit-box-sizing:border-box;box-sizing:border-box}.issue-repo-container:hover{background-color:#e8e9eb}.issue-container{width:600px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:40px auto 0;font-family:Roboto,sans-serif;border:1px solid #d9e2e3}.issue-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:20px;letter-spacing:.2px}.issue-title__title{-ms-flex-positive:1;flex-grow:1}.issue-title__state{width:50px;margin-right:16px;padding:3px 7px;background-color:#3cb371;color:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px;font-size:16px}.issue-title__number{margin-left:10px;opacity:.4}.issue-user__avatar{width:70px;height:70px;border-radius:3px}.issue-user__name{text-decoration:none;color:#333;font-weight:500;margin-right:6px}.issue-user__name:hover{text-decoration:underline}.issue-content{margin-top:30px;display:-ms-flexbox;display:flex}.issue-content--main{margin-left:20px;border:1px solid #d9e2e3;-webkit-box-sizing:border-box;box-sizing:border-box}.issue-content__header{height:70px;padding:0 20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-bottom:1px solid #d9e2e3}.issue-content__body{padding:20px;word-break:break-word}.issue-content__footer{padding:20px}.issue-content__footer,.pagination{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pagination{-ms-flex-align:center;align-items:center;padding:0 20px}@media (max-width:599px){.issues-container{margin:20px 7px}.issues-container,.message-container{width:calc(100% - 16px)}.issues-header{padding:6px 15px}.issues__title{font-size:1.2em}.issues-toolbar{max-width:65%}.issues-toolbar__button{margin:0 3px;padding:6px}.repo-title{width:calc(100% - 10px);margin-left:10px}.btn-search{max-width:80px;padding:0 10px}.issue-repo-container{width:calc(100% - 5px);margin:25px 5px 0}.issue-container{width:calc(100% - 7px);-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px}.issue-title{font-size:16px}.issue-user__avatar{width:40px;height:40px}.issue-content__header{height:40px;font-size:14px;padding:0 7px;-ms-flex-pack:justify;justify-content:space-between}.issue-content .issue-user__name{margin-right:10px}.issue-content__body{padding:14px}}.spinner{margin:100px auto;width:50px;height:50px;position:relative;text-align:center;-webkit-animation:sk-rotate 2s infinite linear;animation:sk-rotate 2s infinite linear}.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:sk-bounce 2s infinite ease-in-out;animation:sk-bounce 2s infinite ease-in-out}.dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-rotate{to{-webkit-transform:rotate(1turn)}}@keyframes sk-rotate{to{transform:rotate(1turn);-webkit-transform:rotate(1turn)}}@-webkit-keyframes sk-bounce{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}@media screen and (min-width:960px){html{margin-right:calc(-100vw + 100%)}}body{margin:0}