Created
November 10, 2009 13:16
-
-
Save fearphage/230883 to your computer and use it in GitHub Desktop.
Replacement view for RSS feeds in Opera
This file contains 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
<?xml version="1.0" encoding="utf-8"?> | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > | |
<head> | |
<!-- | |
Thanks to all contributors: Ayush, shoust | |
--> | |
<title>...</title> | |
<style type="text/css" media="screen,projection,tv,handheld,print,speech"> | |
html, body { | |
margin:0; | |
padding:0; | |
border:0; | |
} | |
body { | |
color:#000; | |
background:#fff; | |
font:normal normal .9em/1.5em sans-serif; | |
font-family: Helvetica, sans-serif; | |
padding:1em 0; | |
} | |
body[class]:after { | |
position:fixed; | |
top:0; | |
left:0; | |
right:0; | |
bottom:0; | |
background:#fff; | |
content:attr(class); | |
text-transform:uppercase; | |
padding-top:30%; | |
text-align:center; | |
} | |
h1 { | |
font-size:1.8em; | |
line-height:1.8em; | |
display:inline; | |
text-shadow:0px 0px 4px #ddd; | |
margin: 0 0 0 20px; | |
} | |
a { text-decoration:none; } | |
a:hover { text-decoration:underline; } | |
#items { | |
text-align:center; | |
margin:0; | |
padding:0; | |
overflow:hidden; | |
} | |
#items > ul { | |
list-style:none; | |
margin:0; | |
padding:0; | |
border:0; | |
width:auto; | |
text-align:left; | |
} | |
#items > ul > li { | |
vertical-align:top; | |
font:normal normal .8em/1.6em sans-serif; | |
margin: 8px 8px 1em 8px; | |
padding:0; | |
} | |
#items > ul > li > h2 { | |
font:normal lighter 1.66em/1.2em sans-serif; | |
margin:0; | |
color:#000; | |
text-shadow:0px 0px 4px #ddd; | |
overflow:hidden; | |
-o-text-overflow:ellipsis; | |
max-width: 32em; | |
display: inline-block; | |
white-space: nowrap; | |
} | |
#items > ul > li > h2 > a { | |
color:inherit; | |
padding:0; | |
} | |
#items > ul > li a { | |
color:#b00; | |
} | |
#items > ul > li > div.content { | |
border-top:1px solid #ccc; | |
text-align:justify; | |
margin:1em 0 0 0; | |
padding:1em 0 3em 0; | |
color:#555; | |
vertical-align:top; | |
clear: both; | |
overflow: hidden; | |
} | |
#items > ul > li > div p { | |
margin:0 0 2em 0; | |
} | |
#items > ul > li > div a { | |
font-style:italic; | |
margin-right:.25em; | |
} | |
#items > ul > li > div img { | |
display:none; | |
} | |
#items > ul > li > div img[src] { | |
float:left; | |
display:inline-block; | |
border:1px solid #aaa; | |
padding:1px; | |
margin:1px; | |
margin:1px 8px 8px 1px; | |
max-width:100%; | |
} | |
#items > ul > li > div a img[src] { | |
border-color:#a00; | |
} | |
#items > ul > li > div a:hover img { | |
border-width:2px; | |
margin:0px 7px 7px 0px; | |
} | |
#here { | |
color:#555; | |
font-size:.85em; | |
} | |
.mini-view .feedEntry { | |
clear: left; | |
} | |
.summary { | |
display: none; | |
} | |
.mini-view .summary { | |
font-size: 12px; | |
margin: 0; | |
color: gray; | |
overflow: hidden; | |
-o-text-overflow: ellipsis; | |
display: block; | |
} | |
.mini-view .author, .mini-view .content { | |
display: none; | |
} | |
.mini-view h2, .mini-view .summary, .mini-view .pubDate { | |
font-family: Trebuchet MS, Tahoma, Verdana !important; | |
} | |
div#items.mini-view > ul > li > h2 { | |
font-size: 14px; | |
text-shadow: none; | |
float: left; | |
margin-right: .8em; | |
font-weight: bold; | |
} | |
div.mini-view { | |
white-space: nowrap; | |
} | |
.mini-view .summary { | |
overflow: hidden; | |
-o-text-overflow: ellipsis; | |
font-weight: bold; | |
} | |
.mini-view#items > ul > li { | |
margin-top: 6px; | |
margin-bottom: 6px; | |
} | |
div.mini-view#items > ul > li:first-child { | |
margin-top: 8px; | |
} | |
</style> | |
<script type="text/javascript"> | |
/* <![CDATA[ */ | |
// settings: | |
showFullText = false; | |
function addEvent(node, eventName, fn) { | |
node.addEventListener(eventName, fn, false); | |
} | |
String.prototype.trim = function() { | |
return this.replace( /^\s+|\s+$/g, '' ); | |
} | |
/* | |
* whiteList | |
* tags + attributes and method to validate them | |
*/ | |
HTMLElement.prototype.whiteList = { | |
A: { | |
href: function( node ) { | |
this.value = this.value.replace(/\s/g, ''); | |
return null!=this.value.match( /https?:\/\//i ); | |
}, | |
title: function(node) { return true; } | |
} | |
,IMG: { | |
src:function( node ) { | |
return null!=this.value.match( /http:\/\//i ); | |
}, | |
alt:function(node) { return true; } | |
} | |
,'P':{} | |
,'UL':{} | |
,'OL':{} | |
,'LI':{} | |
,'DL':{} | |
,'DT':{} | |
,'H1':{} | |
,'H2':{} | |
,'H3':{} | |
,'H4':{} | |
,'H5':{} | |
,'H6':{} | |
,'BR':{} | |
,'STRONG':{} | |
} | |
/** | |
* Prototype extension to simplify adding and sanitizing markup to an element. | |
* arguments = some strings containing the HTML markup to sanitize and append | |
*/ | |
HTMLElement.prototype.appendMarkup = function() | |
{ | |
var dummy = document.createElement('div'); | |
dummy.innerHTML = arguments.join(''); | |
dummy.sanitize(); | |
// append DOM tree of dummy in this | |
var i = 0, node; | |
while ((showFullText || (this.text.length<512)) && (node=dummy.childNodes[i])) { | |
this.appendChild(node.cloneNode( true )); | |
i++; | |
} | |
if (node) { | |
this.appendChild(document.createTextNode( '...' )); | |
} | |
return this; | |
} | |
/** | |
* Prototype extension to sanitize the attributes and HTMLElements | |
* whiteList = { 'NODENAME_0':['attribute_0','attribute_1'] } | |
*/ | |
HTMLElement.prototype.sanitize = function(whiteList, parent) | |
{ | |
var whiteList = whiteList||this.whiteList; | |
// recurse | |
for (var i = 0, previousNodeName = '/', nodeName, currentNode; currentNode = this.childNodes[i]; i++, previousNodeName = nodeName, previousNode = currentNode) { | |
nodeName = currentNode.nodeName; | |
if ((currentNode.nodeType == 1) && | |
(!whiteList[nodeName] || ( (nodeName == 'BR') && ( previousNodeName=='P') ) ) ) | |
{ | |
// either it's not in the whiteList or an extra BR -> replace currentNode by its content | |
while (currentNode.firstChild) { | |
this.insertBefore( currentNode.firstChild.cloneNode( true ), currentNode ); | |
currentNode.removeChild(currentNode.firstChild); | |
} | |
this.removeChild( currentNode ); | |
} | |
else | |
{ | |
if( currentNode.nodeType==1 ) | |
{ | |
// in the nodeNamesWhiteList | |
// -> sanitize the attributes | |
for( var j=currentNode.attributes.length,attribute; attribute=currentNode.attributes[--j]; ) | |
{ | |
if( 'undefined' ==typeof(whiteList[nodeName][attribute.name]) | |
|| false ==whiteList[nodeName][attribute.name].apply(attribute,[currentNode]) ) | |
{ | |
currentNode.removeAttribute( attribute.name ); | |
} | |
} | |
// -> and recurse | |
currentNode.sanitize( whiteList ); | |
previousNodeName = nodeName; | |
} | |
} | |
} | |
} | |
Number.prototype.pad = function(length) { | |
if (!length || (length <= ('' + this).length)) | |
return '' + this; | |
var str = '0' + this; | |
while (str.length < length) { | |
str = '0' + str; | |
} | |
return str; | |
} | |
String.prototype.to12HourTime = function(includeSeconds) { | |
var pieces = this.split(':'), ampm = ' AM', tmp; | |
if (pieces.length < 2) | |
return '12:00 AM'; | |
if ((tmp = parseInt(pieces[0])) > 12) { | |
tmp -= 12; | |
ampm = ' PM'; | |
} | |
return tmp + ':' + pieces[1] + (includeSeconds && (pieces.length == 3) ? ':' + pieces[2] : '') + ampm; | |
} | |
function changeArticleLength(len) { | |
var itemsUl = document.getElementById('itemsUl'); | |
var contentDivs = itemsUl.selectNodes('li/div[@class="content"]'), | |
val = len/100; | |
for(var i=0, div; div=contentDivs[i]; i++){ | |
if(!div.orig_height) | |
div.orig_height = parseFloat(getComputedStyle(div,null).height); | |
if(!div.orig_paddingBottom) | |
div.orig_paddingBottom = parseFloat(getComputedStyle(div,null).paddingBottom); | |
div.style.height = (val * div.orig_height) + 'px'; | |
div.style.paddingBottom = (val * div.orig_paddingBottom) + 'px'; | |
} | |
if(! +len) | |
itemsUl.parentNode.className = 'mini-view' | |
else if(itemsUl.parentNode.className.indexOf('mini-view')!=-1) | |
itemsUl.parentNode.className = ''; | |
/* scrollbar adjust | |
var width = document.body.offsetWidth - window.innerWidth; | |
if ( width < 0)*/ | |
} | |
function filterFeed(criteria) { | |
} | |
function searchFeed(needle) { | |
var parent = document.getElementById('itemsUl'), needle = needle.replace(/\W/g, '\\$1'), showAll = !needle.length, total = 0; | |
//opera.postError('in search: needle = ' + needle + ' / showall = ' + showAll + ' / childNodes.length = ' + parent.childNodes.length); | |
/*Array.prototype.forEach(parent.childNodes, [function(elem) { | |
opera.postError('test'); | |
var nodes = elem.selectNodes('.//*[contains(translate(text(), "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz"), "' + needle + '")]'); | |
opera.postError('iterating... ' + nodes.length); | |
elem.style.display = (showAll || nodes.length ? 'list-item' : 'none'); | |
}] | |
);*/ | |
for (var i = 0, elem, nodes; elem = parent.childNodes[i]; i++) { | |
nodes = elem.selectNodes('.//*[contains(translate(text(), "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz"), "' + needle + '")]'); | |
if (showAll || nodes.length) { | |
elem.style.display = ''; | |
total++; | |
} | |
else | |
elem.style.display = 'none'; | |
} | |
var count = document.getElementById('count'); | |
count.replaceChild(document.createTextNode(total), count.firstChild); | |
} | |
function sortFeed(method) { | |
if (method == sortFeed.method) | |
return; | |
var compare = function(a, b) { | |
if (a < b) return -1; | |
if (a > b) return 1; | |
return 0; | |
}, fn; | |
items = Array.prototype.slice.apply(theFeed.entries, [0]); | |
switch(method) { | |
case 'title': | |
fn = function(a,b) { | |
return compare(a.title.data.trim(), b.title.data.trim()); | |
}; | |
break; | |
case 'source': | |
fn = function(a,b) { | |
return compare(a.author.trim(), b.author.trim()); | |
}; | |
break; | |
case 'date': | |
fn = function(a,b) { | |
return compare(b.publicationDate.getTime(), a.publicationDate.getTime()); | |
}; | |
break; | |
default: | |
return; | |
} | |
Array.prototype.sort.apply(items, [fn]); | |
var copy = {} | |
for (var key in theFeed) | |
copy[key] = theFeed[key]; | |
copy.entries = items; | |
__outputFeed(copy); | |
sortFeed.method = method; | |
return; | |
} | |
sortFeed.method = 'date'; | |
/* | |
* outputFeed | |
*/ | |
function outputFeed(feed, status) { | |
if (!feed) { | |
var statusName = ['NO FEED ITEMS','CANCELED','REFRESH POSTPONED','NOT MODIFIED','OUT OF MEMORY','SERVER TIMEOUT','LOADING ERROR','PARSING ERROR'] | |
document.body.className = 'error #'+ status +' ( '+ statusName[ status ] +' )'; | |
return false; | |
} | |
itemTemplate = document.createElement('li'); | |
itemTemplate.className = 'feedEntry'; | |
itemTemplate.appendChild(document.createElement('h2')); | |
itemTemplate.firstChild.appendChild( document.createElement('a')); | |
itemTemplate.appendChild(document.createElement('div')).className = 'miniDate'; | |
itemTemplate.appendChild(document.createElement('div')).className = 'summary'; | |
itemTemplate.appendChild(document.createElement('div')).className = 'author'; | |
itemTemplate.appendChild(document.createElement('div')).className = 'pubDate'; | |
itemTemplate.firstChild.firstChild.appendChild(document.createTextNode('...')); | |
itemTemplate.appendChild(document.createElement('div')).className = 'content'; | |
// set title | |
top.document.title = document.getElementById('feedTitle').firstChild.nodeValue = document.createElement( 'div' ).appendMarkup(feed.title.data ).textContent.trim(); | |
return __outputFeed(feed); | |
} | |
function __outputFeed(feed) { | |
var hItemsUl = document.getElementById('itemsUl'), count = document.getElementById('count'); | |
if (!feed || !hItemsUl || !count) | |
return false; | |
var itemsFragment = document.createDocumentFragment(); | |
// walk the feed items | |
for (var i = 0, feedEntry; feedEntry = feed.entries[i]; i++) { | |
var itemLi = itemTemplate.cloneNode( true ); | |
itemLi.firstChild.firstChild.setAttribute('href', feedEntry.uri || '#'); | |
if (feedEntry.author) | |
itemLi.childNodes[3].appendChild(document.createTextNode(feedEntry.author)); | |
if (feedEntry.publicationDate) { | |
var pieces = feedEntry.publicationDate.toString().split(' ') | |
,date = document.createTextNode(pieces.slice(1,3).join(' ') + ', ' + pieces.slice(4,5).join('').to12HourTime()); | |
itemLi.childNodes[1].appendChild(date.cloneNode(false)); | |
itemLi.childNodes[4].appendChild(date); | |
} | |
// set the title | |
itemLi.firstChild.firstChild.firstChild.nodeValue = document.createElement('div').appendMarkup(feedEntry.title.data).textContent.trim(); | |
// write content | |
if (feedEntry.content.isMarkup) | |
itemLi.lastChild.appendMarkup(feedEntry.content.data.trim()); | |
else if (feedEntry.content.isPlainText) | |
itemLi.lastChild.appendChild(document.createTextNode(feedEntry.content.data.trim())); | |
else | |
itemLi.lastChild.appendChild(document.createTextNode(feedEntry.content.data)); | |
itemLi.childNodes[2].appendChild( document.createTextNode( itemLi.lastChild.textContent ) ); | |
// append itemLi to itemsFragment | |
itemsFragment.appendChild(itemLi); | |
} | |
hItemsUl.innerHTML = ''; | |
hItemsUl.appendChild(itemsFragment); | |
count.replaceChild(document.createTextNode(feed.entries.length), count.firstChild); | |
document.body.removeAttribute('class'); | |
return true; | |
} | |
window.addEventListener('load' | |
,function() { | |
var here = document.getElementById('here'); | |
for (var i = 0; theFeed = opera.feeds.allFeeds[i++]; ) { | |
if (theFeed.uri == location.href) { | |
here.firstChild.nodeValue = here.href = theFeed.uri; | |
break; | |
} | |
} | |
outputFeed(theFeed); | |
addEvent(document.getElementById('native'), 'click', function(e) { | |
e.preventDefault(); | |
opera.feeds.subscribeNative(location.href); | |
}); | |
addEvent(document.getElementById('search'), 'keypress', function(e) { | |
if ((e.keyCode == 13) || (e.target.value == '')) { | |
searchFeed(e.target.value); | |
} | |
}); | |
var escapedLocation = escape(location.href); | |
Array.prototype.forEach.apply(document.selectNodes('//a[@rel="external"]'), [function(elem) { | |
elem.href += escapedLocation; | |
}]); | |
var sortCategories = document.selectNodes('//div[@rel="sort"]'); | |
Array.prototype.forEach.apply(sortCategories, [function(elem) { | |
var method = elem.firstChild.nodeValue.toLowerCase(), regex = /\sselected/; | |
addEvent(elem, 'click', function() { | |
Array.prototype.forEach.apply(sortCategories, [function(elem) { elem.className = elem.className.replace(regex, '') }]); | |
elem.className += ' selected'; | |
sortFeed(method); | |
}); | |
}]); | |
document.getElementById('external').href = 'feed://' + location.href.replace(/https?\:\/\//, ''); | |
function doChange(e) { | |
var slider = document.getElementById('slider'), direction = e.target.id; | |
changeArticleLength(slider.value = Math.max(parseInt(slider.value) + ((direction == 'smaller' ? -1 : 1) *10), 0)); | |
} | |
['smaller', 'bigger'].forEach(function(name) { | |
addEvent(document.getElementById(name), 'click', doChange); | |
}); | |
addEvent(document.getElementById('slider'), 'change', function(e) { | |
changeArticleLength(e.target.value); | |
}); | |
document.getElementById('external').href = 'feed://' + location.href.replace(/https?\:\/\//, ''); | |
} | |
,false | |
); | |
/* ]]> */ | |
</script> | |
<style type="text/css"> | |
#side_panel { | |
background-color: #eee; | |
width: 200px; | |
position: fixed; | |
top: 64px; | |
right: 0; | |
padding: 14px 8px 10px 10px; | |
height: 100%; | |
border-left: 1px solid #000; | |
line-height: 1.1em; | |
font-size: 0.9em; | |
font-weight: 600; | |
} | |
@media screen and (max-width: 600px) { | |
#side_panel { | |
position: relative; | |
width: 98%; | |
} | |
#items { | |
margin-right: 0px !important; | |
} | |
#sort *, #timespans *, #feedActions *, #slidergroup *, #filtergroup * { | |
display:inline !important; | |
} | |
#search, #sliderdiv { | |
max-width:50%; | |
} | |
} | |
#counts { | |
margin:0; | |
font-size:1.5em; | |
line-height:1.5em; | |
display:inline; | |
text-shadow:0px 0px 4px #ddd; | |
float: right; | |
margin-right: 20px; | |
} | |
#items { | |
margin-right: 220px; | |
margin-top: 60px; | |
} | |
#search { | |
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAADGUlEQVR4XqWTfUhbVxjG33M/EuNHxaJVR6Gjm+BfY5udit3KoNDRsXWOTXRQB1tsV3NvPmqnk2KrQrWNG7UflEJl62QwdND+M9oyupXimqaLc53SicRuYSYuxnzJjYm5ubnn3b2jkU3Wv/rAc3h44fnxHg4HNqqru3Pc7hCTjsNWanMIaLVbVo/2dF+Ex4jJhU+6O3dZ7WK66d2mJkFw5LcdEMF8wAaWdkdB4763PxJtwpoGavhfQG9/z0tpee22VbQbJ39fU85/H5JGJ1PZUU8Szt5ckqb9stLhOJK3upr48cRA/wuwUaLNkvR6vTj0tSvTcfk+dc+FowvhZNgXSmSv3vP/0XH5F/X0mEuen59Hwdqe+M8GPcePdu1seJm/89tyZkk2cW27t4ee3lJI840szzEMPFNRRKsqi1z+lImf8cUz9XX1XG//MXsOwEWjEWfNizXw2fW/YE9taYZloFRWVMiqgCpFVlXV0lBcVgiQ4IMQPNVSWwd33a4zAHD2HwDP80iBIQWbiiHPwM1IawqTp6LMsSRDKVZ9cyfgVCgtBISSFYX72GTKB72zvgGlNGvkNQ6DOL+YWGJIEVNSCKqcUYML4VRApjTCIqHAYF5WUVRZllmto6wDysvLpxYXF3cUGwzE649s9kdSd5GBZUKYEKFYygIkgWBBLLz8SvW2zSQWi8oVFZX3cgCG47iRW7d/CL5RU86aCkwNKtIiQMIAIodAiykBQzqd3lJSVvbq3ufLmC++/FxaWYnfgn/LIh4Kjo2PRb7zPETtyXD/wLe/OkY8XfYRz1fv9V2ZOqLNXD/P4PkL5+jgyYHkofaDUlPzO5V6l+jHqaGB5wKBwE9Vz1ZHXm9s2XpzOgQLMQUzlJCqMh52VZfAheETdN+bbzFT96cgHo9RSZIiBt7wGujKQbRNAr19xx4OnxlemJiYkHw+HzqHnHNtBz/8s7W11Wy1CXjjxjV0fnoK3W63KlotCBukgz7QfF20tSc1o571GWgSBGFQL01OenB2dhb1TB7zwXSTR85dFfVgNpvfN+UbLz2aNcOT6m83ZIbg1M0CKwAAAABJRU5ErkJggg==) no-repeat 2px 2px; | |
margin: 0; padding: 2px 2px 2px 22px; | |
width: 90%; | |
height: 22px; | |
border: 1px solid #AAA; box-sizing: border-box; | |
} | |
#slider { | |
width: 64%; | |
background-color: #ddd; | |
background-color: transparent; | |
/*background-image: url('http://www.rikkertkoppes.com/modules/interfacing/wf2.0/slider2-h.gif');*/ | |
border: 1px solid silver; | |
} | |
@media print { | |
#side_panel, #heading { display: none } | |
} | |
div#bigger, div#smaller { | |
display: inline-block; | |
content:'\a0'; | |
overflow:hidden; | |
vertical-align:middle; | |
background-repeat: no-repeat; | |
width:16px; | |
height:16px; | |
border: 1px solid transparent; | |
} | |
div#bigger:hover, div#smaller:hover { | |
border-color: #000; | |
} | |
div#bigger { | |
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM1MO6znwAAACdJREFUOE9jYBgFNAmBBqCp+DBNLEUxFJfttLcZZsNoGNAvrKlkEwAzpQ4BJOO3lgAAAABJRU5ErkJggg==); | |
} | |
div#smaller { | |
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM1MO6znwAAACBJREFUOE9jYBgFwzQEGoD+wodp721cttPe5lEbyAwBAJvTBwFEvjULAAAAAElFTkSuQmCC); | |
} | |
.group { | |
margin-bottom: 14px | |
} | |
.group > div, .group > a { | |
margin-left: 10px; | |
color: #555; | |
} | |
.group div[class], #side_panel .group div[id] { | |
margin-left: 0; | |
color: #000; | |
} | |
.group > div.choice { | |
margin-left: 10px; | |
color: #555; | |
} | |
.group > div.choice:hover, .group > div.selected:hover { | |
text-decoration: underline; | |
cursor: pointer; | |
margin-left: 10px; | |
} | |
#side_panel .group > div.selected { | |
font-weight: bold; | |
color: #b00; | |
margin-left: 10px; | |
} | |
.group .grouptitle { font-weight: bold; font-size: 110%; } | |
#wrapper { | |
background: #a00 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAADACAYAAAAjiMLcAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAA6SURBVHja7NAhDgAwCARBaIrv/z97RRIMArubnBl5Lslqx1oAAAAAMILnosLNvQ7BYwAAAMAOvgADAGubBJq5vUivAAAAAElFTkSuQmCC) repeat-x center center; | |
color: #fff; | |
padding:8px; | |
margin:0; | |
border: 1px solid #000; | |
border-width: 0 0 1px 0; | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index:9999; | |
width: 100%; | |
} | |
#feedTitle { | |
-o-text-overflow: ellipsis; | |
white-space: nowrap; | |
display: block; | |
overflow: hidden; | |
} | |
#heading { display: none } | |
div.author, div.pubDate, .miniDate { | |
overflow: hidden; | |
-o-text-overflow: ellipsis; | |
white-space: nowrap; | |
margin: 0 1em 0 2em; | |
font-size: 120%; | |
font-weight: bold; | |
color: #aaa; | |
display: inline-block; | |
max-width: 180px; | |
} | |
#feedActions a { | |
display: block; | |
} | |
.miniDate { | |
float: right; | |
display: none; | |
margin: 0 0 0 1em; | |
} | |
.mini-view .miniDate { display: block } | |
.mini-view .pubDate { display: none } | |
</style> | |
</head> | |
<body class='loading'> | |
<div id="wrapper"> | |
<div id="counts">Total <span id="count">0</span></div><h1 id="feedTitle">Title of the news feed</h1> | |
</div> | |
<div id="heading">Fallback content in case the method <code>opera.feeds.subscribeNative()</code> is not available.</div> | |
<div id="side_panel"> | |
<div class="group" id="filtergroup"> | |
<div class="grouptitle">Search Articles:</div> | |
<input type="text" id="search" /> | |
</div> | |
<div class="group" id="slidergroup"> | |
<div class="grouptitle">Article Length:</div> | |
<div id="sliderdiv"> | |
<div id="smaller"></div> | |
<input id="slider" type="range" min="0" value="100" max="100" onchange="changeArticleLength(this.value)"/> | |
<div id="bigger"></div> | |
</div> | |
</div> | |
<div class="group" id="sort"> | |
<div class="grouptitle">Sort By:</div> | |
<div class="choice selected" rel="sort">Date</div> | |
<div class="choice" rel="sort">Title</div> | |
<div class="choice" rel="sort">Source</div> | |
</div> | |
<div class="group" id="timespans"> | |
<div class="grouptitle">Recent Articles:</div> | |
<div class="choice selected">All</div> | |
<div class="choice">Today</div> | |
<div class="choice">Yesterday</div> | |
<div class="choice">Last Seven Days</div> | |
<div class="choice">This Month</div> | |
<div class="choice">Last Month</div> | |
</div> | |
<!--<div class="group" id="sourcelist"> | |
<div class="grouptitle">Source:</div> | |
<div>Source</div> | |
</div>--> | |
<div class="group" id="feedActions"> | |
<div class="grouptitle">Actions:</div> | |
<a href="#subscribe" id="native">Subscribe in Opera</a> | |
<a href="feed://" id="external">Subscribe External</a> | |
<a href="http://www.bloglines.com/sub/" rel="external">Add to Bloglines</a> | |
<a href="http://fusion.google.com/add?feedurl=" rel="external">Add to Google</a> | |
<a href="http://feeds.my.aol.com/add.jsp?url=" rel="external">Add to My AOL</a> | |
<a href="http://add.my.yahoo.com/rss?url=" rel="external">Add to My Yahoo</a> | |
<a href="http://www.netvibes.com/subscribe.php?url=" rel="external">Add to Netvibes</a> | |
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=" rel="external">Add to NewsGator</a> | |
<a href="mailto:?subject=Check+out+this+RSS+Feed&body=" rel="external">Mail Link to This Feed</a> | |
<a href="#bookmark" id="bookmark" rel="sidebar">Add Bookmark…</a> | |
</div> | |
</div> | |
<div id="items"> | |
<ul id="itemsUl"></ul> | |
</div> | |
<div style="clear: both">This page was generated by Opera from <a id="here" href="#">here</a></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment