examples/client/stylesheets/styles.css
body {
font-family: 'Open Sans', sans-serif;
background: #e4e7ec;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
a {
color: #000;
}
ul {
margin-bottom: 0;
}
.list-inline > li {
padding-left: 15px;
padding-right: 15px;
}
.text-muted {
color: #90939a;
}
.navbar {
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}
.navbar-header {
float: left;
padding-left: 15px;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding: 15px;
}
.navbar-default {
color: #fff;
background: #fff;
}
.navbar-default .navbar-brand {
color: #333;
background-color: #ffe939;
}
.navbar-default .navbar-brand:hover {
color: #ffe939;
background-color: #333;
}
.navbar-brand {
margin-left: -15px;
transition: 0.25s all;
}
.panel {
border-color: #cfd9D7;
border-radius: 2px;
box-shadow: 0 8px 17px rgba(0, 0, 0, .2);
}
.panel-default > .panel-heading {
font-size: 85%;
font-weight: bold;
color: #444;
text-transform: uppercase;
background-color: #f6f6f6;
border-color: #cfd9db;
}
.form-control {
border-radius: 0;
}
.center-form {
width: 330px;
margin: 12% auto;
}
.signup-or-separator {
position: relative;
height: 34px;
text-align: center;
background: none;
}
.signup-or-separator hr {
width: 90%;
margin: -16px auto 10px auto;
border-top: 1px solid #dce0e0;
}
.signup-or-separator .text {
display: inline-block;
padding: 8px;
margin: 0;
background-color: #fff;
}
.has-feedback .form-control-feedback {
top: 0;
left: 0;
width: 46px;
height: 46px;
line-height: 46px;
color: #555;
}
.password-strength-indicator {
position: absolute;
top: 10px;
right: 0;
width: 5px;
padding: 0 15px;
}
.password-strength-indicator span {
display: block;
width: 5px;
height: 5px;
margin-bottom: 2px;
background: #ebeef1;
border-radius: 5px;
}
[class^='ion-'] {
font-size: 1.2em;
}
.has-feedback .form-control {
padding-left: 42.5px;
}
.alert-material {
position: fixed;
right: 12px;
bottom: 12px;
z-index: 1;
display: inline-block;
min-height: 48px;
padding: 13px 24px 12px;
font-family: 'Roboto', sans-serif;
color: #f1f1f1;
cursor: default;
background: #323232;
border-radius: 2px;
outline: none;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.profile-picture {
height: 100px;
display: block;
}
.btn {
font-weight: bold;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}
.btn-primary {
background-color: #4285f4;
}
.btn-primary:hover {
background-color: #3367d6;
}
.btn-success {
background-color: #0f9d58;
}
.btn-success:hover {
background-color: #196c4a;
}
.btn-danger {
background-color: #db4437;
}
.btn-danger:hover {
background-color: #b04c3b;
}
.btn-group-vertical .btn {
margin-bottom: 10px;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-radius: 2px;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 2px;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-radius: 2px;
}
.btn-lg {
font-size: 14px;
}
.btn [class^='ion-'] {
margin-right: 5px;
}
.btn .fa {
margin-right: 5px;
}
/*********************
* Social Buttons
*********************/
.btn-google-plus {
color: #fff;
background-color: #dd4b39;
border: 1px solid #d54331;
}
.btn-google-plus:hover,
.btn-google-plus:focus {
color: #fff;
background-color: #cb3927;
}
.btn-facebook {
color: #fff;
background-color: #3b5998;
border: 1px solid #335190;
}
.btn-facebook:hover,
.btn-facebook:focus {
color: #fff;
background-color: #294786;
}
.btn-linkedin {
color: #fff;
background-color: #007bb6;
border: 1px solid #0073ae;
}
.btn-linkedin:hover,
.btn-linkedin:focus {
color: #fff;
background-color: #0069a4;
}
.btn-twitter {
color: #fff;
background-color: #00aced;
border: 1px solid #009fdb;
}
.btn-twitter:hover,
.btn-twitter:focus {
color: #fff;
background-color: #0090c7;
}
.btn-foursquare {
color: #fff;
background-color: #f94877;
border: 1px solid #f8215a;
}
.btn-foursquare:hover,
.btn-foursquare:focus {
color: #fff;
background-color: #f71752;
}
.btn-github {
color: #fff;
background-color: #444;
border: 1px solid #3b3b3b;
}
.btn-github:hover,
.btn-github:focus {
color: #fff;
background-color: #303030;
}
.btn-instagram {
color: #fff;
background-color: #3f729b;
}
.btn-instagram:hover,
.btn-instagram:focus {
color: #fff;
background-color: #305777;
}
.btn-yahoo {
color: #fff;
background-color: #720e9e;
}
.btn-yahoo:hover,
.btn-yahoo:focus {
color: #fff;
background-color: #600e85;
}
.btn-live {
color: #fff;
background-color: #2672ec;
}
.btn-live:hover,
.btn-live:focus {
color: #fff;
background-color: #125acd;
}
.btn-twitch {
color: #fff;
background-color: #6441a5;
}
.btn-twitch:hover,
.btn-twitch:focus {
color: #fff;
background-color: #7550ba;
}
.btn-bitbucket {
color: #fff;
background-color: #10375e;
}
.btn-bitbucket:hover,
.btn-bitbucket:focus {
color: #fff;
background-color: #0d2c4a;
}
.btn-spotify {
color: #fff;
background-color: #2ebd59;
}
.btn-spotify:hover,
.btn-spotify:focus {
color: #fff;
background-color: #29a34e;
}
/*********************
* Animations
*********************/
.fadeZoom.ng-enter {
-webkit-animation-duration: 0.6s, 0.2s;
-moz-animation-duration: 0.2s, 0.2s;
-ms-animation-duration: 0.2s, 0.2s;
animation-duration: 0.2, 0.2s;
-webkit-animation-name: fadeIn, zoomIn;
-moz-animation-name: fadeIn, zoomIn;
-ms-animation-name: fadeIn, zoomIn;
animation-name: fadeIn, zoomIn;
}
.fadeZoomFadeDown.ng-enter {
-webkit-animation-duration: 0.2s, 0.2s;
-moz-animation-duration: 0.2s, 0.2s;
-ms-animation-duration: 0.2s, 0.2s;
animation-duration: 0.2s, 0.2s;
-webkit-animation-name: fadeIn, zoomIn;
-moz-animation-name: fadeIn, zoomIn;
-ms-animation-name: fadeIn, zoomIn;
animation-name: fadeIn, zoomIn;
}
.fadeZoomFadeDown.ng-leave {
-webkit-animation: fadeOutDown 0.2s;
-moz-animation: fadeOutDown 0.2s;
-ms-animation: fadeOutDown 0.2s;
animation: fadeOutDown 0.2s;
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 0.8);
-moz-transform: scale3d(0.8, 0.8, 0.8);
-ms-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 0.8);
-moz-transform: scale3d(0.8, 0.8, 0.8);
-ms-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}
50% {
opacity: 1;
}
}