Template:Dialogue/styles.css: Difference between revisions

Revision as of 17:20, 9 April 2026

.dialogue-container .dialogue-container {
	/* indent nested containers */
	margin-left: 2em;
}
.dialogue-container > * {
	/* Keep all dialogue content within the expected flow around infoboxes and other floated elements */
	display: block flow-root;
}
@media (max-width: 480px) {
    .dialogue-container .dialogue-container {
        margin-left: 5vw;
    }
}

/* Speaker/optional dialogue blocks */
.dialogue-box {
	background-color: var(--dialogue-block-bg);
	border-radius: 8px;
	padding: 0.5em;
	margin-block: 0.5em;
}
.dialogue-box-header {
    font-weight: bold;
}
.dialogue-box-header a:not(.new) {
	color: inherit;
}
.dialogue-box > .dialogue-container {
	/* don't indent direct children of the box */
	margin-left: 0;
}
.dialogue-box > .dialogue-container:only-child > :first-child {
    margin-top: 0;
}
.dialogue-box > .dialogue-container > :last-child {
	margin-bottom: 0;
}
/* Collapsible boxes via .mw-collapsible */
.dialogue-box-header.mw-collapsible-toggle,
.dialogue-line.mw-collapsible-toggle {
	position: relative;
	float: none;
	font: inherit;
	padding-left: 2.25em;
}
.dialogue-box-header.mw-collapsible-toggle {
	margin: -0.5em;
	padding: 0.25em 0.5em;
	padding-left: 2.25em;
}
.dialogue-box-header.mw-collapsible-toggle::before,
.dialogue-line.mw-collapsible-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1em;
	border: 0.375em solid transparent;
	border-left-color: transparent;
	border-inline-width: 0.75em;
	border-left-color: currentcolor;
	transform-origin: 25% 50%;
	transform: translateY(-50%) rotate(90deg);
	transition: transform 200ms;
}
.mw-collapsed .dialogue-box-header.mw-collapsible-toggle::before,
.mw-collapsed .dialogue-line.mw-collapsible-toggle::before {
	transform: translateY(-50%) rotate(0deg);
}

/* Customization for different types of boxes */
.dialogue-box--system {
    /* whatever */
}
.dialogue-box--optional {
	background-color: transparent;
	position: relative;
}
.dialogue-box--optional > .dialogue-box-header {
    font-weight: normal;
    font-style: italic;
}
.dialogue-box--optional::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 2px dashed var(--dialogue-optional-border);
	border-radius: inherit;
	z-index: -1;
}

/* Individual dialogue lines */
.dialogue-line {
	background-color: var(--dialogue-line-bg);
	border-radius: 8px;
	padding: 0.25em 1em;
	margin-block: 0.25rem;
}
.dialogue-line img {
	vertical-align: middle;
}

/* Customization for different types of lines */
.dialogue-line--system {
    /* whatever */
}
.dialogue-line--question {
	background-color: var(--dialogue-standalone-bg);
    font-style: italic;
}
.dialogue-line--cutscene {
	background-color: var(--dialogue-cutscene-bg);
    font-style: italic;
}
.dialogue-line--duty {
    background-color: var(--dialogue-duty-bg);
    font-style: italic;
}
.dialogue-line--choice {
	background-color: var(--dialogue-option-bg);
}
/* Special case - dialogue choices that *aren't* collapsible get extra styles */
.dialogue-line--choice:not(.mw-collapsible-toggle)::after {
	content: " (no unique dialogue)";
	font-style: italic;
	opacity: 0.5;
}

/* Quest accepted/complete */
.dialogue-quest-banner {
	text-align: center;
	margin: 1em 0;
}
.dialogue-quest-banner img {
	/* scale down instead of overflowing horizontally */
	max-width: 100%;
	height: auto !important; /* !important fixes things for mysterious reasons */
}

/* Hides text visually but presents it when copypasting out of the page */
.copypaste-only {
  position: absolute;
  text-indent: -10000px;
}

/* Hide section edit buttons within the template */
.dialogue-container .mw-editsection {
    display: none !important;
}

/* Italicize interpolated string placeholders */
/*.dialogue-container abbr {
    font-style: italic;
}*/

/* Make right-aligned screenshot images look better */
.dialogue-container figure.mw-halign-right {
    background: var(--background-color-base,#fff);
  padding: 0 0 0.5em 0.5em;
  border-bottom-left-radius: 1em;
}
.dialogue-container figure.mw-halign-right img {
  border-bottom-left-radius: 0.5em;
}