p5.js-web-editor/client/styles/components/_console.scss

.preview-console {
	@include themify() {
		background: getThemifyVariable('console-background-color');
		border-color: getThemifyVariable('ide-border-color');
	}
	border-left: 1px solid;
	border-right: 1px solid;
	width: 100%;
	height: 100%;
	z-index: 1000;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	& > {
		position:relative;
		text-align:left;
	}

	.preview-console__message {
		@include themify() {
			color: getThemifyVariable('console-color');
		}
		flex: 1 0 auto;
		position: relative;
	}
}

.preview-console__header {
	@include themify() {
		background-color: getThemifyVariable('console-header-background-color');
		color: getThemifyVariable('console-header-color');
	}
	min-height: #{30 / $base-font-size}rem;
	padding: #{5 / $base-font-size}rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.preview-console__header-title {
	font-size: #{12 / $base-font-size}rem;
	font-weight: normal;
}

.preview-console__icon {
	padding-right: #{20 / $base-font-size}rem;
}

.preview-console__messages {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.preview-console__collapse {
	padding-top: #{3 / $base-font-size}rem;
	@include icon();
	@include themify() {
		& g,
		& polygon,
		& path {
			fill: getThemifyVariable('secondary-text-color');
		}
	}
	.preview-console--collapsed & {
		display: none;
	}
}

.preview-console__expand {
	padding-top: #{3 / $base-font-size}rem;
	@include icon();
	@include themify() {
		& g,
		& polygon,
		& path {
			fill: getThemifyVariable('secondary-text-color');
		}
	}
	display: none;
	.preview-console--collapsed & {
		display: inline-block;
	}
}

.preview-console__header-buttons {
	display: flex;
	align-items: center;
}

.preview-console__clear {
	@include themify() {
		@extend %link;
		color: getThemifyVariable('secondary-text-color');
		&:hover {
			color: getThemifyVariable('heavy-text-color');
		}
	}
	background: transparent;
	border: none;
	padding-right: #{10 / $base-font-size}rem;
	.preview-console--collapsed & {
		display: none;
	}
}

.preview-console__logged-times {

	font-weight: bold;
	margin: #{2 / $base-font-size}rem 0 0 #{8 / $base-font-size}rem;
	padding: #{1 / $base-font-size}rem #{4 / $base-font-size}rem;
	z-index: 100;
	left: 0;
	position: absolute;

	.preview-console__message--info &, .preview-console__message--log & {
		@include themify() {
			background-color: getThemifyVariable('console-info-background-color');
		}
	}
	.preview-console__message--warn & {
		@include themify() {
			background-color: getThemifyVariable('console-warn-background-color');
		}
	}
	.preview-console__message--debug & {
		@include themify() {
			background-color: getThemifyVariable('console-debug-background-color');
		}
	}
	.preview-console__message--error & {
		@include themify() {
			background-color: getThemifyVariable('console-error-background-color');
		}
	}
}