Fandom

Sage Community Wiki

CSS:Stealth

78pages on
this wiki
Add New Page
Talk0 Share
Stealth

Stealth stylesheet for Sage

Stealth

For those times when browsing discretion is the better part of valor. The design is *cough* low key and the image hiding prevents embarassing moments

Two column format.
Individual posts have a fixed height until hovered.
On hovering, they will expand to show the entire available text (some feeds only show a post summary).
Images remain completely hidden while a post is collapsed.
When a post is expanded images are shown but with low opacity.
Hover over an image to show it fully.
Active images (where they act as a link) show with a red border.
Normal images (not clickable) show with a blue border.

Hint:
You can make a post active (and thus remain open even when not hovering) by
Clicking and dragging either the title link, or a contained image or link.
- Click on the link or image and hold the mouse button down.
- Drag the mouse a short distance (you should see the "No" symbol)
- Release the mouse button

Feel free to remix, reuse, and recycle as you wish.

Download Zipped File


/* 
Stealth

For those times when browsing discretion is the better part of valor.
The design is *cough* low key and the image hiding prevents embarassing moments
(even work-safe/appropriate sites might contain an image that could be deemed "inappropriate" by others).


Adapted from various sheets by Clive Rowe
www.cliverowe.com

Two column format.
Individual posts have a fixed height until hovered.
On hovering, they will expand to show the entire available text (some feeds only show a post summary).
Images remain completely hidden while a post is collapsed.
When a post is expanded images are shown but with low opacity.
Hover over an image to show it fully.
Active images (where they act as a link) show with a red border.
Normal images (not clickable) show with a blue border.

Hint:
You can make a post active (and thus remain open even when not hovering) by
Clicking and dragging either the title link, or a contained image or link.
- Click on the link or image and hold the mouse button down.
- Drag the mouse a short distance (you should see the "No" symbol)
- Release the mouse button

Feel free to remix, reuse, and recycle as you wish.
*/


html {
	background-color: #fff;
}
				
body {
	margin: 0 5%;
	color: #333;
	font-family: "Verdana", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	
}

a:link		{ text-decoration: underline; color: #000; }
a:visited	{ text-decoration: underline;  color: #666; }
a:hover		{ text-decoration: none; }
a:active	{ text-decoration: none; }

img {border: 2px solid #000; opacity:.05;}
img:hover {opacity: 1; border: 2px solid #00f;} /* Set the intensity of hovered images */
img:active {opacity: 1;border: 2px solid #666;}  /* Set the intensity of active (clicked) images */

acronym {cursor: help}

p.item-desc a:link { color: #ccc; }

h1 {
	color: #333;
}

#rss-header h1:before
{
    content: "Newsfeed:";
    color: #24446b;
    margin-right: 5px;
    border-color: #24446b;
    border-top: 2px solid #24446b;
    border-bottom: 2px solid #24446b;
}

#rss-header {
	margin: 1%;
	padding: 1%;
	background-color: #eee;
	color: #000;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #222;
    border-right: 1px solid #222;
	border-radius: 0.5em;
}
#rss-header a {
	color: #000;
	text-decoration: none;
}

#rss-title {
	margin: 0;
    margin-left: 10px;
}

#rss-desc {
	color: #666;
	font-weight: bold;
	font-size: .8em;
	margin: 0;
	padding: 1%;
	margin-left: 10px;
}

div.item {
	margin: 1%;
	padding: 1%;
	background: #fff;
	float:left;
	width: 45%;
	border: 1px solid #333;
	margin: 0px 0px 8px 2%;
	padding: 0px;	
	border-radius: 0.5em;
	max-height: 20ex; /* height of each post's 'box'. Set to none to see everything (remember: not all feeds show the entire post) */
	overflow:hidden; /*Set to Auto or Scroll if you would prefer scroll bars instead of changing box height */
	clear:left;
}

/*Post 'box' will expand when hovered */
div.item:hover, div.item:active {
	height: auto;
	max-height: none;
}

/*Hides images in post summary until hovered */
div.item img {
	display:none;
}
/* Shows previously hidden images when you hover over a post using the img{... settings above */
div.item:hover img, div.item:active img {
	display:inherit;
}

div.item:nth-of-type(2n+1) {
	clear:right;
}

h2.item-title {
	font-size: .9em;
	font-weight: normal;
	margin: 0;
	padding: 1%;
	clear: both;
	color: #444;
	background: #e3e3e3;
	border-bottom: 1px dotted #999;
	border-radius: 0.5em 0.5em 0 0;
}

h2.item-title a {
	text-decoration: none;
	font-weight: bold;
	color:#333;
}
h2.item-title a:visited {
	color: #777;
}

h2.item-title a:link:hover, h2.item-title a:link:active {
	text-decoration: underline;
}

h2.item-title a:visited:hover, h2.item-title a:visited:active {
	text-decoration: underline;
}

span.item-ordinal {
    font-family: "Times New Roman", serif;
    font-size: 1.2em;
	background: #24446b;
	color: #fff;
	font-weight: bold;
	margin: 5px .5em 1em 0;
	padding: 0 5px 0 5px;
	border-radius: 0.5em;
}

div.item-desc {
	font-size: .8em;
	margin: 0;
	padding: 1%;
}

div.item-desc a { text-decoration: underline; }
div.item-desc a:hover { text-decoration: none; }

div.item-pubDate {
	font-size: x-small;
	color: #999;
	padding: 1%;
}

div.item-technorati {
	float: right;
	clear: both;
	text-align: right;
	padding-right: 5px;
}

div.item-desc img {
	max-width: 97%;
	height: auto;
	margin: 0.2em .5em .2em .2em;
	padding: 1px;
}
div.item-desc a img  {
	border: 2px solid #000;
}
div.item-desc a:hover img {
	border: 2px solid #f00;
}

div.item-footer {
	background: #eee;
	border: 1px dotted #999;
	margin: 10px;
	padding: 10px;
	clear: both;
}

div.item-category {
	font-size: .65em;
	font-family: ariel;
	color: #666;
	display: none;
}
div.item-author { 
	font-family: ariel;
	color: #444;
}

div.item-pubDate { 
	color: #24446b;
}

blockquote {
	background-color: #deeeff;
	border-right: 2px solid #b8d8df;
    border-bottom: 2px solid #b8d8df;	
	padding: 5px;
}

blockquote[cite]:after {
  color: #008;
  content: "Quote: " attr(cite);
  display: block;
  border-top: 1px solid #999;
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0;
  font-size: .8em;
  text-align: right;
  }

blockquote P:first-letter, cite P:first-letter {
	font-weight: bold;
}
blockquote blockquote {
	background-color: #eeeeff;
	border-right: 2px solid #8888aa;
    border-bottom: 2px solid #888899;	
	padding: 5px;
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.