Created
June 19, 2012 08:31
-
-
Save Mwn/2953024 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Watched.li Show-Tile · CodePen</title> | |
| <style> | |
| @charset "UTF-8"; | |
| @font-face { | |
| font-family: 'Open Sans'; | |
| font-style: normal; | |
| font-weight: 300; | |
| src: local("Open Sans Light"), local("OpenSans-Light"), url("http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: 'Open Sans'; | |
| font-style: normal; | |
| font-weight: 600; | |
| src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: 'Open Sans'; | |
| font-style: normal; | |
| font-weight: 400; | |
| src: local("Open Sans"), local("OpenSans"), url("http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff") format("woff"); | |
| } | |
| /* $Vars */ | |
| /* $Mixins */ | |
| /* Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| -webkit-font-smoothing: subpixel-antialiased; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /* $Content */ | |
| body { | |
| padding: 50px; | |
| font-family: 'Open Sans', Arial, sans-serif; | |
| font-weight: 400; | |
| background: #f9f9f9; | |
| } | |
| .s { | |
| background-image: url("http://visuellegedanken.de/codepen/watchedli-tile/sprite.png"); | |
| } | |
| .show-tile { | |
| margin: 0 auto; | |
| width: 370px; | |
| background: #fff; | |
| border: 1px solid #e0e0e0; | |
| -webkit-border-radius: 6px; | |
| /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ | |
| border-radius: 6px; | |
| /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */ | |
| /* hide bg color from leaking outside the border */ | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2); | |
| } | |
| .show-tile-head { | |
| -webkit-border-top-left-radius: 5px; | |
| -webkit-border-top-right-radius: 5px; | |
| -moz-border-radius-topleft: 5px; | |
| -moz-border-radius-topright: 5px; | |
| border-top-left-radius: 5px; | |
| border-top-right-radius: 5px; | |
| } | |
| .show-tile-link { | |
| position: relative; | |
| display: block; | |
| width: 368px; | |
| height: 205px; | |
| line-height: 205px; | |
| text-align: center; | |
| background-color: rgba(0, 0, 0, 0.3); | |
| -webkit-border-top-left-radius: 5px; | |
| -webkit-border-top-right-radius: 5px; | |
| -moz-border-radius-topleft: 5px; | |
| -moz-border-radius-topright: 5px; | |
| border-top-left-radius: 5px; | |
| border-top-right-radius: 5px; | |
| } | |
| .show-tile-link .inner { | |
| display: inline-block; | |
| padding: 0 35px; | |
| vertical-align: middle; | |
| } | |
| .show-tile-link h2 { | |
| margin-bottom: 5px; | |
| color: #fff; | |
| font-size: 30px; | |
| font-weight: 300; | |
| line-height: 34px; | |
| } | |
| .show-tile-link p { | |
| color: #fff; | |
| font-size: 15px; | |
| line-height: 20px; | |
| } | |
| .show-tile-link:after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| right: 9px; | |
| margin-top: -15px; | |
| width: 21px; | |
| height: 30px; | |
| background: url("http://visuellegedanken.de/codepen/watchedli-tile/sprite.png") -16px 0; | |
| } | |
| .show-breaking-bad { | |
| background: url("http://visuellegedanken.de/codepen/watchedli-tile/s-breaking-bad.jpg"); | |
| } | |
| .episodes-list { | |
| list-style-type: none; | |
| } | |
| .episodes-list li { | |
| position: relative; | |
| padding: 27px 0 26px 14px; | |
| font-size: 16px; | |
| line-height: 16px; | |
| border-top: 1px solid #e9e9e9; | |
| } | |
| .episodes-list span { | |
| font-size: 13px; | |
| } | |
| .episodes-list li.is-unseen { | |
| color: #3c3c3c; | |
| } | |
| .episodes-list li.is-unseen span { | |
| color: #c6c6c6; | |
| } | |
| .episodes-list li.is-seen { | |
| color: #d8d8d8; | |
| } | |
| .episodes-list li.is-seen span { | |
| color: #f3f3f3; | |
| } | |
| .show-status { | |
| position: absolute; | |
| top: 50%; | |
| right: -30px; | |
| margin-top: -18px; | |
| padding: 10px 0 0 7px; | |
| width: 30px; | |
| height: 36px; | |
| -webkit-border-top-right-radius: 3px; | |
| -webkit-border-bottom-right-radius: 3px; | |
| -moz-border-radius-topright: 3px; | |
| -moz-border-radius-bottomright: 3px; | |
| border-top-right-radius: 3px; | |
| border-bottom-right-radius: 3px; | |
| } | |
| .show-status.is-unseen, | |
| .show-status.is-seen { | |
| background: #dedede; | |
| } | |
| .show-status.is-unseen span, | |
| .show-status.is-seen span { | |
| display: block; | |
| width: 16px; | |
| height: 15px; | |
| text-indent: -99999px; | |
| background-position: 0 0; | |
| } | |
| .show-status.is-seen { | |
| background: #5aa403; | |
| } | |
| /* END $ShowTile */ | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: absolute !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="show-tile"> | |
| <div class="show-tile-head show-breaking-bad"> | |
| <a class="show-tile-link" href="show.php"> | |
| <div class="inner"> | |
| <h2>Breaking Bad</h2> | |
| <p>Seen 170 of 340 episodes.</p> | |
| </div> | |
| </a> | |
| </div> | |
| <ol class="episodes-list"> | |
| <li class="is-seen"><span>S04E01</span> Box Cutter <a class="show-status is-seen" href="javascript:;"><span class="s">Change status</span></a></li> | |
| <li class="is-unseen"><span>S04E02</span> Let the games begin <a class="show-status is-unseen" href="javascript:;"><span class="s">Change status</span></a></li> | |
| <li class="is-unseen"><span>S04E03</span> Hank’s Jazz <a class="show-status is-unseen" href="javascript:;"><span class="s">Change status</span></a></li> | |
| <li class="is-unseen"><span>S04E04</span> Fire in your pants <a class="show-status is-unseen" href="javascript:;"><span class="s">Change status</span></a></li> | |
| </ol> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script> | |
| (function() { | |
| $(document).ready(function() { | |
| $('.show-status.is-unseen').live('click', function(){ | |
| $(this).removeClass('is-unseen').addClass('is-seen'); | |
| $(this).parent('li').removeClass('is-unseen').addClass('is-seen'); | |
| /* $(this).parent('li').slideUp(); */ | |
| }); | |
| $('.show-status.is-seen').live('click', function(){ | |
| $(this).removeClass('is-seen').addClass('is-unseen'); | |
| $(this).parent('li').removeClass('is-seen').addClass('is-unseen'); | |
| }); | |
| }); | |
| })(); | |
| </script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/martinwolf/pen/watchedli-show-tile/1">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="show-tile"> | |
| <div class="show-tile-head show-breaking-bad"> | |
| <a class="show-tile-link" href="show.php"> | |
| <div class="inner"> | |
| <h2>Breaking Bad</h2> | |
| <p>Seen 170 of 340 episodes.</p> | |
| </div> | |
| </a> | |
| </div> | |
| <ol class="episodes-list"> | |
| <li class="is-seen"><span>S04E01</span> Box Cutter <a class="show-status is-seen" href="javascript:;"><span class="s">Change status</span></a></li> | |
| <li class="is-unseen"><span>S04E02</span> Let the games begin <a class="show-status is-unseen" href="javascript:;"><span class="s">Change status</span></a></li> | |
| <li class="is-unseen"><span>S04E03</span> Hank’s Jazz <a class="show-status is-unseen" href="javascript:;"><span class="s">Change status</span></a></li> | |
| <li class="is-unseen"><span>S04E04</span> Fire in your pants <a class="show-status is-unseen" href="javascript:;"><span class="s">Change status</span></a></li> | |
| </ol> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $('.show-status.is-unseen').live('click', function(){ | |
| $(this).removeClass('is-unseen').addClass('is-seen'); | |
| $(this).parent('li').removeClass('is-unseen').addClass('is-seen'); | |
| /* $(this).parent('li').slideUp(); */ | |
| }); | |
| $('.show-status.is-seen').live('click', function(){ | |
| $(this).removeClass('is-seen').addClass('is-unseen'); | |
| $(this).parent('li').removeClass('is-seen').addClass('is-unseen'); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass"; | |
| @font-face { | |
| font-family: 'Open Sans'; | |
| font-style: normal; | |
| font-weight: 300; | |
| src: local('Open Sans Light'), local('OpenSans-Light'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff') format('woff'); | |
| } | |
| @font-face { | |
| font-family: 'Open Sans'; | |
| font-style: normal; | |
| font-weight: 600; | |
| src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff') format('woff'); | |
| } | |
| @font-face { | |
| font-family: 'Open Sans'; | |
| font-style: normal; | |
| font-weight: 400; | |
| src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); | |
| } | |
| /* $Vars */ | |
| $txtcolor: #3c3c3c; | |
| $green: #58a300; | |
| /* $Mixins */ | |
| @mixin box-sizing($sizing: border-box) { | |
| -webkit-box-sizing: $sizing; | |
| -moz-box-sizing: $sizing; | |
| box-sizing: $sizing; | |
| } | |
| @mixin box-shadow ($shadow: 0 1px 1px rgba(0,0,0,.3)) { | |
| -webkit-box-shadow: $shadow; | |
| box-shadow: $shadow; | |
| } | |
| @mixin border-radius ($radius: 3px) { | |
| -webkit-border-radius: $radius; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ | |
| border-radius: $radius; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */ | |
| /* hide bg color from leaking outside the border */ | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| } | |
| /* Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| -webkit-font-smoothing: subpixel-antialiased; | |
| @include box-sizing(); | |
| } | |
| /* $Content */ | |
| body { | |
| padding: 50px; | |
| font-family: 'Open Sans', Arial, sans-serif; | |
| font-weight: 400; | |
| background: #f9f9f9; | |
| } | |
| .s { | |
| background-image: url('http://visuellegedanken.de/codepen/watchedli-tile/sprite.png'); | |
| } | |
| .show-tile { | |
| margin: 0 auto; | |
| width: 370px; | |
| background: #fff; | |
| border: 1px solid #e0e0e0; | |
| @include border-radius(6px); | |
| @include box-shadow(0 1px 0px rgba(0,0,0,.2)); | |
| } | |
| .show-tile-head { | |
| -webkit-border-top-left-radius: 5px; | |
| -webkit-border-top-right-radius: 5px; | |
| -moz-border-radius-topleft: 5px; | |
| -moz-border-radius-topright: 5px; | |
| border-top-left-radius: 5px; | |
| border-top-right-radius: 5px; | |
| } | |
| .show-tile-link { | |
| position: relative; | |
| display: block; | |
| width: 368px; | |
| height: 205px; | |
| line-height: 205px; | |
| text-align: center; | |
| background-color: rgba(0,0,0,0.3); | |
| -webkit-border-top-left-radius: 5px; | |
| -webkit-border-top-right-radius: 5px; | |
| -moz-border-radius-topleft: 5px; | |
| -moz-border-radius-topright: 5px; | |
| border-top-left-radius: 5px; | |
| border-top-right-radius: 5px; | |
| .inner { | |
| display: inline-block; | |
| padding: 0 35px; | |
| vertical-align: middle; | |
| } | |
| h2 { | |
| margin-bottom: 5px; | |
| color: #fff; | |
| font-size: 30px; | |
| font-weight: 300; | |
| line-height: 34px; | |
| } | |
| p { | |
| color: #fff; | |
| font-size: 15px; | |
| line-height: 20px; | |
| } | |
| } | |
| .show-tile-link:after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| right: 9px; | |
| margin-top: -15px; | |
| width: 21px; | |
| height: 30px; | |
| background: url('http://visuellegedanken.de/codepen/watchedli-tile/sprite.png') -16px 0; | |
| } | |
| .show-breaking-bad { | |
| background: url('http://visuellegedanken.de/codepen/watchedli-tile/s-breaking-bad.jpg'); | |
| } | |
| .episodes-list { | |
| list-style-type: none; | |
| li { | |
| position: relative; | |
| padding: 27px 0 26px 14px; | |
| font-size: 16px; | |
| line-height: 16px; | |
| border-top: 1px solid #e9e9e9; | |
| } | |
| span { | |
| font-size: 13px; | |
| } | |
| li.is-unseen { | |
| color: $txtcolor; | |
| span { | |
| color: #c6c6c6; | |
| } | |
| } | |
| li.is-seen { | |
| color: #d8d8d8; | |
| span { | |
| color: #f3f3f3; | |
| } | |
| } | |
| } | |
| .show-status { | |
| position: absolute; | |
| top: 50%; | |
| right: -30px; | |
| margin-top: -18px; | |
| padding: 10px 0 0 7px; | |
| width: 30px; | |
| height: 36px; | |
| -webkit-border-top-right-radius: 3px; | |
| -webkit-border-bottom-right-radius: 3px; | |
| -moz-border-radius-topright: 3px; | |
| -moz-border-radius-bottomright: 3px; | |
| border-top-right-radius: 3px; | |
| border-bottom-right-radius: 3px; | |
| } | |
| .show-status.is-unseen, | |
| .show-status.is-seen { | |
| background: #dedede; | |
| span { | |
| display: block; | |
| width: 16px; | |
| height: 15px; | |
| text-indent: -99999px; | |
| background-position: 0 0; | |
| } | |
| } | |
| .show-status.is-seen { | |
| background: #5aa403; | |
| } | |
| /* END $ShowTile */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment