PictureStory-v2/client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.component.scss

.c-CommandPrompt {
	height: 100%;
	$max: 60px;
	
	a,
	a:hover,
	a:focus {
		color: inherit;
		text-decoration: none;
		transition: all 0.3s;
		cursor: pointer;
	}

	.material-icons {
		&.md-light{color:rgb(33, 37, 41)}
		&.md-36{font-size:36px}
	}

	.loading {    
		background-color: #ffffff;
		background-image: url("http://loadinggif.com/images/image-selection/3.gif");
		background-size: 25px 25px;
		background-position: 98%;
		background-repeat: no-repeat;
	}
	
	.navbar {
		padding: 5px;
		// background: #222;
		background: rgba(120, 120, 120, 0.3);
		border: none;
		border-radius: 0 5px 5px 0;
		// margin-bottom: 40px;
		width: 97%;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
	}
	
	.navbar-btn {
		box-shadow: none;
		outline: none !important;
		border: none;
	}
	
	i,
	span {
		display: inline-block;
	}
	
	@media (max-width: 768px) {
		&#header {
			#command {
				width: 100%;
			}
	
			.prompt {
				display: none !important;
			}
	
			.navbar {
				border-top-left-radius: .25rem;
				border-bottom-left-radius: .25rem;
							width: 100%;
							margin-bottom: 20px;
					}
		}
	}
	
	// &#header .navbar {
	// 	// width: 97%;
	// }
	
	.good {
		animation: anim .3s ease-in-out;
	}
	
	.repoLink {
		color: #000;
		font-weight: bolder;
		text-decoration: underline;
	}
	
	&.headerprompt {
		display: flex;
		width: 100%;
		padding: 10px 20px;
		.prompt {
			display: flex;
			width: 2em;
			// border-right: 1px solid #fff;
			// background-color: #f5d38b;
			background: rgba(120, 120, 120, 0.3);
			// background: #222;

			width: 3%;
			// margin-bottom: 40px;
			border-radius: 4px 0 0 4px;
			.equalizer {
				height: 100%;
				width: 100%;
				transform: rotate(180deg);
			}
			.hide {
				display: none !important;
			}
			.promptext {
				animation: blinkingText 0.8s infinite;
				color: #975f04;
				text-align: center;
				line-height: 2em;
				font: 1.5em bolder;
				margin: auto;
				margin-right: 3px;
			}
			.bar {
				fill: #00fc00;
				width: 7px;
				animation: equalize 4s 0s infinite;
			}
			.bar:nth-child(1) {animation-delay: -1.9s;}
			.bar:nth-child(2) {animation-delay: -2s;}
			.bar:nth-child(3) {animation-delay: -2.3s;}
			.bar:nth-child(4) {animation-delay: -2.4s;}
			.bar:nth-child(5) {animation-delay: -2.1s;}
			
			@keyframes equalize {
				0% {height: 20px;}
				4% {height: 16px;}
				8% {height: 13px;}
				12% {height: 10px;}
				16% {height: 20px;}
				20% {height: 10px;}
				24% {height: 13px;}
				28% {height: 3px;}
				32% {height: 13px;}
				36% {height: 20px;}
				40% {height: 7px;}
				44% {height: 13px;}
				48% {height: 23px;}
				52% {height: 10px;}
				56% {height: 3px;}
				60% {height: 10px;}
				64% {height: 17px;}
				68% {height: 20px;}
				72% {height: 23px;}
				76% {height: 27px;}
				80% {height: 23px;}
				84% {height: 20px;}
				88% {height: 17px;}
				92% {height: 20px;}
				96% {height: 23px;}
				100% {height: 27px;}
			}
		}
	}
	
	nav div.collapse li a.nav-link i.far {
		color: $theme-supplementer;
		font-size: 1.8em;
		padding: 0.2em;
	}
	
	#loading-img {
		background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
		height: 100%;
		z-index: 20;
	}
	
	.overlay {
		background: #e9e9e9;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.5;
	}
	
	.loader {
		border: 0px solid #f3f3f3;
		border-radius: 50%;
		border-top: 2px solid #3498db;
		border-right: 2px solid #3498db;
		width: 20px;
		height: 20px;
		-webkit-animation: spin 2s linear infinite;
		/* Safari */
		animation: spin 2s linear infinite;
	}
	
	.card:not(.widget) {
		background: linear-gradient(to right, white, lightblue)
	}
	
	.light-red {
		// background:linear-gradient(white, lightblue);
		background: linear-gradient(to right, white, #dfc99a)
	}
	
	// f3d98c
	.featureRequest {
		background-color: #007bff;
		color: white;
		font-size: 1.5em;
		padding: 10px 20px;
		border-radius: 30px;
	}
	
	#featureRequest {
		position: fixed;
		bottom: 2em;
		right: 2.5em;
	}
	
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
	
		100% {
			transform: rotate(360deg);
		}
	}
	
	@keyframes anim {
		0% {
			display: none;
			opacity: 0;
		}
	
		1% {
			display: block;
			opacity: 0;
			transform: scale(0);
		}
	
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	@keyframes blinkingText {
		0% {
			color: $theme-supplementer;
		}
	
		49% {
			color: transparent;
		}
	
		50% {
			color: transparent;
		}
	
		99% {
			color: transparent;
		}
	
		100% {
			color: $theme-supplementer;
		}
	}
	
	/* --------------------------------------------------
		OVERRIDES
		--------------------------------------------------*/
	.btn:not(.featureRequest) {
		background-color: $theme-supplementer;
		color: $themeColor-Dark
	}
	
	@media (min-width: 1024px) {
		&#header .navbar {
			width: 97%;
		}
		.prompt {
			width: 3%;
		}
	}
	
	.navbar-form {
		width: 88%;
	}
	
	.form-control {
		padding: .6rem 3em 0.6em 1em;
	}
	
	.container-fluid {
		padding-left: 0.3em;
	}
	
	.card-group {
		flex-direction: column;
	}
	
	.c-iFieldContainer {
		width: 50%;
		border: 1px solid #ced4da;
		border-radius: .25rem;
		background: white;
	}

	#command.form-control {
		width: 85%;
		margin-right: 15px;
		display: inline-block;
		border: unset;
		&:active, &:focus {
			box-shadow: none;
		}
	}
	
	#faux {
		visibility: hidden;
		margin-right: 0;
		border-right: 0;
		padding-right: 0;
	}
	
	.ml-auto {
		margin-left: 0 !important;
	}
	
	.btn-info {
		border-color: orange;
	}
	
	.btn-info:hover {
		border-color: orange;
		opacity: 1
	}
	
	.listening_indicator {
		background: black;
	}
	
}