dynamic-resources/css/styles.css
.hidePlaceholder::-webkit-input-placeholder
{
/* safari doesn't clear the placeholder when setting the value via javascript */
color: transparent!important;
}
.link {
width: 300px;
}
@media only screen and (max-width: 768px) {
.link {
padding-left: 15px !important;
}
}
input {
font-size: 16px;
}
#initialState {
display: none;
}
.jumbotron {
padding: 10px 1px 1px 1px;
}
.larger {
font-size: 24px;
}
.footer {
position: fixed;
bottom: 3px;
}
.dragHandle {
cursor: move;
}
.dropzoneHidden {
padding: 0px;
height: 0px;
}
.dropzoneActiveNew {
animation-name: growHeightSmall;
animation-duration: 600ms;
}
.dropzoneActive {
border: 1px solid #AAAAAA;
padding: 1px;
height: 10px;
}
.dropzoneOver {
padding: 1px;
height: 10px;
animation-name: growHeight;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
@keyframes growHeightSmall {
0% {
height: 0px;
border: 0px;
padding: 0px;
}
90% {
height: 0px;
border: 0px;
padding: 0px;
}
100% {
height: 10px;
border: 1px solid #AAAAAA;
padding: 1px;
}
}
@keyframes growHeight {
0% {
border: 1px solid black;
height: 20px;
}
50% {
border: 5px solid black;
height: 20px;
}
100% {
border: 1px solid black;
height: 20px;
}
}
.navbar {
z-index: 99999;
}
.horizontalScroll {
width: 400px;
overflow: auto;
border: 1px solid black;
margin-bottom: 15px;
}
.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: 300px;
margin: 12% auto;
margin-bottom: 25px;
margin-top: 0px;
}
.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;
}
.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-blizzard {
color: #fff;
background-color: #1B2023;
}
.btn-blizzard:hover,
.btn-blizzard:focus {
color: #fff;
background-color: #215D83;
}
.btn-reddit {
color: #fff;
background-color: #ff4400;
}
.btn-reddit:hover,
.btn-reddit:focus {
color: #fff;
background-color: #ff733f;
}
/* error/info/warning messages */
.alert {
position: fixed;
left: 0px;
top: -5px;
margin-top: 5px;
width: 100%;
z-index: 16777271;
}
.alert-success {
-webkit-animation: seconds 15.0s forwards;
animation: seconds 15.0s forwards;
position: fixed;
}
@-webkit-keyframes seconds {
from {
top: -65px;
}
20% {
top: -5px;
}
80% {
top: -5px;
}
to {
top: -100px;
}
}
@keyframes seconds {
from {
top: -65px;
}
20% {
top: -5px;
}
80% {
top: -5px;
}
to {
top: -100px;
}
}
/*********************
* react-tag-autocomplete
*********************/
/**
* <div class="react-tags">
* <div class="react-tags__selected">
* <button class="react-tags__selected-tag">
* <span class="react-tags__selected-tag-name" />
* </button>
* </div>
* <div class="react-tags__search">
* <div class="react-tags__search-input">
* <input />
* <div />
* </div>
* <div class="react-tags__suggestions">
* <ul>
* <li class="is-active">
* <mark />
* </li>
* <li class="is-disabled">
* <mark />
* </li>
* </ul>
* </div>
* </div>
*/
.react-tags {
position: relative;
padding: 6px 0 0 6px;
border: 1px solid #D1D1D1;
border-radius: 1px;
/* shared font styles */
font-size: 1em;
line-height: 1.2;
/* clicking anywhere will focus the input */
cursor: text;
}
.react-tags.is-focused {
border-color: #B1B1B1;
}
.react-tags__selected {
display: inline;
}
.react-tags__selected-tag {
display: inline-block;
box-sizing: border-box;
margin: 0 6px 6px 0;
padding: 6px 8px;
border: 1px solid #D1D1D1;
border-radius: 2px;
background: #F1F1F1;
/* match the font styles */
font-size: inherit;
line-height: inherit;
}
.react-tags__selected-tag:after {
content: '\2715';
color: #AAA;
margin-left: 8px;
}
.react-tags__selected-tag:hover,
.react-tags__selected-tag:focus {
border-color: #B1B1B1;
}
.react-tags__search {
display: inline-block;
/* match tag layout */
padding: 7px 2px;
margin-bottom: 6px;
/* prevent autoresize overflowing the container */
max-width: 100%;
}
@media screen and (min-width: 30em) {
.react-tags__search {
/* this will become the offsetParent for suggestions */
position: relative;
}
}
.react-tags__search input {
/* prevent autoresize overflowing the container */
max-width: 100%;
/* remove styles and layout from this element */
margin: 0;
padding: 0;
border: 0;
outline: none;
/* match the font styles */
font-size: inherit;
line-height: inherit;
}
.react-tags__search input::-ms-clear {
display: none;
}
.react-tags__suggestions {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 9999;
}
@media screen and (min-width: 30em) {
.react-tags__suggestions {
width: 240px;
}
}
.react-tags__suggestions ul {
margin: 4px -1px;
padding: 0;
list-style: none;
background: white;
border: 1px solid #D1D1D1;
border-radius: 2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.react-tags__suggestions li {
border-bottom: 1px solid #ddd;
padding: 6px 8px;
}
.react-tags__suggestions li mark {
text-decoration: underline;
background: none;
font-weight: 600;
}
.react-tags__suggestions li:hover {
cursor: pointer;
background: #eee;
}
.react-tags__suggestions li.is-active {
background: #b7cfe0;
}
.react-tags__suggestions li.is-disabled {
opacity: 0.5;
cursor: auto;
}