From 7668757e3c53c2060c26f4c85b7646a27214affd Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Fri, 19 Apr 2019 14:36:33 +0100 Subject: [PATCH] Gallery: Refactor CSS as LESS Change-Id: I42669a3445113cbbe09a58cd7524dea25c03b8a0 --- resources/Resources.php | 2 +- .../mediawiki.page.gallery.styles/gallery.css | 190 ------------------ .../gallery.less | 187 +++++++++++++++++ 3 files changed, 188 insertions(+), 191 deletions(-) delete mode 100644 resources/src/mediawiki.page.gallery.styles/gallery.css create mode 100644 resources/src/mediawiki.page.gallery.styles/gallery.less diff --git a/resources/Resources.php b/resources/Resources.php index 87488ebdb4..b9238324b6 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1681,7 +1681,7 @@ return [ ], 'mediawiki.page.gallery.styles' => [ 'styles' => [ - 'resources/src/mediawiki.page.gallery.styles/gallery.css', + 'resources/src/mediawiki.page.gallery.styles/gallery.less', 'resources/src/mediawiki.page.gallery.styles/print.css' => [ 'media' => 'print' ], ], 'targets' => [ 'desktop', 'mobile' ], diff --git a/resources/src/mediawiki.page.gallery.styles/gallery.css b/resources/src/mediawiki.page.gallery.styles/gallery.css deleted file mode 100644 index b7a424f1fd..0000000000 --- a/resources/src/mediawiki.page.gallery.styles/gallery.css +++ /dev/null @@ -1,190 +0,0 @@ -/* stylelint-disable selector-class-pattern */ - -/* Galleries */ -/* These display attributes look nonsensical, but are needed to support IE and FF2 */ -/* Don't forget to update gallery.print.css */ -li.gallerybox { - vertical-align: top; - display: -moz-inline-box; - display: inline-block; -} - -ul.gallery, -li.gallerybox { - zoom: 1; - *display: inline; -} - -ul.gallery { - margin: 2px; - padding: 2px; - display: block; -} - -li.gallerycaption { - font-weight: bold; - text-align: center; - display: block; - word-wrap: break-word; -} - -li.gallerybox div.thumb { - text-align: center; - margin: 2px; -} - -li.gallerybox div.thumb img { - display: block; - margin: 0 auto; -} - -div.gallerytext { - overflow: hidden; - font-size: 94%; - padding: 2px 4px; - word-wrap: break-word; -} - -.galleryfilename { - display: block; -} - -.galleryfilename-truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* new gallery stuff */ -ul.mw-gallery-nolines li.gallerybox div.thumb { - background-color: transparent; - border: 0; -} - -ul.mw-gallery-nolines li.gallerybox div.gallerytext { - text-align: center; -} - -/* height constrained gallery */ - -ul.mw-gallery-packed li.gallerybox div.thumb, -ul.mw-gallery-packed-overlay li.gallerybox div.thumb, -ul.mw-gallery-packed-hover li.gallerybox div.thumb { - background-color: transparent; - border: 0; -} - -ul.mw-gallery-packed li.gallerybox div.thumb img, -ul.mw-gallery-packed-overlay li.gallerybox div.thumb img, -ul.mw-gallery-packed-hover li.gallerybox div.thumb img { - margin: 0 auto; -} - -ul.mw-gallery-packed-hover li.gallerybox, -ul.mw-gallery-packed-overlay li.gallerybox { - position: relative; -} - -ul.mw-gallery-packed-hover div.gallerytextwrapper { - overflow: hidden; - height: 0; -} - -ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper, -ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper, -ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper { - position: absolute; - background: #fff; - background: rgba( 255, 255, 255, 0.8 ); - padding: 5px 10px; - bottom: 0; - left: 0; /* Needed for IE */ - height: auto; - max-height: 40%; - overflow: hidden; - font-weight: bold; - margin: 2px; /* correspond to style on div.thumb */ -} - -ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper p, -ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper p, -ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper p { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover, -ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover, -ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover { - overflow: visible; - max-height: none; -} - -ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover p, -ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover p, -ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover p { - text-overflow: clip; - white-space: normal; - overflow: visible; -} - -ul.mw-gallery-packed-hover, -ul.mw-gallery-packed-overlay, -ul.mw-gallery-packed { - text-align: center; -} - -/* Slideshow */ -ul.gallery.mw-gallery-slideshow { - display: block; - margin: 4em 0; -} - -ul.gallery.mw-gallery-slideshow .gallerycaption { - font-size: 1.3em; - margin: 0; -} - -ul.gallery.mw-gallery-slideshow .gallerycarousel.mw-gallery-slideshow-thumbnails-toggled { - margin-bottom: 1.3em; -} - -ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons { - opacity: 0.5; - padding: 1.3em 0; -} - -ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement { - margin: 0 2em; -} - -.mw-gallery-slideshow li.gallerybox.slideshow-current { - background: #efefef; -} - -.mw-gallery-slideshow .gallerybox > div { - max-width: 120px; -} - -ul.mw-gallery-slideshow li.gallerybox div.thumb { - border: 0; - background: transparent; -} - -ul.mw-gallery-slideshow li.gallerycarousel { - display: block; - text-align: center; -} - -.mw-gallery-slideshow-img-container a { - display: block; -} - -@media screen { - /* Background and border colors are defined separately for print mode */ - li.gallerybox div.thumb { - border: 1px solid #c8ccd1; - background-color: #f8f9fa; - } -} diff --git a/resources/src/mediawiki.page.gallery.styles/gallery.less b/resources/src/mediawiki.page.gallery.styles/gallery.less new file mode 100644 index 0000000000..9c82b7e578 --- /dev/null +++ b/resources/src/mediawiki.page.gallery.styles/gallery.less @@ -0,0 +1,187 @@ +/* stylelint-disable selector-class-pattern */ + +/* Galleries */ +/* These display attributes look nonsensical, but are needed to support IE and FF2 */ +/* Don't forget to update gallery.print.css */ + +ul.gallery { + margin: 2px; + padding: 2px; + display: block; +} + +li.gallerycaption { + font-weight: bold; + text-align: center; + display: block; + word-wrap: break-word; +} + +li.gallerybox { + vertical-align: top; + display: -moz-inline-box; + display: inline-block; + + div.thumb { + text-align: center; + margin: 2px; + + img { + display: block; + margin: 0 auto; + } + } +} + +ul.gallery, +li.gallerybox { + zoom: 1; + *display: inline; +} + +div.gallerytext { + overflow: hidden; + font-size: 94%; + padding: 2px 4px; + word-wrap: break-word; +} + +.galleryfilename { + display: block; + + &-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +/* new gallery stuff */ +ul.mw-gallery-nolines li.gallerybox { + div.thumb { + background-color: transparent; + border: 0; + } + + div.gallerytext { + text-align: center; + } +} + +/* height constrained gallery */ + +ul.mw-gallery-packed, +ul.mw-gallery-packed-overlay, +ul.mw-gallery-packed-hover { + text-align: center; + + li.gallerybox div.thumb { + background-color: transparent; + border: 0; + + img { + margin: 0 auto; + } + } +} + +ul.mw-gallery-packed-hover, +ul.mw-gallery-packed-overlay { + li.gallerybox { + position: relative; + } +} + +ul.mw-gallery-packed-hover div.gallerytextwrapper { + overflow: hidden; + height: 0; +} + +ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper, +ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper, +ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper { + position: absolute; + background: #fff; + background: rgba( 255, 255, 255, 0.8 ); + padding: 5px 10px; + bottom: 0; + left: 0; /* Needed for IE */ + height: auto; + max-height: 40%; + overflow: hidden; + font-weight: bold; + margin: 2px; /* correspond to style on div.thumb */ + + p { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &:hover { + overflow: visible; + max-height: none; + + p { + text-overflow: clip; + white-space: normal; + overflow: visible; + } + } +} + +/* Slideshow */ +ul.gallery.mw-gallery-slideshow { + display: block; + margin: 4em 0; + + .gallerycaption { + font-size: 1.3em; + margin: 0; + } + + .gallerycarousel { + display: block; + text-align: center; + + &.mw-gallery-slideshow-thumbnails-toggled { + margin-bottom: 1.3em; + } + } + + .mw-gallery-slideshow-buttons { + opacity: 0.5; + padding: 1.3em 0; + + .oo-ui-buttonElement { + margin: 0 2em; + } + } + + .gallerybox { + &.slideshow-current { + background: #efefef; + } + + > div { + max-width: 120px; + } + + div.thumb { + border: 0; + background: transparent; + } + } +} + +.mw-gallery-slideshow-img-container a { + display: block; +} + +@media screen { + /* Background and border colors are defined separately for print mode */ + li.gallerybox div.thumb { + border: 1px solid #c8ccd1; + background-color: #f8f9fa; + } +} -- 2.20.1