META-INF.resources.css._sidebar-command-log.scss Maven / Gradle / Ivy

Go to download
/* ---------- Command log ---------- */

.command-log {
	font-family: $general-font;
	font-size: 11px;
	font-weight: 500;
	height: 100%;
	letter-spacing: 0.06em;
	margin: 0;
	overflow-y: scroll;
	padding: 0;
	transition: height 0.5s ease-in-out;

	&.running {
		height: calc(100% - 80px);
	}

	.status div {
		display: inline;
	}

	&.collapse {
		display: block;
		height: 0;
	}

	&.toggle {
		height: 100%;
	}

	.line-container {
		margin-left: 32px;
		padding: 0 0 8px;
	}

	.run-line {
		padding: 10px 0;
	}

	.linkable {
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.divider-line {
		background-color: $command-log-divider-bg-color;
		border-bottom: 1px solid $command-log-divider-border-color;
		border-top: 1px solid $command-log-divider-border-color;
		color: $command-log-divider-text-color;
		font-family: $monospaced-font;
		font-size: 15px;
		font-weight: 200;
		height: auto;
		letter-spacing: 0.08em;
		padding: 14px 22px 18px;
		position: relative;
		z-index: 100;
	}

	.line-group {
		-webkit-filter: blur(0);
		-webkit-font-smoothing: subpixel-antialiased;
		border-bottom: 1px solid transparent;
		border-top: 1px solid transparent;
		padding: 12px 4px 16px 8px;
		position: relative;
		width: 100%;

		&.linkable:hover {
			background-color: $command-log-hover-bg;
		}
	}

	.current-scope {
		background-color: $command-log-current-scope-bg;
		border-color: $command-log-current-scope-border;
		position: relative;
		z-index: 10;
	}

	.child-container {
		border: 1px solid $command-child-container-border-color;
		border-right-width: 0;
		border-top-width: 0;
		color: $command-child-container-text-color;
		margin: 0 0 0 32px;
		margin-right: 14px;
		overflow: hidden;
		padding-left: 20px;

		.run-line:last-child {
			padding-bottom: 11px;
		}
	}

	.expand-toggle {
		background: transparent;
		background-clip: content-box;
		border-radius: 25px;
		color: $command-log-expand-toggle-color;
		cursor: pointer;
		height: 21px;
		line-height: 10px;
		margin: 6px 0 0 0;
		opacity: 0.6;
		padding: 5px;
		position: absolute;
		text-align: center;
		transition: opacity 0.2s ease 0.1s, transform 0.2s ease;
		width: 21px;

		&:hover {
			opacity: 1;
		}

		&:active {
			box-shadow: none;
		}

		&:before {
			content: '\f105';
			font-family: 'FontAwesome';
			font-size: 14px;
			height: 10px;
			width: 10px;
		}

		&.toggle {
			transform: rotate(90deg);
		}
	}

	.failed {
		background-color: transparentize($failed-color, 0.86);

		&.line-group.linkable:hover {
			background-color: transparentize($failed-color, 0.90);
		}
	}

	.warning {
		background-color: transparentize($warning-color, 0.86);

		&.line-group.linkable:hover {
			background-color: transparentize($warning-color, 0.90);
		}
	}

	.title-line {
		display: none;
	}
}