Some updates to Angelina Fabbro's tremendous original reference document. The most notable additions are shadow pseudoclasses for scroller pseudoelements.
A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:
-webkit-appearance:none;
video::-webkit-media-controls-panel
| [#-- Transform many singular English words to their plural English form. | |
| Rules cribbed from http://kuwamoto.org/2007/12/17/improved-pluralizing-in-php-actionscript-and-ror/ which were cribbed from https://github.com/rails/rails/blob/9e0b3fc7cfba43af55377488f991348e2de24515/activesupport/lib/active_support/inflections.rb , so MIT License at http://b.mit-license.org/ applies --] | |
| [#assign plurals = { | |
| '(quiz)$': '$1zes', | |
| '^(ox)$': '$1en', | |
| '([m|l])ouse$': '$1ice', | |
| '(matr|vert|ind)ix|ex$': '$1ices', | |
| '(x|ch|ss|sh)$': '$1es', |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <!-- | |
| Hello! So here's how this page works...basically it's like a circa-1969 TV. When loaded, it displays a title card (apollo-tv-title-card.jpg) that says when the coverage starts. Then when the time is "July 20, {current year} 16:10:30 PM EDT", the first video (from "videoIds") starts playing. That video ends and the title card is displayed again. When the time is "July 20, {current year} 22:51:27 PM EDT", the second video starts and then the six remaining videos are shown right after that in succession. If the page is loaded at any point during the broadcast, the proper video will start playing at the proper time (just like you've turned on the TV for a live event). At the end, the title card will be displayed again. |
| $(window).resize(function(evt){ | |
| var imgDim = [ $("img#homepage-image").width(), $("img#homepage-image").height() ]; | |
| var bodyDim = [ $(document.body).width(), $(document.body).height() ]; | |
| $("#homepage-image-wrapper").width(bodyDim[0]).height(bodyDim[1]); | |
| var widthRatio = imgDim[0]/bodyDim[0]; | |
| var heightRatio = imgDim[1]/bodyDim[1]; | |
| if( widthRatio > heightRatio ) { | |
| $("img#homepage-image").height(bodyDim[1]).width(imgDim[0]/heightRatio); |
| #!/bin/bash | |
| mdfind -onlyin . -name $1 | xargs mate |
| //Thanks to http://boltron.tumblr.com/post/11616794382/its-always-funny-finding-weird-shit-i-make-out-on I guess | |
| if( $("#blueBarHolder").length ) { //Are we on a blue bar page? This gates this from running on billions of Like buttons. | |
| $(".fbJewel").css({"position":"relative"}); //This normally only applies to .fbJewel.hasNew, but seemingly no harm in forcing it. | |
| $(".jewelCount").css({"display":"block"}).each(function(i,ele) { //Likewise, .hasNew .jewelCount, but no harm. | |
| $(ele).append("<span class='getThatLife'>" + ["GET","A","LIFE"][i] +"</span>"); | |
| }).children(".getThatLife").css({ | |
| "position": "absolute", | |
| "top": 0, | |
| "right": 0 | |
| }); |
| @-webkit-keyframes toxic { | |
| from { background-color: rgba(116,154,2,.6); -webkit-box-shadow: 0 0 6px 2px rgb(116,154,2); } | |
| to { background-color: rgba(145,189,9,.6); -webkit-box-shadow: 0 0 12px 2px rgb(145, 189, 9); } | |
| } | |
| [style], | |
| img[title] { | |
| -webkit-animation: toxic .8s cubic-bezier(.50, 0, .50, 1) 0 infinite alternate !important; | |
| } |
| <br><br><br><br> | |
| <div class="wrapper"> | |
| <div class="scroll"> | |
| 1<br>2<br>3<br>4<br>5<br> | |
| </div> | |
| </div> |
| javascript:(function(){setInterval(function(){var%20i,a,s;a=document.getElementsByTagName('link');for(i=0;%20i<a.length;%20i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href){var%20h=s.href.replace(/(&|\?)forceReload\=\d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new%20Date().valueOf())}}},3000)})() |