.firstHeading { margin: 0; color: @base-10; overflow-wrap: break-word; // Break word instead of overflow if title is too long } #siteSub { display: block; margin: 0.4rem 0 1.6rem; color: @base-30; } .firstHeading, #siteSub { .content-center; } #contentSub, #contentSub2 { color: @base-30; } #mw-content-text { /* * Interal link styles * Only apply to internal links in article */ a[ href^='/' ] { .link-content-text(@color-link-active); &.new { background-image: linear-gradient( to right, @color-link-new-active 0, @color-link-new-active 100% ); } } /* * Float styles * Only apply to immediate childs as float classes * are used in other places as well */ > .mw-parser-output { > div.tnone, > div.floatnone, > table.floatnone, > div.tleft, > div.floatleft, > table.floatleft, > div.tright, > div.floatright, > table.floatright { z-index: 2; position: relative; margin: 0.6rem 1.4rem; transition: @transition-margin; } > div.tnone, > div.floatnone { display: flex; justify-content: center; > * { width: 100% !important; height: auto; } .thumbinner { display: flex; flex-direction: column; align-items: center; } } > div.tnone, > div.floatnone, > table.floatnone, > div.tleft, > div.floatleft, > table.floatleft { margin-left: @negative-margin / 2; } > div.tnone, > div.floatnone, > table.floatnone, > div.tright, > div.floatright, > table.floatright { margin-right: @negative-margin / 2; } } .mw-parser-output { .mw-headline { order: -1; // Make sure that header is the first } & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 { display: flex; align-items: center; justify-content: space-between; } .mw-editsection { position: absolute; display: flex; margin: 0; left: 0; transform: ~'translateX(calc(-100% - @{margin-side}))'; a { .resource-loader-icon-link-small; padding: @margin-side / 4; opacity: @opacity-icon; transition: @transition-opacity; text-indent: -9999px; // Hide text background: 0 !important; // Cancel above styles &:before { .resource-loader-icon; background-size: contain; display: block; } &:hover, &:active, &:focus { opacity: @opacity-icon-active; } } > span { display: none; } } } } .mw-body-content { position: relative; .content-center; z-index: 0; p { overflow-wrap: break-word; } table { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; color: @color-content-header; } h1, h2 { margin-top: @content-margin-top * 3; } h3, h4, h5, h6, p + p { margin-top: @content-margin-top * 2; } h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6, p, table { margin-top: @content-margin-top; } ul { margin: @content-margin-top 0 0 @content-margin-top * 2; ul { margin: 0 0 0 @content-margin-top * 2; } } ol { margin: @content-margin-top 0 0 @content-margin-top * 3; ol { margin: 0 0 0 @content-margin-top * 3; } } img { vertical-align: middle; } a.image { display: block; overflow: hidden; width: fit-content; // Get rid of extra pixels from thumbinner } } @media ( max-width: @screen0 ) { #mw-content-text { > .mw-parser-output { > div.tnone, > div.floatnone, > table.floatnone, > div.tleft, > div.floatleft, > table.floatleft, > div.tright, > div.floatright, > table.floatright { margin: 0.6rem -@margin-side; width: 100vw; float: unset; clear: none; } > div.tnone, > div.floatnone, > div.tleft, > div.floatleft, > div.tright, > div.floatright { display: flex; justify-content: center; } > table.floatleft, > table.floatright { padding: 0 @margin-side; } } } } @media ( max-width: @screen2 ) { #mw-content-text { > .mw-parser-output { > div.tnone, > div.floatnone, > table.floatnone { margin: 0.6rem~'calc((100vw - @{page-width}) / -2)'; a.image, a.image > img { width: 100% !important; height: auto !important; } } > table.floatnone { padding: 0 @margin-side; } } } } @media ( max-width: @screen3 ) { #mw-content-text { > .mw-parser-output { > div.tleft, > div.floatleft, > table.floatleft { margin-left: 0; } > div.tright, > div.floatright, > table.floatright { margin-right: 0; } > div.tleft, > div.floatleft, > table.floatleft, > div.tright, > div.floatright, > table.floatright { z-index: 0; // Reset so it doesn't cover ToC position: relative; } } } } @media ( min-width: @screen4 ) { #mw-content-text { > .mw-parser-output { > div.tnone, > div.floatnone, > table.floatnone, > div.tleft, > div.floatleft, > table.floatleft { margin-left: @negative-margin !important; } > div.tnone, > div.floatnone, > table.floatnone, > div.tright, > div.floatright, > table.floatright { margin-right: @negative-margin !important; } } } } @media ( prefers-color-scheme: dark ) { .mw-body .firstHeading, .mw-body-content h1, .mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 { color: @dark-text-100; } .mw-body-content #contentSub, .mw-body-content #contentSub2, .mw-body #siteSub { color: @dark-text-80 !important; } }