2
0

Fix play icon on video button.

This commit is contained in:
Maarten Billemont 2014-07-18 10:05:07 -04:00
parent 3740ade240
commit 9d5c2e29af
2 changed files with 19 additions and 1 deletions

View File

@ -137,6 +137,20 @@ h2.inline, h3.inline, h4.inline {
margin-left: -2px; margin-left: -2px;
vertical-align: middle; vertical-align: middle;
} }
.middle.play::after {
content: "▶";
display: inline-block;
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 0 1px white;
border-radius: 50%;
padding: 1ex;
font-size: 200%;
vertical-align: middle;
transition: box-shadow 0.3s;
}
.middle.play:hover::after {
box-shadow: 0 0 10px white;
}
.column { .column {
display: inline-block; display: inline-block;
@ -181,6 +195,9 @@ header .container {
background: radial-gradient(70% 50% at 30% 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%); background: radial-gradient(70% 50% at 30% 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 );
} }
header a:link, header a:visited, header *[onclick] {
color: white;
}
header .background { header .background {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -217,6 +234,7 @@ header .box .minimized,
header .box .maximized { header .box .maximized {
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
font-size: 12pt;
} }
header .box .minimized, header .box .minimized,
header .box.active .maximized { header .box.active .maximized {

View File

@ -65,7 +65,7 @@
<div class="box effect-8" onclick="$(this).toggleClass('active')"> <div class="box effect-8" onclick="$(this).toggleClass('active')">
<div class="minimized"> <div class="minimized">
<img class="fit-height" src="http://i.vimeocdn.com/video/318668169_960.jpg" /> <img class="fit-height" src="http://i.vimeocdn.com/video/318668169_960.jpg" />
<div class="middle"></div> <div class="middle play"></div>
</div> </div>
<div class="maximized"> <div class="maximized">
<iframe id="youtube" type="text/html" width="853" height="480" frameborder="0" <iframe id="youtube" type="text/html" width="853" height="480" frameborder="0"