From 7e3d794c9f7716697cf92cd73b6907be07a304e4 Mon Sep 17 00:00:00 2001
From: Pau Giner <pau.giner@gmail.com>
Date: Thu, 20 Mar 2014 14:52:39 +0100
Subject: [PATCH] Reuse dialog styling

Adjustments of several styling aspects for the reuse file panel:
* Border style and colours to match the ones used in similar borders and Agora style
* Highlight the trigger also on hover
* Tweak the margins to avoid info on the embed panel to appear next to the edge.

Change-Id: I3a5448e3e81006ae35d2c18a9b2cbc2a6598210e
---
 resources/mmv/ui/mmv.ui.reuse.dialog.less | 19 ++++++++++---------
 resources/mmv/ui/mmv.ui.reuse.share.less  |  4 ++--
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.less b/resources/mmv/ui/mmv.ui.reuse.dialog.less
index c8b0818c2..f0740253e 100644
--- a/resources/mmv/ui/mmv.ui.reuse.dialog.less
+++ b/resources/mmv/ui/mmv.ui.reuse.dialog.less
@@ -7,8 +7,8 @@
 	right: 0;
 	bottom: 0;
 
-	border-left: 1px solid @reuse-link-color;
-	padding: 15px;
+	border-left: 1px solid #cccccc;
+	padding: 15px 20px;
 
 	.unselectable;
 	font-size: 1.25em;
@@ -34,7 +34,8 @@
 		vertical-align: baseline;
 	}
 
-	&.open {
+	&.open,
+	&:hover {
 		opacity: 1;
 	}
 }
@@ -46,7 +47,7 @@
 
 .mw-mlb-reuse-dialog {
 	@background-color: rgb(255, 255, 255);
-	@shadow-color: rgb(0, 0, 0);
+	@shadow-color: #aaaaaa;
 	@border-radius: 3px;
 	@divider-border-height: 1px;
 	@dialog-width: 450px;
@@ -59,7 +60,7 @@
 	width: @dialog-width;
 	height: @dialog-height;
 	background-color: @background-color;
-	box-shadow: 2px 2px 2px @shadow-color;
+	box-shadow: 0 2px 0 @shadow-color;
 	.box-round(@border-radius);
 
 	.mw-mlb-reuse-tabs {
@@ -101,7 +102,7 @@
 
 	.mw-mlb-reuse-pane {
 		display: none;
-		padding: 10px;
+		padding: 10px 20px;
 
 		&.active {
 			display: block;
@@ -110,8 +111,8 @@
 
 	.mw-mlb-reuse-down-arrow {
 		@arrow-size: 20px;
-		@arrow-border-color: rgb(170, 170, 170);
-		@arrow-border-size: 1px;
+		@arrow-border-color: #aaaaaa;
+		@arrow-border-size: 2px;
 
 		background-color: @background-color;
 		width: @arrow-size;
@@ -121,6 +122,6 @@
 		.rotate(45deg);
 		position: absolute;
 		right: 60px;
-		bottom: -1 * ( @arrow-size / 2 );
+		bottom: -1 * ( @arrow-size / 2 ) - @arrow-border-size;
 	}
 }
diff --git a/resources/mmv/ui/mmv.ui.reuse.share.less b/resources/mmv/ui/mmv.ui.reuse.share.less
index 4f13a1314..2fb5c0d5e 100644
--- a/resources/mmv/ui/mmv.ui.reuse.share.less
+++ b/resources/mmv/ui/mmv.ui.reuse.share.less
@@ -14,12 +14,12 @@
 	// position approximately to the middle - probably fragile but couldn't find a better way as the
 	// height of OOJS-UI input widget has both em and px parts and not possible to calculate exactly
 	margin: 8px 0;
-	padding: 0 10px;
+	padding: 0 5px 0 0;
 
 	/* @embed */
 	background-image: url(img/link.svg);
 	background-size: contain;
-	background-position: center;
+	background-position: left center;
 	background-repeat: no-repeat;
 
 	&:hover {