Template:LogBox/Main.css

/* CSS borrowed from corru.observer itself */

.log-message-box {
	overflow: hidden;
	
	padding: 0.75rem 0.5rem;
	margin: 0.5rem;
	border: 1px solid;
	border-color: inherit;
	
	color: #ffff00; /* Default to sys/examing messages */
	background: black;
	
	line-height: 1.25em;
	
	font-size: 0.75rem;
}

.log-message-box.sourceless,
.log-message-box.interloper {
	color: black;
	background: white;
}

.log-message-box.interloper {
	display: flex;
	justify-content: start;
	align-items: center;
}

.log-message-box.friend {
	color: #00ffff;
}

.log-message-box.obesk {
	color: #ff00ff;
}

.log-message-box.template-error {
	color: #ff6666;
}

.log-message-box > .name {
	margin: 0 -0.5rem 0.3rem;
	padding: 0 0.5rem 0.15em;
	border-bottom: 1px solid;
	
	font-size: 2.5em;
	line-height: 1em;
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: normal;
}

.log-message-box > .image ~ .name,
.log-message-box > .message-image ~ .name {
	margin-left: 0;
	padding: 0 0 0.15em 0;
}

.log-message-box > .image,
.log-message-box > .message-image {
	float: left;
	color: inherit; /* Don't let the pesky <a> links affect the border color! */
}

.log-message-box > .image img,
.log-message-box > .message-image img {
	background: black; /* hide the name's line border by pretending it stops at the image*/
	box-sizing: border-box;
	
	max-width: 3.5rem;
	max-height: 3.5rem;
	width: 100%;
	
	margin-right: 0.5rem;
	border: 1px solid;
	border-color: inherit;
	
	image-rendering: pixelated;
	object-fit: cover;
}

.log-message-box.obesk > .image img,
.log-message-box.obesk > .message-image img {
	border-radius: 100%;
}

.log-message-box .image:hover .message-image {
	/* Stop the default hover from expanding the image */
	transform: unset !important;
}

.log-message-box.friend > .image .message-image,
.log-message-box.friend > .message-image img {
	background: white;
}

.log-message-box.system > .image .message-image,
.log-message-box.system > .message-image img {
	/* TODO: use the animated bg */
	background: white;
	height: 2.3rem;
}

.log-message-box.system .message-content {
	/* Or delegate the font stuff over to the template? */
	font-family: 'Libre Barcode 128 Text', cursive;
	word-break: break-all;
	font-size: 2.5em;
	line-height: 1.25em;
}

.log-message-box.sourceless .message-content {
	text-align: center;
	text-transform: uppercase;
}

.log-message-box.interloper .message-content {
	font-family: 'Libre Barcode 128 Text', cursive;
	font-size: 1.75rem;
	line-height: 1.2em;
	text-transform: uppercase;
}

.log-message-box .color-obesk {
	color: #ff00ff;
}

.log-message-box .color-friend {
	color: #00ffff;
}

.log-message-box .color-bastard {
	color: #ff0066
}

.log-message-box .color-white {
	color: white;
}

.log-message-box .message-content span[title]  {
	display: inline-block;
	border-bottom: 1px dashed white;
	padding-bottom: 2px;
	margin-bottom: -2px;
	cursor: alias;
}