mtgox.less

/*
css3.less
---------
Useful mixins imported from https://github.com/MatthewWagerfield/LESS-CSS3-Mixins
*/
@import "css3.less";

/*
MtGox Checkout Button
=====================
This the CSS used by our button to render on all browsers, it involves a few tricks to be compatible with some
problematic browsers like Firefox < 4 or IE <= 8
*/

/*
Variables
---------
Allows us to change the whole apparence of the button without having to tinkle with the CSS itself
*/
@main-color:      rgb(249, 179, 19);
@secondary-color: rgb(239, 239, 239);
@text-shadow:     rgba(0, 0, 0, 0.3);
@text-color:      white;
@round:           3px;
@main-padding:    10px;
@font-size:       15px;
@text-padding:    4px;
@line-height:     @font-size + @text-padding;
@logo-width:      76px;
@gradient-pc:     6%;

/*
*mixin* **.gradient**(@color: #F5F5F5, @start: #EEE, @stop: #FFF)

This mixin create a linear gradient from bottom *@start* to top *@top* and define a fallback color through
*@color* for older browsers

*/
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background-color: @color;
  .linear-gradient(bottom, ~"," @start 0%, ~"," @stop 100%)
}

/*
*mixin* **.opacity**(@opacity: 0.5)

This mixin provides cross browser support for opacity
*/
.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
}

/* This is the complete HTML needed to display our button

	<a class="mtgox-button">
		<div class="mtgox-button-amount">
			<span class="mtgox-button-btc">428.50 BTC</span>
			<br>
			<span class="mtgox-button-cur">US$ 2052.52</span>
			<span class="mtgox-button-logo">
				<img src="https://payment.mtgox.com/img/button-logo.png?v3" width="88" height="33">
			</span>
		</div>
	</a>

The ```span > br > span``` setup allows us to switch the display between the 2 currencies while making sure the
button is sized based on the content of the 2 elements instead of the main one; It prevents the button from resizing
itself when
*/
a.mtgox-button {
	/* basic styles */
	/*padding: 1px;*/
	background: white;
	border: 1px solid darken(@main-color, 5%);
	display: inline-block;
	overflow: hidden;

	/* text styles */
	font-family: arial, "DejaVu Sans", sans-serif;
	font-weight: bold;
	font-size: @font-size;
	line-height: @line-height;
	text-decoration: none;
	color: @text-color;

	/* ice on top */
	.border-radius(@round);
	.transition(all, 0.25s, 0, ease-in-out);

	// the amount element
	.mtgox-button-amount {
		overflow: hidden;
		height: 18px;
		padding: @main-padding;
		padding-right: @logo-width + @main-padding + 10px;
		vertical-align: middle;
		display: inline-block;

		/* we use absolute positioning on mtgox-button-logo */
		position: relative;

		/* ice on top */
		.text-shadow(1px, 1px, 2px, @text-shadow);
		.border-radius(@round);
		color: white;
		.gradient(@main-color, spin(@main-color, -9), @main-color);

		// the base currency
		.mtgox-button-base {
			display: inline-block;
			width: 100%;
			color: white;
			text-align: center;
		}

		// the content element
		.mtgox-button-dist {
			position: relative;
			top: 50px;
			color: white;
			visibility: hidden;
			display: inline-block;
			width: 100%;
			text-align: center;
			.opacity(0);
		}

		// the logo element
		.mtgox-button-logo {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			padding-top: 0px;
			width: @logo-width + 10px;

			/* ice on top */
			.border-radius(0, @round, @round, 0);
			.gradient(@secondary-color, darken(@secondary-color, @gradient-pc), @secondary-color);

			// fix for FF 3.5
			img {
				border: 0;
				padding: 6px @main-padding - 4px;
			}
		}
	}

	// when we hover the button
	&:hover {
		.box-shadow(0 0 2px 1.5px @main-color);
		text-decoration: none;
		color: @text-color;

		.mtgox-button-base {
			visibility: hidden;
			.opacity(0);
		}
		.mtgox-button-dist {
			top: @line-height * -1;
			visibility: visible;
			.opacity(1);
		}
	}

	* {
		cursor: pointer;
	}
}