gate-dashboard-program/static/assets/less/xenon-less/settings-pane.less

@media screen and (max-width: @screen-sm){
	
	body.chat-open .settings-pane {
		left: -@chat-converation-width;
	}
}

.settings-pane {
	background: @main-active-color;
	color: @main-text-active-color;
	display: none;
	position: relative;
	overflow: hidden;
	.perspective(500px);
	.transform-origin(center bottom);
	
	@media screen and (max-width: @screen-sm){
		padding: @default-padding;
	}
	
	// Animation Part
	.settings-pane-inner {
		position: relative;
		padding: 50px;
		
		@media screen and (max-width: @screen-sm){
			padding: 0;
		}
		
		&.with-animation {
			//.transform(~"translate3d(0px,100px,-200px)");
			.opacity(0);
			
			.transition(~"all 350ms cubic-bezier(0.785, 0.135, 0.150, 0.860)");
		
			&.visible {
				//.transform(~"translate3d(0px,0px,0px)");
				.opacity(1);
				.transition-delay(200ms);
			}
			
			&.closing {
				.opacity(0);
				.transition-delay(0ms);
			}
		}
	}
	
	> a[data-toggle="settings-pane"] {
		display: block;
		color: @main-text-color;
		position: absolute;
		right: 0;
		top: 0;
		padding: 10px 12px;
		font-size: 18px;
		line-height: 1;
		z-index: 100;
		
		&:hover {
			color: #FFF;
		}
	}
	
	
	.user-info {
		display: table;
		width: 100%;
		border-spacing: 0;
		border-collapse: collapse;
		
		@media screen and (min-width: @screen-sm) and (max-width: @screen-md){
			width: auto;
			margin: 0 auto;
			margin-bottom: @base-margin;
		}
		
		@media screen and (max-width: @screen-sm){
			width: auto;
			margin: 0 auto;
			margin-bottom: @base-margin;
		}
		
		.user-image,
		.user-details {
			display: table-cell;
			vertical-align: middle;
		}
		
		.user-image {
			width: 130px;
			
			a {
				display: block;
				position: relative;
				
				img {
				}
			}
		}
		
		.user-details {
			padding-left: @base-margin;
			
			h3 {
				margin: 0;

				a {
					color: @main-text-active-color;
				}
				
				.user-status {
					position: relative;
					display: inline-block;
					background: #FFF;
					top: -3px;
					margin-left: @base-padding/2;
					.size(8px);
					.border-radius(50%);
					
					&.is-online { background-color: @brand-success; }
					&.is-idle { background-color: @brand-warning; }
					&.is-busy { background-color: @xe-red; }
					&.is-offline { background-color: #CCC; }
				}
			}
			
			.user-title {
				color: fade(@main-text-active-color, 65%);
				margin: 0;
				margin-top: @base-padding/2;
			}
			
			.user-links {
				margin-top: @default-padding/2;
				
				a {
					display: inline-block;
					
					+ a {
						margin-left: @base-padding - 2;
					}
				}
			}
		}
	}
	
	.links-block {
		display: inline-block;
		padding-right: 85px;
		text-align: left;
		
		@media screen and (max-width: @screen-sm-max){
			padding-right: 40px;
			margin-top: @base-padding;
		}
		
		&.left-sep {
			border-left: 1px solid @main-border-color;
			padding-left: 75px;
			
			@media screen and (max-width: @screen-sm-max){
				padding-left: 40px;
				
				&:first-child {
					border-left: 0;
				}
			}
			
			@media screen and (max-width: 599px){
				padding: 0 25px;
			}
		}
		
		h4 {
			color: @main-text-active-color;
			margin: 0;
			margin-bottom: @base-padding + 5;
			
			span {
				display: inline-block;
				border-bottom: 1px solid @main-border-color;
				padding-bottom: @base-padding/2;
			}
			
			a {
				color: @main-text-active-color;
				
				&:hover {
					color: @main-text-color;
				}
			}
		}
		
		
		ul {
			
			li {
				
				label {
					display: inline-block;
					padding-left: @base-padding/2;
					.user-select(none);
				}
				
				a {
					color: @main-text-color;
					display: block;
					
					&:hover {
						color: @main-text-active-color;
					}
				}
				
				+ li a {
					margin-top: @base-padding/2;
				}
			}
		}
	}
	
	.link-blocks-env {
		text-align: center;
	}
}

// When settings pane is open
.settings-pane-open {
	
	.settings-pane {
		display: block;
	}
	
	.sidebar-menu {
		
		.sidebar-menu-inner {
			position: relative !important;
			
			.logo-env {
				
				.settings-icon {
					background: @main-active-color;
					.box-shadow(~"0px 0px 0px 10px @{main-active-color}, 0px -10px 0px 10px @{main-active-color}, 0px -20px 0px 10px @{main-active-color}, 0px -30px 0px 10px @{main-active-color}");
				}
			}
		}
	}
}