diff options
| -rw-r--r-- | bookmarklet/ffffallback-logo.png | bin | 1742 -> 1793 bytes | |||
| -rw-r--r-- | bookmarklet/ffffallback.css | 51 | ||||
| -rw-r--r-- | bookmarklet/ffffallback.js | 9 | ||||
| -rw-r--r-- | secret.html | 4 |
4 files changed, 43 insertions, 21 deletions
diff --git a/bookmarklet/ffffallback-logo.png b/bookmarklet/ffffallback-logo.png Binary files differindex 0181fd2..4c9c675 100644 --- a/bookmarklet/ffffallback-logo.png +++ b/bookmarklet/ffffallback-logo.png diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css index 492862f..896c6ce 100644 --- a/bookmarklet/ffffallback.css +++ b/bookmarklet/ffffallback.css @@ -12,30 +12,48 @@ } #ffffallback-controller .ffffallback-more-values { - background: #666; - color: #ccc; - margin-left: 30px; - width: 141px; + margin-left: 0px; + width: 160px; } #ffffallback-controller .collapsed .ffffallback-more-values { display: none; } -#ffffallback-controller .expanded .ffffallback-disclosure { - -moz-transform: rotate(90deg); - -webkit-transform: rotate(90deg); +#ffffallback-controller .expanded .ffffallback-disclosure span{ + -moz-transform: rotate(-180deg); + -webkit-transform:rotate(-180deg); + text-shadow:rgba(0,0,0,0.8) 0 1px 0; + position:relative; + top:6px; } - #ffffallback-controller .ffffallback-disclosure { - color: #ccc; + display:inline-block; + margin-left:2px; + height:27px; + width:20px; + position:relative; + top:-7px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +#ffffallback-controller .ffffallback-disclosure:hover { + background:#2a2a2a; +} +#ffffallback-controller .ffffallback-disclosure span{ + color: #777; display: inline-block; + font-size:12px; + position:relative; + left:4px; + top:7px; text-decoration: none; - width: 16px; + text-shadow:rgba(0,0,0,0.8) 0 -1px 0; -moz-transition-property: -moz-transform; -moz-transition-duration: 0.125s; -webkit-transition-property: -webkit-transform; - -webkit-transition-duration: 0.125s; + -webkit-transition-duration: 0.25s; } #ffffallback-content-container * { @@ -62,7 +80,7 @@ body.ffffallback-hide-original #ffffallback-content-container { right: 0px; top: 0px; background:rgba(0,0,0,0.8); - -webkit-box-shadow: rgba(0,0,0,0.5) 0 2px 5px; + -webkit-box-shadow: rgba(0,0,0,0.5) 0 0 3px; color:rgba(255,255,255,0.9); font: 13px/1em normal helvetica, arial, sans-serif !important; width: 220px; @@ -78,6 +96,8 @@ body.ffffallback-hide-original #ffffallback-content-container { #ffffallback-controller h1 { color:#313131; + background-color: #cecece; + background-image: -moz-linear-gradient(0deg, #cecece, #b3b3b3); background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #cecece ), to( #b3b3b3 )); border-bottom:1px solid rgba(0,0,0,0.2); text-shadow:rgba(255,255,255,0.6) 0 1px 0; @@ -145,6 +165,7 @@ body.ffffallback-hide-original #ffffallback-content-container { border-bottom-left-radius: 3px; -webkit-box-shadow: rgba(225, 225, 225, 0.4) 0px 1px 0px; } + #ffffallback-radios label+label { border: 1px solid #555; border-width: 1px; @@ -181,7 +202,7 @@ body.ffffallback-hide-original #ffffallback-content-container { margin-top: 0; height: 100% !important; max-height: 500px; - overflow-y: scroll; + overflow-y: auto; -moz-box-shadow: inset 0 2px 5px black; -webkit-box-shadow: inset 0 2px 5px black; -o-box-shadow: inset 0 2px 5px black; @@ -216,14 +237,14 @@ body.ffffallback-hide-original #ffffallback-content-container { list-style: none; margin: 0; margin-top: 1em; - padding:0 1em 1em 1em; + padding:0 0 1em 1em; } #ffffallback-fonts li b { display: block; } -#ffffallback-fonts li input { +#ffffallback-fonts li input, #ffffallback-fonts li textarea { display: inline-block; -webkit-box-shadow: rgb(68, 68, 68) 0px 1px 0px; background: rgb(102, 102, 102); diff --git a/bookmarklet/ffffallback.js b/bookmarklet/ffffallback.js index 2eb4dd3..8ae74ab 100644 --- a/bookmarklet/ffffallback.js +++ b/bookmarklet/ffffallback.js @@ -1,4 +1,8 @@ (function() { + if(navigator.userAgent.indexOf('MSIE') >= 0) { + return alert('FFFFALLBACK only works in Chrome, Safari, and Firefox right now. :(\n\nSorry,\n - Mark'); + } + if(typeof(console) == 'undefined') { var console = { log: function(message) { @@ -312,7 +316,7 @@ var fontClass, row; $.each($.getAllFontsInUse(document.body), function(font) { fontClass = $.getClassForFont(font); - row = $.createElementWithContent('li', '<b>' + font + '</b><a href="#" class="ffffallback-disclosure">►</a><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><textarea class="ffffallback-more-values" placeholder="More CSS styles"></textarea>'); + row = $.createElementWithContent('li', '<b>' + font + '</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><a href="#" class="ffffallback-disclosure"><span>▼</span></a><textarea class="ffffallback-more-values" placeholder="More CSS styles"></textarea>'); row.setAttribute('class', 'collapsed'); $.event(row.getElementsByClassName('ffffallback-disclosure')[0], 'click', function() { if($.isClassOnElement('collapsed', row)) { @@ -329,7 +333,6 @@ $.event(document.getElementById('ffffallback-display-mode-original'), 'click', function() { $.removeClassFromElement('ffffallback-hide-original', document.body); $.addClassToElement('ffffallback-hide-fallback', document.body); - //below is Josh's handywork... I have no idea how to toggle... plz help Mark $.each(document.getElementsByClassName('radio-checked'), function(elem) { $.removeClassFromElement('radio-checked', elem); @@ -341,7 +344,6 @@ $.event(document.getElementById('ffffallback-display-mode-both'), 'click', function() { $.removeClassFromElement('ffffallback-hide-original', document.body); $.removeClassFromElement('ffffallback-hide-fallback', document.body); - //below is Josh's handywork... I have no idea how to toggle... plz help Mark $.each(document.getElementsByClassName('radio-checked'), function(elem) { console.log('Oh elem is!', elem); $.removeClassFromElement('radio-checked', elem); @@ -352,7 +354,6 @@ $.event(document.getElementById('ffffallback-display-mode-fallback'), 'click', function() { $.addClassToElement('ffffallback-hide-original', document.body); $.removeClassFromElement('ffffallback-hide-fallback', document.body); - //below is Josh's handywork... I have no idea how to toggle... plz help Mark $.each(document.getElementsByClassName('radio-checked'), function(elem) { $.removeClassFromElement('radio-checked', elem); }); diff --git a/secret.html b/secret.html index df3f1fd..f6d6d69 100644 --- a/secret.html +++ b/secret.html @@ -56,7 +56,7 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> - <!-- <script src="bookmarklet/ffffallback.js"></script> - <link rel="stylesheet" href="bookmarklet/ffffallback.css" /> --> + <script src="bookmarklet/ffffallback.js"></script> + <link rel="stylesheet" href="bookmarklet/ffffallback.css" /> </body> </html> |
