Fix play icon on video button.
This commit is contained in:
parent
3740ade240
commit
9d5c2e29af
@ -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 {
|
||||||
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user