scss/main.scss
@font-face {
font-family: 'Raleway';
src: url('font/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
url('font/Raleway-Regular.woff') format('woff'),
url('font/Raleway-Regular.ttf') format('truetype'),
url('font/Raleway-Regular.svg') format('svg');
}
@import 'lib/reset.scss';
@import 'partials/sidebar.scss';
@import 'partials/settings.scss';
html, body {
font-family: 'Raleway', sans-serif;
height: 100%;
overflow: hidden;
}
.wrapper {
height: 100%;
background-color: #455A64;
color: #212121;
display: flex;
flex-direction: column;
}
.messages {
padding: 5px;
flex: 1 1 90%;
display: flex;
flex-direction: column;
background-color: #607D8B;
border: 1px solid #9E9E9E;
overflow: auto;
}
.message {
margin: 2px 23px 2px 7px;
padding: 3px;
}
.form {
flex: 0 0 32px;
display: flex;
border: 1px solid #9E9E9E;
}
.focus:focus {
outline: none;
border-color: #BDBDBD;
box-shadow:0 0 5px #BDBDBD;
}
.form > input[type=text] {
font-family: 'Raleway', sans-serif;
background-color: #CFD8DC;
color: #212121;
flex: 1 1 auto;
border: 1px solid #9E9E9E;
padding-left: 5px;
}
.form > input[type=button] {
font-family: 'Raleway', sans-serif;
background-color: #9E9E9E;
flex: 0 0 20%;
border: 1px solid #9E9E9E;
}
.rotate {
animation-name: rotate;
animation-fill-mode: both;
animation-duration: 0.2s;
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}