Kyoo/src/app/app.component.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
@import "variables";

#toolbar
{
	height: $nav-bar-height;
}

.navbar
{
	justify-content: left;
}

.nav-item
{
	outline: none;

	@include media-breakpoint-down(sm)
	{
		text-align: center;
	}

	> a
	{
		outline: none;
		color: inherit;
	}
}

.link
{
	outline: none;
	color: inherit;
	
	&:hover
	{
		text-decoration: none !important;
	}
}

.nav-link
{
	padding: 12px;
	color: rgba(255, 255, 255, 0.7) !important;

	&:host-context(.hoverEnabled) &:hover, &:focus
	{
		color: white !important;
	}

	&.active
	{
		color: var(--accentColor) !important;
	}
}

.navbar-brand
{
	&:hover
	{
		color: var(--accentColor);
	}

	@media (max-width: 350px)
	{
		display: none;
	}
}

.searchbar
{
	border-radius: 30px;
	display: flex !important;
	flex-flow: row-reverse nowrap;

	> input
	{
		background: none !important;
		color: white;
		outline: none;
		border: none;
		border-bottom: 1px solid #cfcfcf;
		width: 0;
		padding: 0;
		max-width: 20rem;
		transition: width 0.4s ease-in-out;

		&:focus, &.searching
		{
			width: 100%;

			@include media-breakpoint-up(md)
			{
				width: 20rem;
			}
		}
	}
}

input::-webkit-search-cancel-button
{
	display: none;
}

.icon
{
	padding: 8px;
	display: inline-block;
	opacity: 0.7;
	outline: none;

	&:host-context(.hoverEnabled) &:hover, &:focus
	{
		cursor: pointer;
		opacity: 1;
	}

}

.profilePicture
{
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 50%;
}

.dropButton
{
	outline: none;
}

main
{
	margin-top: $nav-bar-height;
	padding-top: 4px;
	max-height: calc(100vh - #{$nav-bar-height});
	display: block;
	overflow-y: auto;
	scrollbar-color: #999 transparent;
	position: relative;

	&::-webkit-scrollbar
	{
		width: 8px;
		background: transparent;
	}

	&::-webkit-scrollbar-thumb
	{
		background-color: #999;

		&:host-context(.hoverEnabled) &:hover
		{
			background-color: rgb(134, 127, 127);
		}
	}
}