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: calc(3.5rem - 1px);
	width: 100%;
	
	margin-right: 0.5rem;
	margin-bottom: 0.125rem; /* To make sure it takes up enough space to force things over onto a new line*/
	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.bstrd .message-content {
    font-family: 'Newspaper Cutout White Regular', cursive;
    font-size: 3em;
    margin: 0.5rem;
    padding: 0.3em;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.79) 0%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 75%, rgba(0,0,0,0.9) 100%), url(https://static.miraheze.org/corruwiki/a/ae/Stun.gif);
}

.log-message-box.bstrd .message-image::before {
    width: 100%;
    right: 0;
    border-radius: 0;
    transform: translateX(100%);
}

.log-message-box.bstrd {
    color: #ff0066;
}  

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