diff --git a/resources/content.media-common.less b/resources/content.media-common.less new file mode 100644 index 0000000..d5a6b37 --- /dev/null +++ b/resources/content.media-common.less @@ -0,0 +1,277 @@ +@import 'variables-content.less'; + +/** + * Block media items + */ + +figure[ typeof~='mw:File' ], +figure[ typeof~='mw:File/Frameless' ], +/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no + * longer supported + */ +figure[ typeof~='mw:Image' ], +figure[ typeof~='mw:Video' ], +figure[ typeof~='mw:Audio' ], +figure[ typeof~='mw:Image/Frameless' ], +figure[ typeof~='mw:Video/Frameless' ], +figure[ typeof~='mw:Audio/Frameless' ] { + margin: 0; // Maybe belongs in element.css for figure + + > a { + // The addition of the class is needed for higher specificity + // than Vector's print styles + .mw-body-content & { + border: 0; + } + } + + &.mw-halign-right { + /* @noflip */ + margin: @margin-floatright; + /* @noflip */ + clear: right; + /* @noflip */ + float: right; + } + + &.mw-halign-left { + /* @noflip */ + margin: @margin-floatleft; + /* @noflip */ + clear: left; + /* @noflip */ + float: left; + } + + &.mw-halign-none { + clear: none; + float: none; + } + + &.mw-halign-center { + /* Matches *.center * in element.css */ + margin: 0 auto; + display: table; + border-collapse: collapse; + clear: none; + float: none; + } + + /* Hide the caption for frameless and plain floated images */ + > figcaption { + display: none; + } +} + +figure[ typeof~='mw:File/Thumb' ], +figure[ typeof~='mw:File/Frame' ], +/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no + * longer supported + */ +figure[ typeof~='mw:Image/Thumb' ], +figure[ typeof~='mw:Video/Thumb' ], +figure[ typeof~='mw:Audio/Thumb' ], +figure[ typeof~='mw:Image/Frame' ], +figure[ typeof~='mw:Video/Frame' ], +figure[ typeof~='mw:Audio/Frame' ] { + margin: 0; // Maybe belongs in element.css for figure + margin-bottom: @margin-bottom-thumb; + display: table; + text-align: center; + border-collapse: collapse; + + > a { + // The addition of the class is needed for higher specificity + // than Vector's print styles + .mw-body-content & { + border: 0; + } + } + + // Defaults for page content language + + .mw-content-ltr & { + /* @noflip */ + margin: @margin-tright; + /* @noflip */ + clear: right; + /* @noflip */ + float: right; + } + + .mw-content-rtl & { + /* @noflip */ + margin: @margin-tleft; + /* @noflip */ + clear: left; + /* @noflip */ + float: left; + } + + // Override defaults when explicitly set + // Order of application is important, so don't combine with the defaults + + &.mw-halign-right { + /* @noflip */ + margin: @margin-tright; + /* @noflip */ + clear: right; + /* @noflip */ + float: right; + } + + &.mw-halign-left { + /* @noflip */ + margin: @margin-tleft; + /* @noflip */ + clear: left; + /* @noflip */ + float: left; + } + + &.mw-halign-none { + /* Override the default margin from mw-content-xxx above */ + margin: 0; + margin-bottom: @margin-bottom-thumb; + clear: none; + float: none; + } + + &.mw-halign-center { + /* Override the default margin from mw-content-xxx above + * And, matches *.center * in element.css + */ + margin: 0 auto @margin-bottom-thumb auto; + clear: none; + float: none; + } + + > *:first-child { + > audio, + > img, + > video { + margin: 0.75em; + margin-bottom: 0.5em; + } + /** + * Broken media get a span instead. + * + * FIXME: The `> span:first-child` can be removed when version 2.4.0 + * of the content is no longer supported + */ + > span:first-child, + > span.mw-broken-media { + display: inline-block; + margin: 0.75em; + margin-bottom: 0.5em; + /* This is hardcoded in Linker::makeThumbLink2 for broken media */ + width: 180px; + } + } + + > figcaption { + display: table-caption; + caption-side: bottom; + line-height: @line-height-thumbcaption; + min-height: 1em; + + /** + * The "break-word" value is deprecated, however, it's well supported + * at 94.73% + * https://caniuse.com/mdn-css_properties_word-break_break-word + * + * The spec suggests it has the same effect as, + * + * word-break: normal; + * overflow-wrap: anywhere; + * + * https://drafts.csswg.org/css-text-3/#word-break-property + * + * So, we should use that. However, support for "anywhere" is lagging + * at just 72.39%, with Safari being a notable miss. + * https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere + * + * "Soft wrap opportunities introduced by the word break are considered + * when calculating min-content intrinsic sizes." + * From https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap + */ + word-break: break-word; + + .mw-content-ltr & { + /* @noflip */ + text-align: left; + } + + .mw-content-rtl & { + /* @noflip */ + text-align: right; + } + + /* taken from .thumbcaption, plus .thumbinner */ + padding: 0 0.75em 0.75em 0.75em; + } +} + +/** + * Inline media items + */ +*:first-child { + > audio, + > img, + > video { + .mw-valign-middle > & { + vertical-align: middle; + } + + .mw-valign-baseline > & { + vertical-align: baseline; + } + + .mw-valign-sub > & { + vertical-align: sub; + } + + .mw-valign-super > & { + vertical-align: super; + } + + .mw-valign-top > & { + vertical-align: top; + } + + .mw-valign-text-top > & { + vertical-align: text-top; + } + + .mw-valign-bottom > & { + vertical-align: bottom; + } + + .mw-valign-text-bottom > & { + vertical-align: text-bottom; + } + } +} + +/* stylelint-disable selector-class-pattern */ + +/** + * Avoid the need to calculate paddings individually + * https://stackoverflow.com/a/7310398 + * + * FIXME: This would be better in mediawiki.page.gallery.styles, + * but let's wait until wgParserEnableLegacyMediaDOM is removed + */ +.mw-gallery-traditional .gallerybox > .thumb { + &:before { + content: ''; + vertical-align: middle; + display: inline-block; + height: 100%; + } + + > * { + vertical-align: middle; + display: inline-block; + } +} diff --git a/resources/content.media-print.less b/resources/content.media-print.less new file mode 100644 index 0000000..db10d55 --- /dev/null +++ b/resources/content.media-print.less @@ -0,0 +1,41 @@ +@import 'variables-content.less'; + +figure[ typeof~='mw:File/Thumb' ], +figure[ typeof~='mw:File/Frame' ], +/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no + * longer supported + */ +figure[ typeof~='mw:Image/Thumb' ], +figure[ typeof~='mw:Video/Thumb' ], +figure[ typeof~='mw:Audio/Thumb' ], +figure[ typeof~='mw:Image/Frame' ], +figure[ typeof~='mw:Video/Frame' ], +figure[ typeof~='mw:Audio/Frame' ] { + border: @border-thumbinner-print; + border-bottom: 0; // No border to figcaption + background-color: @background-color-thumbinner-print; + + > *:first-child { + > audio, + > img, + > video { + border: @border-thumbimage-print; + } + } + + > figcaption { + border: @border-thumbinner-print; + border-top: 0; + background-color: @background-color-thumbinner-print; + font-size: @font-size-thumbinner-print; + color: @color-thumbinner-print; + } +} + +.mw-image-border > *:first-child { + > audio, + > img, + > video { + border: @border-thumbborder-print; + } +} diff --git a/resources/content.media-screen.less b/resources/content.media-screen.less new file mode 100644 index 0000000..ee0d0cb --- /dev/null +++ b/resources/content.media-screen.less @@ -0,0 +1,100 @@ +@import 'variables-content.less'; + +figure[ typeof~='mw:File/Thumb' ], +figure[ typeof~='mw:File/Frame' ], +/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no + * longer supported + */ +figure[ typeof~='mw:Image/Thumb' ], +figure[ typeof~='mw:Video/Thumb' ], +figure[ typeof~='mw:Audio/Thumb' ], +figure[ typeof~='mw:Image/Frame' ], +figure[ typeof~='mw:Video/Frame' ], +figure[ typeof~='mw:Audio/Frame' ] { + border: @border-thumbinner-screen; + border-bottom: 0; // No border to figcaption + border-width: 1px 1px 0.2em; // From .box + box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 ); // From .box + background-color: @background-color-thumbinner-screen; + + > *:first-child { + > audio, + > img, + > video { + border: @border-thumbimage-screen; + } + } + + > figcaption { + border: @border-thumbinner-screen; + border-top: 0; + border-width: 1px 1px 0.2em; // From .box + box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 ); // From .box + background-color: @background-color-thumbinner-screen; + font-size: @font-size-thumbcaption-screen; + } +} + +.mw-image-border > *:first-child { + > audio, + > img, + > video { + border: @border-thumbborder-screen; + } +} + +/* Magnify clip, not present for broken media */ +figure[ typeof~='mw:File/Thumb' ]:not( [ typeof~='mw:Error' ] ), +/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no + * longer supported + */ +figure[ typeof~='mw:Image/Thumb' ]:not( [ typeof~='mw:Error' ] ), +figure[ typeof~='mw:Video/Thumb' ]:not( [ typeof~='mw:Error' ] ), +figure[ typeof~='mw:Audio/Thumb' ]:not( [ typeof~='mw:Error' ] ) { + > figcaption:before { + content: ''; + width: 20px; + height: 20px; + + .mw-content-ltr & { + /* @noflip */ + margin-left: 0.5em; + /* @noflip */ + float: right; + } + + .mw-content-rtl & { + /* @noflip */ + margin-right: 0.5em; + /* @noflip */ + float: left; + } + } + + > a { + display: inline-block; + position: relative; + } + + > a:after { + content: ''; + width: 20px; + height: 20px; + position: absolute; + bottom: -20px; + + .mw-content-ltr & { + /* @noflip */ + right: 0.75em; + /* @noflip */ + background-image: @background-image-magnify-ltr; + } + + .mw-content-rtl & { + /* @noflip */ + left: 0.75em; + /* @noflip */ + background-image: @background-image-magnify-rtl; + } + } +} diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less index 2dbc30d..b843e09 100644 --- a/resources/screen-mobile.less +++ b/resources/screen-mobile.less @@ -219,6 +219,47 @@ div.thumb { margin: 0 auto 0.5em; } +figure[ typeof~='mw:File/Thumb' ], +figure[ typeof~='mw:File/Frame' ], +/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no + * longer supported + */ +figure[ typeof~='mw:Image/Thumb' ], +figure[ typeof~='mw:Video/Thumb' ], +figure[ typeof~='mw:Audio/Thumb' ], +figure[ typeof~='mw:Image/Frame' ], +figure[ typeof~='mw:Video/Frame' ], +figure[ typeof~='mw:Audio/Frame' ] { + width: 100% !important; + + > *:first-child { + > *:first-child { + margin: 1em 1.5em; + } + } + + > figcaption { + padding: 0 1.5em 1em 1.5em; + } +} + +// FIXME: Clear the magnify clip for now +figure[ typeof~='mw:File/Thumb' ]:not( [ typeof~='mw:Error' ] ), +/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no + * longer supported + */ +figure[ typeof~='mw:Image/Thumb' ]:not( [ typeof~='mw:Error' ] ), +figure[ typeof~='mw:Video/Thumb' ]:not( [ typeof~='mw:Error' ] ), +figure[ typeof~='mw:Audio/Thumb' ]:not( [ typeof~='mw:Error' ] ) { + > figcaption:before { + content: none; + } + + > a:after { + content: none; + } +} + .mw-body { border: 0; diff --git a/resources/variables-content.less b/resources/variables-content.less new file mode 100644 index 0000000..59f519c --- /dev/null +++ b/resources/variables-content.less @@ -0,0 +1,36 @@ +@import 'themes/wikimedia.less'; // default theme + +@font-size-thumbinner-screen: 94%; +@font-size-thumbinner-print: 10pt; + +@border-thumbinner-screen: 1px solid @base80; +@border-thumbinner-print: 1px; + +@background-color-thumbinner-screen: #f8f9fa; +@background-color-thumbinner-print: #fff; + +@color-thumbinner-print: #666; + +@font-size-thumbcaption-screen: 95%; + +@line-height-thumbcaption: 1.5em; + +@margin-floatright: 0 0 1.5em 2em; +@margin-floatleft: 0 2em 1.5em 0; + +@margin-bottom-thumb: 0.5em; + +@margin-tright: 0 0 1.5em 2em; +@margin-tleft: 0 2em 1.5em 0; + +@border-thumbimage-screen: 1px solid @base80; +@border-thumbimage-print: 1px; + +@background-color-thumbimage-screen: #fff; + +@block-border: #aaa; // From resources/libraries/common-print.less +@border-thumbborder-screen: 1px solid @base80; +@border-thumbborder-print: 1pt solid @block-border; + +@background-image-magnify-ltr: url( images/magnify-ltr.svg ); +@background-image-magnify-rtl: url( images/magnify-rtl.svg ); diff --git a/skin.json b/skin.json index ff4d9f2..428f418 100644 --- a/skin.json +++ b/skin.json @@ -75,6 +75,9 @@ "toc": true }, "styles": { + "resources/content.media-common.less": { + "media": "all" + }, "resources/libraries/normalise.css": { "media": "screen" }, @@ -84,6 +87,9 @@ "resources/forms.less": { "media": "screen" }, + "resources/content.media-screen.less": { + "media": "screen" + }, "resources/screen-common.less": { "media": "screen" }, @@ -108,6 +114,9 @@ }, "resources/print.css": { "media": "print" + }, + "resources/content.media-print.less": { + "media": "print" } }, "@NOTE": "Remember to also update variables.less if you change the width cutoffs here. screen-misc.less and mobile.js may also need updating."