Fix font size and backgrounds in gallery

In print medium we should be explicit about font size
 - don't rely on %
and colors should be made more printer friendly

Additional changes:
* Remove some duplicated rule between gallery.print.css and
gallery.css
* Scope background definitions to screen medium

Bug: T169823
Change-Id: Iffcff305a4e0b973bdd52a57f52d8a0766cef512

diff --git a/resources/src/mediawiki/page/gallery.css b/resources/src/mediawiki/page/gallery.css
index 31def27..6a331b6 100644 (file)
--- a/resources/src/mediawiki/page/gallery.css
+++ b/resources/src/mediawiki/page/gallery.css
@@ -28,8 +28,6 @@ li.gallerycaption {
 
 li.gallerybox div.thumb {
        text-align: center;
-       border: 1px solid #c8ccd1;
-       background-color: #f8f9fa;
        margin: 2px;
 }
 
@@ -180,3 +178,11 @@ ul.mw-gallery-slideshow li.gallerycarousel {
 .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.print.css b/resources/src/mediawiki/page/gallery.print.css
index 80fc964..2ae670b 100644 (file)
--- a/resources/src/mediawiki/page/gallery.print.css
+++ b/resources/src/mediawiki/page/gallery.print.css
@@ -23,14 +23,13 @@ li.gallerycaption {
 }
 
 li.gallerybox div.thumb {
-       text-align: center;
+       background-color: #fff;
        border: 1px solid #ccc;
-       margin: 2px;
 }
 
 div.gallerytext {
        overflow: hidden;
-       font-size: 94%;
+       font-size: 10pt;
        padding: 2px 4px;
        word-wrap: break-word;
 }