previews: Tidy up styles

I59ac2e32 removed support for non-SVG capable UAs but didn't remove all
of the associated styles.

Additional changes:
* Give the inner container a name, "mwe-popups-container", so that it
  can be styled with reduced specificity.

Supporting changes:
* Move the "core" styles into the ext.popups module.

Bug: T151054
Change-Id: I8deb6e76daf6f33fcb6f496129e6baf9e6793231

extension.json

@@ -77,7 +77,7 @@
 				"settings.mustache": "resources/ext.popups.desktop/settings.mustache"
 			},
 			"styles": [
-				"resources/ext.popups.core/ext.popups.core.less",
+				"resources/ext.popups/styles/ext.popups.core.less",
 				"resources/ext.popups.desktop/ext.popups.animation.less",
 				"resources/ext.popups.desktop/ext.popups.settings.less"
 			],

resources/ext.popups.core/images/horn-ltr.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<path fill="#555555" d="M3,15l3,0.6V18c0,0.6,0.4,1,1,1h5c0.6,0,1-0.4,1-1v-1l5,1V7L3,11C2.6,11.5,2.6,14.4,3,15z M7,15.8l5,1v0.7
-		c0,0.3-0.2,0.5-0.5,0.5h-4C7.2,18,7,17.8,7,17.5V15.8z"/>
-	<path fill="#555555" d="M20,10h-1v5h1c0.6,0,1-0.4,1-1v-3C21,10.4,20.6,10,20,10z"/>
-</g>
-</svg>

resources/ext.popups.core/images/horn-rtl.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<path fill="#555555" d="M21,11L6,7v11l5-1v1c0,0.6,0.4,1,1,1h5c0.6,0,1-0.4,1-1v-2.4l3-0.6C21.4,14.4,21.4,11.5,21,11z M17,17.5
-		c0,0.3-0.2,0.5-0.5,0.5h-4c-0.3,0-0.5-0.2-0.5-0.5v-0.7l5-1V17.5z"/>
-	<path fill="#555555" d="M3,11v3c0,0.6,0.4,1,1,1h1v-5H4C3.4,10,3,10.4,3,11z"/>
-</g>
-</svg>

resources/ext.popups.desktop/popup.mustache

@@ -1,13 +1,12 @@
 {{! Extracted from `mw.popups.render.createPopupElement` }}
 <div class="mwe-popups" role="tooltip" aria-hidden>
-  <div>
+  <div class="mwe-popups-container">
     {{#hasThumbnail}}
     <a href="{{url}}" class="mwe-popups-discreet"></a>
     {{/hasThumbnail}}
     <a dir="{{langdir}}" lang="{{langcode}}" class="mwe-popups-extract" href="{{url}}"></a>
     <footer>
-        <span
-          class="{{#isRecent}}mwe-popups-timestamp-recent{{/isRecent}}{{^isRecent}}mwe-popups-timestamp-older{{/isRecent}}">{{lastModifiedMsg}}</span>
+        <span class="{{#isRecent}}mwe-popups-timestamp-recent{{/isRecent}}{{^isRecent}}mwe-popups-timestamp-older{{/isRecent}}">{{lastModifiedMsg}}</span>
         <a class="mwe-popups-icon mwe-popups-settings-icon"></a>
     </footer>
   </div>

resources/ext.popups/styles/ext.popups.core.less

@@ -55,11 +55,9 @@
 }
 
 .mwe-popups-settings-icon {
-	.background-image-svg( "images/cog.svg", "images/cog.png" );
-}
 
-.mwe-popups-survey-icon {
-	.background-image-svg( "images/horn-ltr.svg", "images/horn-ltr.png" );
+	// N.B. filenames are relative to the LESS file.
+	.background-image-svg( "../images/cog.svg", "../images/cog.png" );
 }
 
 .mwe-popups {
@@ -77,38 +75,13 @@
 	line-height: 20px;
 	min-width: 300px;
 
-	> div {
-		display: block;
+	.mwe-popups-container {
 		margin-top: -9px;
 		padding-top: 9px;
 		color: #000;
 		text-decoration: none;
 
-		> div {
-			padding: 0;
-			margin: 16px;
-			padding-bottom: 48px;
-		}
-
-		div.mwe-popups-is-not-tall,
-		div.mwe-popups-is-tall {
-			margin: 0;
-			height: 250px;
-			width: 200px;
-			padding: 0;
-			background-size: cover;
-			background-repeat: no-repeat;
-			overflow: hidden;
-			/* @noflip */
-			float: right;
-		}
-
-		div.mwe-popups-is-not-tall {
-			height: 200px;
-			width: 300px;
-		}
-
-		> footer {
+		footer {
 			padding: 16px;
 			margin: 0;
 			font-size: 10px;
@@ -117,11 +90,11 @@
 			/* @noflip */
 			left: 0;
 
-			> div.mwe-popups-timestamp-older {
+			.mwe-popups-timestamp-older {
 				color: #555;
 			}
 
-			> div.mwe-popups-timestamp-recent {
+			.mwe-popups-timestamp-recent {
 				color: #00af89;
 			}
 		}