log.io-ng/src/less/log.io.less

Realtime log monitoring in the browser

/*
 * Log.io Web Client styles
 */

// Defaults

@controlWidth: 250px;
@headerSize: 16px;
@fontSize: 12px;

// Colors

@color1: #1f77b4;
@color2: #aec7e8;
@color3: #ff7f0e;
@color4: #ffbb78;
@color5: #2ca02c;
@color6: #98df8a;
@color7: #d62728;
@color8: #ff9896;
@color9: #9467bd;
@color10: #c5b0d5;
@color11: #8c564b;
@color12: #c49c94;
@color13: #e377c2;
@color14: #f7b6d2;
@color15: #7f7f7f;
@color16: #c7c7c7;
@color17: #bcbd22;
@color18: #dbdb8d;
@color19: #17becf;
@color20: #9edae5;

// General purpose

.floatl { float: left; }
.floatr { float: right; }
.scrollr {
	overflow: auto;

	&::-webkit-scrollbar {
	    width: 10px;
	    background-color: #333;
	}
	 
	&::-webkit-scrollbar-track {
	    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
	    border-radius: 8px;
	}
	 
	&::-webkit-scrollbar-thumb {
	    border-radius: 8px;
	    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	}
}

// Globals

* {
	padding: 0px;
	margin: 0px;
	font-family: 'Source Sans Pro', Verdana, Arial, sans-serif;
}

body {
	color: #eee;
	background-color: #000;
	overflow: hidden;
}

#web_client {
	position: relative;
}

// Control panel

#log_controls {
	vertical-align: top;
	background-color: #333;
	position: absolute;
	border-right: 1px solid #333;
	width: @controlWidth;

	a.select_mode {
		display: block;
		float: left;
		width: @controlWidth / 2;
		padding: 8px 0px;
		text-align: center;
		background-color: #000;
		text-decoration: none;
		color: #666;
		font-weight: 600;
		font-size: @headerSize;

		&.active {
			color: #eee;
			background-color: #333;
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
			background-image: -webkit-linear-gradient(top, #222, #333); 
			background-image: -moz-linear-gradient(top, #222, #333);
			background-image: -ms-linear-gradient(top, #222, #333);
			background-image: -o-linear-gradient(top, #222, #333);
		}
		&:hover {
			color: #eee;
		}
	}

	.object_controls {
		clear: left;
	}

	.groups {
		.scrollr;

		.group {
			.header {
				position: relative;
				padding: 6px 10px;
				font-size: @fontSize;
				background-color: #000;
				border-top: 1px solid #333;
				color: #eee;

				background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#000));
				background-image: -webkit-linear-gradient(top, #111, #000); 
				background-image: -moz-linear-gradient(top, #111, #000);
				background-image: -ms-linear-gradient(top, #111, #000);
				background-image: -o-linear-gradient(top, #111, #000);

				.object_name {
					width: @controlWidth - 55;
					overflow: hidden;
				}

			}

			.diode {
				width: 8px;
				height: 8px;
				margin: 4px 8px 0px 0px;
				background-color: #555;
				border-radius: 4px;

				&.ping {
					background-color: #0e0;
					&.active {
						background-color: #222;
					}
				}

				&.color1 { background-color: @color1; }
				&.color2 { background-color: @color2; }
				&.color3 { background-color: @color3; }
				&.color4 { background-color: @color4; }
				&.color5 { background-color: @color5; }
				&.color6 { background-color: @color6; }
				&.color7 { background-color: @color7; }
				&.color8 { background-color: @color8; }
				&.color9 { background-color: @color9; }
				&.color10 { background-color: @color10; }
				&.color11 { background-color: @color11; }
				&.color12 { background-color: @color12; }
				&.color13 { background-color: @color13; }
				&.color14 { background-color: @color14; }
				&.color15 { background-color: @color15; }
				&.color16 { background-color: @color16; }
				&.color17 { background-color: @color17; }
				&.color18 { background-color: @color18; }
				&.color19 { background-color: @color19; }
				&.color20 { background-color: @color20; }
			}

			.screen_buttons {
				position: absolute;
				top: 6px;
				right: 5px;
				input {
					margin-left: 3px;
				}
			}

			.item {
				color: #aaa;
				font-size: @fontSize;
				border-top: 1px solid #111;
				background-color: #222;
				padding: 6px 10px;
				position: relative;

				.item_name {
					width: @controlWidth - 55;
					overflow: hidden;
				}
			}
		}
	}

	input.filter {
		border: none;
		padding: 6px;
		width: @controlWidth - 12 - 16;
		font-size: 12px;
		margin: 8px;
		border: 1px solid #000;
		background-color: #111;
		color: #ccc;
	}
}

// Log Screen panel

#log_screens {
	vertical-align: top;
	float: left;
	margin-left: @controlWidth;
	background-color: #000;

	div.log_screen {
		margin: 10px;
		position: relative;

		&:hover div.controls {
			display: block;
		}

		div.controls {
			position: absolute;
			top: 0px;
			right: 10px;
			padding: 5px;
			float: left;
			font-size: 12px;
			display: none;

			a {
				float: right;
				padding: 4px 6px;
				text-decoration: none;
				margin-left: 5px;
				font-size: 12px;
				background-color: #333;
				border-radius: 2px;
				border: 1px solid #444;
				border-bottom: 1px solid #222;
				border-right: 1px solid #222;
				color: #eee;
			}

			a.filter {
				padding: 3px 4px 3px 6px;

				input {
					font-size: 12px;
					border: none;
					background-color: #111;
					color: #ccc;
					padding: 1px;
					width: 100px;
					margin-left: 5px;
				}
			}
		}

		div.messages {
			
			background-color: #111;
			border: 1px solid #333;
			word-wrap: break-word;
			.scrollr;

			.msg {
				margin: 10px;
				color: #0c0;

				p, p * {
					font-size: 12px;
					line-height: 16px;
					font-weight: 400;
					font-family: 'Inconsolata', Courier, sans-serif;
				}

				.color1 { color: @color1; }
				.color2 { color: @color2; }
				.color3 { color: @color3; }
				.color4 { color: @color4; }
				.color5 { color: @color5; }
				.color6 { color: @color6; }
				.color7 { color: @color7; }
				.color8 { color: @color8; }
				.color9 { color: @color9; }
				.color10 { color: @color10; }
				.color11 { color: @color11; }
				.color12 { color: @color12; }
				.color13 { color: @color13; }
				.color14 { color: @color14; }
				.color15 { color: @color15; }
				.color16 { color: @color16; }
				.color17 { color: @color17; }
				.color18 { color: @color18; }
				.color19 { color: @color19; }
				.color20 { color: @color20; }
			}

			&:hover .controls {
				display: block;
			}
			span.highlight {
				background-color: #0e0;
				color: #000;
			}
		}
	}

	.status_bar {

		.button {
			background-color: #333;
			border: 1px solid #444;
			border-bottom: 1px solid #222;
			border-right: 1px solid #222;
			border-radius: 2px;
			text-decoration: none;
			font-size: 14px;
			font-weight: 600;
			color: #ccc;
			padding: 5px 10px;
			margin: 0px 10px 10px;
			display: block;
			float: left;
		}

		.stats {
			float: right;
			.stat {
				float: right;
				margin: 0px 30px 0px 0px;
				line-height: 30px;
				.num {
					font-size: 32px;
					color: #eee;
				}
				.label {
					font-size: 12px;
					color: #666;
				}
			}
		}
	}
}