mediawiki-skins-Citizen/resources/skins.citizen.styles/common/content.less
alistair3149 a30c85bb8d
Fix improper selector for float styles (#136)
* Fix improper selector for float styles

* Github CI lint - eslint/stylelint

Co-authored-by: github-actions <github-actions@users.noreply.github.com>
2020-06-11 19:13:58 -04:00

180 lines
3 KiB
Plaintext

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