TeaWeb/shared/css/static/control_bar.scss

@import "properties";
@import "mixin";

$border_color_activated: rgba(255, 255, 255, .75);

/* max height is 2em */
.control_bar {
	display: flex;
	flex-direction: row;

	@include user-select(none);

	height: 100%;
	align-items: center;

	/* tmp fix for ultra small devices */
	overflow-y: visible;

	.divider {
		border-left:2px solid #393838;
		height: calc(100% - 3px);
		margin: 3px;
	}

	/* border etc */
	.button, .dropdown-arrow {
		text-align: center;

		border: .05em solid rgba(0, 0, 0, 0);
		border-radius: $border_radius_small;

		background-color: #454545;

		&:hover {
			background-color: #393c43;
			border-color: #4a4c55;
			/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
		}

		&.activated {
			background-color: #2f3841;
			border-color: #005fa1;

			&:hover {
				background-color: #263340;
				border-color: #005fa1;
			}

			&.button-red {
				background-color: #412f2f;
				border-color: #a10000;

				&:hover {
					background-color: #402626;
					border-color: #a10000;
				}
			}
		}

		@include transition(background-color $button_hover_animation_time ease-in-out, border-color $button_hover_animation_time ease-in-out);

		> .icon_x24 {
			vertical-align: middle;
		}
	}

	.button {
		cursor: pointer;
		align-items: center;

		margin-right: 5px;
		margin-left: 5px;

		&:not(.icon_x24) {
			min-width: 2em;
			max-width: 2em;
			height: 2em;
		}

		.icon_em {
			vertical-align: text-top;
		}

		&.button-hostbutton {
			img {
				min-width: 1.5em;
				max-width: 1.5em;

				height: 1.5em;
				width: 1.5em;
			}

			overflow: hidden;
			padding: .25em;
		}
	}

	.button-dropdown {
		height: 100%;
		position: relative;

		.buttons {
			height: 2em;

			align-items: center;

            display: flex;
            flex-direction: row;

			.dropdown-arrow {
				height: 2em;

				display: inline-flex;
				justify-content: space-around;
				width: 1.5em;
				cursor: pointer;

				border-radius: 0 $border_radius_small $border_radius_small 0;
				align-items: center;
				border-left: 0;
			}

			.button {
				margin-right: 0;
			}

			&:hover {
				.button, .dropdown-arrow {
					background-color: #393c43;
					border-color: #4a4c55;
				}

				.button  {
					padding-right: 1px;
					border-right: 0;

					border-bottom-right-radius: 0;
					border-top-right-radius: 0;
				}
			}
		}


		.dropdown {
			display: none;
			position: absolute;
			margin-left: 5px;

			color: #c4c5c5;

			background-color: #2d3032;
			align-items: center;
			border: .05em solid #2c2525;
			border-radius: 0 $border_radius_middle $border_radius_middle $border_radius_middle;

			width: 230px;

			z-index: 1000;
			/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/

			&.right {
				right: 0;
			}

			.icon, .icon-container, .icon_em {
				vertical-align: middle;
				margin-right: 5px;
			}

			& > div {
				display: block;
				cursor: pointer;
				padding: 1px 2px 1px 4px;

				&:hover {
					background-color: #252729;
				}
			}

			& > div:first-of-type {
				border-radius: .1em .1em 0 0;
			}

			& > div:last-of-type {
				border-radius: 0 0 .1em .1em;
			}

			&.display_left {
				margin-left: -179px;
				border-radius: $border_radius_middle 0 $border_radius_middle $border_radius_middle;
			}
		}

		&:hover.displayed, &.force-show {
			.dropdown {
				display: block;
			}

			.button, .dropdown-arrow {
				background-color: #393c43;
				border-color: #4a4c55;

				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
			}

			.button {
				padding-right: 1px;
				border-right: 0;

				border-bottom-right-radius: 0;
				border-top-right-radius: 0;
			}
		}


		hr {
			margin-top: 5px;
			margin-bottom: 5px;
		}
	}

	.bookmark-dropdown {
		hr:last-child {
			display: none;
		}

		.hidden {
			display: none!important;
		}

		.disabled {

		}

		.bookmark, .directory {
			display: flex!important;
			flex-direction: row;

			align-items: center;
			justify-content: stretch;

			.name {
				flex-grow: 1;
				flex-shrink: 1;
			}

			.icon, .arrow {
				flex-grow: 0;
				flex-shrink: 0;
			}

			.arrow {
				margin-right: 5px;
			}
		}

		.directory {
			&:hover {
				> .sub-container, > .sub-container .sub-menu {
					display: block;
				}
			}

			&:not(:hover) {
				.sub-container {
					display: none;
				}
			}

			.sub-container {
				padding-right: 3px;
				position: relative;
			}

			.sub-menu {
				display: none;
				left: 100%;
				top: -13px;
				position: absolute;
				margin-left: 3px;
			}
		}
	}

	.icon_em {
		font-size: 1.5em;
	}
}