#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; } } } @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; } } } }