Skip to content
This repository has been archived by the owner on Jan 24, 2020. It is now read-only.

Commit

Permalink
More design changes.
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Kelly committed Nov 5, 2012
1 parent 234a2f7 commit e5bb0b6
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 35 deletions.
2 changes: 1 addition & 1 deletion video-snippets/flicks-2012-video/content.html
View file
Expand Up @@ -2,7 +2,7 @@
<style>{{ css }}</style>

<video class="hidden" controls="controls" preload="none">
<source src="http://videos.mozilla.org/serv/flux/snippets/flicks_snippet_falling_480p.webm" type="video/webm"/>
<source src="https://dl.dropbox.com/u/12343904/flicks-snippet-videos/Flicks%20Snippet%20Paranoid%20Translations%20DE%20480p.webm" type="video/webm"/>
</video>

<div class="message">
Expand Down
Binary file added video-snippets/flicks-2012-video/images/close.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added video-snippets/flicks-2012-video/images/share_white.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 4 additions & 5 deletions video-snippets/flicks-2012-video/script.js
View file
Expand Up @@ -25,15 +25,14 @@

content.push('<div class="video-overlay">');
content.push('<i class="close"></i>');
content.push('<button class="share"></button>');
content.push('<button class="share">' + this.strings.share + '</button>');
content.push('<div class="shareScreen">');
content.push('<div class="shareBox">');
if (options.externalLink) {
content.push('<a href="' + options.externalLink.href + '" class="external">');
content.push(options.externalLink.label);
content.push('</a>');
}
content.push('<div class="prompt">' + this.strings.share + '</div>');
content.push('<div class="social">');
content.push('<a href="' + this.util.buildFacebookURL(shareURL) + '" target="_blank" class="facebook">' + this.strings.share + '</a>');
content.push('<a href="' + this.util.buildTwitterURL(shareURL, this.strings.twitterShare) + '" target="_blank" class="twitter">' + this.strings.tweet + '</a>');
Expand Down Expand Up @@ -208,18 +207,18 @@
var video = snippet.querySelector('video');
var showVideoLink = snippet.querySelector('.show-video');

var shareOverlay = new VideoShareOverlay(video, 'https://www.mozilla.org', {
var shareOverlay = new VideoShareOverlay(video, 'http://mzl.la/InvJlr', {
hidden: true,
externalLink: {
href: 'https://firefoxflicks.mozilla.org',
label: 'visit firefoxflicks.org'
label: 'Visit firefoxflicks.org'
},
strings: {
shareLabel: 'Share',
shareScreenPrompt: 'Share',
resume: 'Resume',
replay: 'Replay',
twitterShare: ''
twitterShare: 'Fall in love with Firefox. Let this winning video from #Firefox Flicks show you how. Via @Firefox'
}
});

Expand Down
76 changes: 47 additions & 29 deletions video-snippets/flicks-2012-video/styles.less
View file
@@ -1,6 +1,7 @@
@green: #45ac4d;
@blue: #1b95e0;
@blue: #0095DD;
@white: #fff;
@black: #000;

@font-face {
font-family: 'Open Sans Light';
Expand All @@ -12,7 +13,8 @@

video {
display: block;
width: 100%;
height: 262px;
width: 466px;
}

.message {
Expand All @@ -37,34 +39,38 @@
}

.video-overlay {
border: 2px solid rgba(0, 0, 0, 0);
border: 4px solid @black;
box-shadow: 0 1px 0 rgba(255,255,255,.80) inset,
0 -2px 0 rgba(0,0,0,.1) inset,
0 0 10px rgba(255,255,255,.5) inset,
0 0 0 1px rgba(0,0,0,.1),
0 2px 4px rgba(0,0,0,.2);
height: 262px;
margin: 8px auto;
-moz-transition: 400ms ease-in-out;
overflow: hidden;
position: relative;
width: 466px;

&.hidden {
height: 0;
margin: 0;
margin: 0 auto;
opacity: 0;
width: 0;
width: 1px;

/* We can't put display:none on the overlay itself or it won't animate. */
* {
display: none !important;
}
}

.close, .share {
display: none;
z-index: 100;
}

&:hover {
border: 2px solid @green;
.close {
display: block;
}
&:hover .close {
display: block;
}

&.started:hover .share {
Expand All @@ -76,27 +82,42 @@
}

.close {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAMAAADjcdz2AAAAMFBMVEWZ0p2DyIm64L1pvG9wv3ZLr1PO6dDt+O70+/Wr2q/c8N5XtF5Bq0k8qEX///9FrE2p5o4TAAAAfUlEQVR42m2OSxLDIAxDSfgFkMz9bxvLndJNtbDwG1smbRe4Q8TeAlwJkF+ZAljTBtVbX3BQp5kl8nKbVRPDXKU8XgciQ6R3Lw0BEER9hUIPaYizcXcKPIUOTi9y/qH5puQFgVvPWoUHBfLUOpdbxifjLgzL/J7FsQA//QEvVFwNNcGOZFoAAAAASUVORK5CYII=') no-repeat;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGFBMVEVFQEIvKSt4dHVZVVZsZ2kjHR9+ensdFxmtF0NTAAAAYElEQVR42qXOQQqAMAxE0WiaeP8bm/QPBsSdWX0elKldHyc8zhUKbyQzSwkXVrZuKwVXbrVtaWCgHM/RMaFUJuwQxiC7/AEcQ0FsFMRcaw66dlErRNtQe9ZdERXg6/7iDYqICXLRedxEAAAAAElFTkSuQmCC') no-repeat;
cursor: pointer;
height: 17px;
height: 20px;
position: absolute;
right: 0;
top: 0;
width: 16px;
width: 20px;
}

.share {
background: rgba(40, 40, 40, 0.8);
border: none;
border-radius: 6px;
color: @blue;
cursor: pointer;
padding: 2px 0 4px 4px;
font-variant: small-caps;
padding: 4px;
position: absolute;
text-align: center;
text-transform: lowercase;
top: 10%;
right: 5%;
width: 50px;
word-spacing: 50px;

&:hover {
color: @white;

&:before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAaCAMAAABxVtfCAAAAGFBMVEX///////////////////////8AAAD////Zjqp5AAAAB3RSTlPP65kzab8ACWG+jQAAAIRJREFUeNp90VsKxTAIBND4SGf/O75eLNMMaTMfATloQMf1nRfLPBjyYIVtk4mqIwdw43B0uva1GBPorqrSAGJbf8MmYhtJ8LHEp4UJyMy5ES12ovlONPxjnsGd0bJkhOyaVm/qjR4zI1UiFgsImZgSxPS2YpKT+WpTYzTHFlrMnbyH/wBIlhBOs5IhVgAAAABJRU5ErkJggg==');
}
}

&:before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAaCAMAAABxVtfCAAAAMFBMVEUAld0Ald0Ald0Ald0Ald0Ald0Ald0Ald0Ald0Ald0Ald0Ald0Ald0Ald0AAAAAld0mnPKAAAAAD3RSTlPPr9+PUJ8QMCDvQIBgvwCkj4dDAAAAlUlEQVR42p3RSw7DIAxFURICmO/b/24DgrpGbjLonVlHeIBNU/m2+mG5vBjKiy00/qifQp8pG2ChcRit2TsehlVgvupTiQDjtLaykBVpDtjxawWPRhF42lkVsSVNbE4Rm8fotBfxn7GVLiaJvxZ2AFneSFqMl7htCMIInbgQk7CUN4I02m+7WfvL6t7J5qBio6rJzuU3ROIlYAaa5HgAAAAASUVORK5CYII=');
margin-left: 5px;
}
}

Expand All @@ -119,32 +140,26 @@
color: @blue;
display: block;
font-size: 22px;
margin: 0 auto 20px;
margin: 0 auto 30px;

&:after {
content: '\00BB';
}
}

.prompt {
display: block;
margin: 0 auto 5px;
}

.social {
display: block;
margin: 0 auto 20px;
margin: 0 auto 10px;

a {
background-color: white;
border-radius: 3px;
display: inline-block;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 11px;
font-weight: bold;
font-size: 13px;
height: 23px;
line-height: 22px;
padding: 2px 4px 2px 2px;
line-height: 23px;
padding: 4px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
white-space: nowrap;
Expand All @@ -154,23 +169,26 @@
background-image: linear-gradient(top, #ffffff, #dedede);
border: #CCC solid 1px;
color: #333;
font-weight: bold;

&:before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEU9osnZ7fUAqOj9/v4Aq+0ArO4AouAAls9+zuwAndkAjsVcrcyd1+2ZyNsApeX///8vtOdlweQQrOkPkMGJwNUQm9E+q9St3fAfkb2/4e56udJPwe3y+fwumcNNpMU0Q1s4AAAAeElEQVR4Xo3PRw7DQAgFUNOmN7fUcv9jRowtL5IswvIJ9D9D/ZhfQB1oueVKpPDKCs8QwnDJCqcQqYI1xfgVFJK3cxwNC+O59o1SvPUoImVLgYkZkUW47bFukj6Ydrg2VuB2FIN7P6ANKM5WI0Y6qoNzLj2+fvkb3rWUDKneO3WZAAAAAElFTkSuQmCC');
margin-right: 3px;
vertical-align: -5px;
vertical-align: -4px;
}
}

.facebook {
background-color: #ebeef4;
border: #c6d5e6 solid 1px;
color: #285a96;
font-weight: normal;
margin-right: 8px;

&:before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAYFBMVEVxj7f///9We6pQd6hWfKtReKgWRHvb4+1XfKtSealWe6tPdqdwj7dUe6oXRHxwjrdwkbdvkLdTeqmKpMTd5e7o7PNNdabN2ObZ4uxTeqrh5+9PdKcDNGzi6PB+m7/x9Pg8JP8VAAAA3klEQVR4Xm2OV47DMAxERaoXt9Tte/9b7qOCYH8yIjwzD7Rst5oSZzo2q1t/Xmh1SUsJpWhpWLMcgia3agOpFlUNULaKcgm5TUA/X+T3QgG3wmawV9pZTKUFsE4tNlnkmjONTy7LcmLQO5RMSy7VaqjaiLxV04k/oZoo4EwgcXfEUZSnYqzcbYhTn/QaY0xse9z7mHMW4XGnckn33neEg/2s4Nut23QEJhPAn1PdDIwj2/4X/40h8D44D4l87LOAx3Ec+zHsiHyTAYbHNgdn22wb4IkcebPtgSb+eqH1DydrF27d6vKZAAAAAElFTkSuQmCC');
margin-right: 4px;
vertical-align: -8px;
vertical-align: -6px;
}
}
}
Expand All @@ -183,7 +201,7 @@
color: @blue;
display: block;
font: 13px Verdana, sans-serif;
margin: 0 auto 20px;
margin: 0 auto 50px;
padding: 4px;
width: 200px;
}
Expand Down Expand Up @@ -219,7 +237,7 @@
}

&.share-visible .shareScreen {
background-color: rgba(60,60,60,0.9);
background-color: rgba(60,60,60,0.95);
display: block;
}
}
Expand Down

0 comments on commit e5bb0b6

Please sign in to comment.