minio/browser/app/less/inc/sidebar.less

/*--------------------------
    Sidebar
----------------------------*/
.fe-sidebar {
	width: @fe-sidebar-width;
	background-color: @fe-sidebar-bg;
	position: fixed;
	height: 100%;
	overflow: hidden;
	padding: 25px;

	@media(min-width: @screen-md-min) {
		.translate3d(0, 0, 0);
	}

	@media(max-width: @screen-sm-max) {
		padding-top: 85px;
		z-index: 9;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
		.transition(all);
		.transition-duration(300ms);
		.translate3d((-@fe-sidebar-width - 15px), 0, 0);

		&.toggled {
			.translate3d(0, 0, 0);
		}
	}

	a {
		color: rgba(255, 255, 255, 0.75);

		&:hover {
			color: @white;
		}
	}
}

/*--------------------------
    Header
----------------------------*/
.fes-header {
	margin-bottom: 40px;

	img,
	h2 {
		float: left;
	}

	h2 {
		margin: 6px 0 0 13px;
		font-weight: normal;
		color: @white;
		font-size: 20px;
	}

	img {
		width: 20px;
	}
}

/*--------------------------
    List
----------------------------*/
.fesl-inner {
	height: ~"calc(100vh - 260px)";
	overflow: auto;
	padding: 0;
	margin: 0 -25px;

	& li {
		position: relative;

		& > a {
			display: block;
			padding: 10px 45px 12px 55px;
			word-wrap: break-word;

			&:before {
				font-family: 'Font Awesome 5 Free';
				content: '\f0a0';
				font-size: 17px;
				position: absolute;
				top: 10px;
				left: 25px;
				.opacity(0.8);
			}

			&.fesli-loading {
				&:before {
					.list-loader(20px, 20px, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
					left: 32px;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}
		}

		&.active {
			background-color: rgba(0,0,0,0.1);

			& > a {
				color: @white;
			}
		}

		&:not(.active):hover {
			background-color: rgba(0, 0, 0, 0.05);

			& > a {
				color: @white;
			}
		}

		&:hover {
			.bucket-dropdown .dropdown-toggle {
				.opacity(0.6);

				&:hover {
					.opacity(1);
				}
			}
		}
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	&:hover .scrollbar-vertical {
		opacity: 1;
	}
}

/* Dropdown */
.bucket-dropdown {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 35px;
	height: 100%;
	cursor: pointer;
	color: @white;

	.dropdown-toggle {
		.opacity(0);
		.transition(all);
		.transition-duration(200ms);
		font-size: 20px;
		background-color: transparent;
	}

	.dropdown-menu-right {
		padding: 15px 0;
		margin-top: -1px;
		& li {
			a:before {
				content: none;
				-webkit-box-shadow: @dropdown-shadow;
				box-shadow: @dropdown-shadow;	
			}
			&:not(.active):hover {
				& > a {
					color: @dropdown-link-hover-color;
				}
			}
		}
	}
}

/* Scrollbar */
.scrollbar-vertical {
	position: absolute;
	right: 5px;
	width: 4px;
	height: 100%;
	opacity: 0;
	.transition(opacity);
	.transition-duration(300ms);

	div {
		border-radius: 1px !important;
		background-color: #6a6a6a !important;
	}
}

/*--------------------------
    Host
----------------------------*/
.fes-host {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1;
	background-color: rgba(0,0,0,0.1);
	font-size: 15px;
	font-weight: 400;
	width: @fe-sidebar-width;
	padding: 20px;
	.text-overflow();

	& > i {
		margin-right: 10px;
	}
}