Template:Dialogue/styles.css

/* Core */
.dialogue {
	display: grid;
	grid-gap: 0 15px;
	align-content: center;
}

.dialogue-icon {
	grid-area: icon;
	padding-top: 5px;
	justify-self: right;
}

.dialogue-name {
	grid-area: name;
	align-self: center;
}

.dialogue-text {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	grid-area: text;
	padding: 0.5em 2em;
	background: var(--color-surface-2);
	border-color: var(--color-surface-3);
	border-width: 1px;
	border-style: solid;
}

.dialogue-text:hover {
	background: var(--color-surface-2--hover);
}

.dialogue-text.marked {
	background: var(--color-surface-2--active);
}

.dt-en,
.dt-jp {
	flex: 1 1 200px;
}

/* Cozy */
.dialogue.cozy {
	grid-template-columns: 50px 1fr;
	grid-template-rows: 2em 1fr;
	grid-template-areas: "icon name"
	"icon text";
	width: 800px;
	max-width: 100%;
	margin: 1.5em auto;
}

.dialogue.cozy .dialogue-text {
	border-radius: var(--border-radius--medium);
}

/* Compact */
.dialogue.compact {
	grid-template-columns: 150px 1fr;
	grid-template-areas: "icon text"
	"name text";
	margin: -1px 0;
}

.dialogue.compact .dialogue-icon {
	justify-self: center;
}

.dialogue.compact .dialogue-name {
	justify-self: center;
}