MediaWiki:Common.less/transcripts.less

From Old School RuneScape Wiki
Jump to navigation Jump to search
// <pre>
/* ===========================
		  Transcripts
   =========================== */
:root {
    --transcript-background: #d8ccb4;
    --transcript-border-color: #b4a36a;
    --transcript-border-hover-color: #88701d;
}

.transcript {
	.border-radius( ~"0 0 120px 120px / 0 0 8px 8px" );
	.box-shadow( 0 5px 7px -7px rgba(0, 0, 0, 0.4) );
	width: 50%;
	background: var(--transcript-background);
	margin: 0 0 15px 15px;
	padding: 5px 20px 15px 20px;
	clear: left;

	// [[Template:Letter]]
	&.godletter {
		margin: 20px auto;
		padding: 20px 30px;
	}

}

.ns-120 .mw-parser-output,
.transcript {
	// no left-margin for the outermost list, because that already gets extra padding without an alignment marker.
	> ul {
		margin: 5px 0 0 0;
		
		// make margins for ul and ol consistent for indented lists
		ul, ol {
			margin: 5px 0 0 15px;
		}

		// need to exclude TOC
		&, ul, ol {
			list-style: none;
			// alignment markers for each of the lists
			border-left: 1px dashed var(--transcript-border-color);
			
			&:hover {
				border-color: var(--transcript-border-hover-color);
			}
	
			li {
				flex-direction: column;
				padding-left: 15px;
				margin: 14px 0;
	
				// Don't want double margin at the bottom (from li plus ul)
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
		
		// Add counters to chat options
		ol {
			counter-reset: dialogue;
			list-style-position: inside;
			
			> li {
				counter-increment: dialogue;
				
				&::marker {
					content: counter(dialogue) " – "; // &ndash; (en dash) looks best here
				}
			}
		}
	}
}

// quest actions for transcripts
.quest-action {
	text-align: center;
	font-style: italic;
	margin: 0 5%;

	&:before,
	&:after {
		content: '———';
		margin: 4px;
		letter-spacing: -1px;
	}
}