Update look and feel of the style guides

This commit is contained in:
robbyw@google.com 2010-07-12 21:58:39 +00:00
parent e5aeb8fb72
commit 52f62a450b
4 changed files with 131 additions and 2786 deletions

View File

@ -1,102 +0,0 @@
body {
background-color: #FFF;
color: #666;
font-family: sans-serif;
font-size: 10pt;
margin-right: 100px;
margin-left: 100px;
}
h1, h2, h3, h4, h5, h6, .toc_title {
color: #06C;
margin-top: 2em;
margin-bottom: 1em;
}
h1 {
text-align: center;
font-size: 18pt;
}
h2, .toc_title {
font-weight: bold;
font-size: 12pt;
margin-left: -40px;
}
h3, h4, h5, h6 {
font-size: 10pt;
margin-left: -20px;
}
.toc_category, .toc_stylepoint {
font-size: 10pt;
padding-top: .3em;
padding-bottom: .3em;
}
table {
border-collapse: collapse;
}
td, th {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 5px solid #CCC;
border-right: 5px solid #CCC;
padding-left: 12px;
padding-right: 12px;
}
code,samp,var {
color: #060;
}
pre {
font-size: 10pt;
display: block;
color: #060;
background-color: #F8FFF8;
border-color: #F0FFF0;
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 5px;
padding-left: 12px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
pre.badcode {
color: #C00;
background-color: #FFF8F8;
border-color: #FFF0F0;
}
.showhide_button {
cursor: pointer;
}
.link_button {
background-color: #F8F8FF;
border-color: #F0F0FF;
border-style: solid;
border-width: 1px;
font-size: 75%;
margin-top: 20px;
margin-left: -50px;
padding: 4px;
line-height: 0px;
}
address {
text-align: right;
}
hr {
margin-top: 10em;
border-width: 1px;
color: #FFF;
}

File diff suppressed because it is too large Load Diff

View File

@ -1,13 +1,16 @@
body { body {
background-color: #ffffff; background-color: #fff;
color: black; color: #333;
margin-right: 1in; font-family: sans-serif;
margin-left: 1in; font-size: 10pt;
margin-right: 100px;
margin-left: 100px;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6, .toc_title {
color: #3366ff; color: #06c;
font-family: sans-serif; margin-top: 2em;
margin-bottom: 1em;
} }
h1 { h1 {
@ -15,105 +18,106 @@ h1 {
font-size: 18pt; font-size: 18pt;
} }
h2 { h2, .toc_title {
margin-left: -0.5in;
margin-top: 0.5in;
}
h3 {
margin-left: -0.25in;
}
h4 {
margin-left: -0.125in;
}
hr {
margin-left: -1in;
}
.h2toc {
font-size: 12pt;
color: #3366ff;
font-weight: bold; font-weight: bold;
margin-left: 0.5in; font-size: 12pt;
line-height: 200%; margin-left: -40px;
} }
.h3toc { h3, h4, h5, h6 {
font-size: 11pt; font-size: 10pt;
color: #3366ff; margin-left: -20px;
font-weight: normal;
margin-left: 1in;
} }
/* Use the <code> tag for bits of code and <var> for variables and objects. */ .toc_category, .toc_stylepoint {
code,samp,var { font-size: 10pt;
color: #005000; padding-top: .3em;
font-size: 110%; padding-bottom: .3em;
} }
PRE { table {
margin-left: 2%; border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 2px 12px;
font-size: 10pt;
}
.toc td, .toc th {
border-width: 1px 5px;
}
code, samp, var {
color: #060;
}
pre {
font-size: 10pt; font-size: 10pt;
display: block; display: block;
color: #005000; color: #060;
background-color: #fbfefb; background-color: #f8fff8;
border-color: #fafffa; border-color: #f0fff0;
border-left-width: 1px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
border-style: solid; border-style: solid;
border-top: 1px solid #fffaff; border-top-width: 1px;
border-left: 1px solid #fffaff; border-bottom-width: 1px;
border-right: 1px dotted #eff0ef; border-right-width: 1px;
border-bottom: 1px dotted #eff0ef; border-left-width: 5px;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
} }
PRE { pre.badcode {
-moz-border-radius: 12px; color: #c00;
background-color: #fff8f8;
border-color: #fff0f0;
} }
PRE.badcode { .showhide_button {
color: #CC0000; float: left;
background-color: #fffcfc; cursor: pointer;
border-right: 1px solid #f0efef; border-width: 1px;
border-bottom: 1px solid #f0efef;
border-top: 1px dotted #faffff;
border-left: 1px dotted #faffff;
}
TABLE {
border-collapse: collapse;
border-color: #dddddd;
border-style: dotted;
}
TD {
border-color: #bbbbbb;
border-style: solid; border-style: solid;
border-width: thin border-color: #ddd #aaa #aaa #ddd;
padding: 0 3px 1px;
margin: 0 4px 8px 0;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
} }
TH { .link_button {
border-collapse: collapse; float: left;
border-color: #dddddd; display: none;
border-style: none; background-color: #f8f8ff;
border-width: thin; border-color: #f0f0ff;
color: #444444; border-style: solid;
font-family: sans-serif; border-width: 1px;
font-size: 75%;
margin-top: 0;
margin-left: -50px;
padding: 4px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
} }
address { address {
text-align: right; text-align: right;
} }
hr {
margin-top: 3.5em;
border-width: 1px;
color: #fff;
}
.stylepoint_section { .stylepoint_section {
display: block;
margin-bottom: 1em;
color: #5588ff; color: #5588ff;
font-family: sans-serif; font-family: sans-serif;
font-size: 90%; font-size: 90%;
@ -129,53 +133,15 @@ address {
margin-left: -1%; margin-left: -1%;
} }
.showhide_button { .stylepoint_subsubsection {
border-color: #dddddd; color: #667799;
border-style: outset;
border-width: medium;
cursor: pointer;
font-family: sans-serif; font-family: sans-serif;
font-size: 80%;
font-weight: bold;
margin-left: 0;
} }
.revision {
.link_button { text-align: right;
background-color: #ffffd0;
border-color: #fcfca0;
border-style: solid;
border-width: 1px;
font-family: sans-serif;
font-size: 75%;
font-variant: small-caps;
margin-left: -2%;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 1px;
} }
.toc {
background-color: #fcfcff;
padding-left: 12px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
.toc_title {
font-family: sans-serif;
font-size: 110%;
font-weight: 700;
}
.toc_category {
margin-left: 5%;
font-family: sans-serif;
}
.toc_stylepoint {
margin-left: 5%;
font-family: sans-serif;
font-size: 90%;
padding-top: 5px;
padding-bottom: 5px;
}

View File

@ -32,10 +32,13 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
function ShowHideByName(bodyName, buttonName) { function ShowHideByName(bodyName, buttonName) {
var bodyElements; var bodyElements;
var linkElement;
if (document.getElementsByName) { if (document.getElementsByName) {
bodyElements = document.getElementsByName(bodyName); bodyElements = document.getElementsByName(bodyName);
linkElement = document.getElementsByName('link-' + buttonName)[0];
} else { } else {
bodyElements = [document.getElementById(bodyName)]; bodyElements = [document.getElementById(bodyName)];
linkElement = document.getElementById('link-' + buttonName);
} }
if (bodyElements.length != 1) { if (bodyElements.length != 1) {
alert("ShowHideByName() got the wrong number of bodyElements: " + bodyElements.length); alert("ShowHideByName() got the wrong number of bodyElements: " + bodyElements.length);
@ -50,9 +53,11 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
} }
if (bodyElement.style.display == "none" || bodyElement.style.display == "") { if (bodyElement.style.display == "none" || bodyElement.style.display == "") {
bodyElement.style.display = "inline"; bodyElement.style.display = "inline";
linkElement.style.display = "block";
buttonElement.innerHTML = '<xsl:value-of select="$hide_button_text"/>'; buttonElement.innerHTML = '<xsl:value-of select="$hide_button_text"/>';
} else { } else {
bodyElement.style.display = "none"; bodyElement.style.display = "none";
linkElement.style.display = "none";
buttonElement.innerHTML = '<xsl:value-of select="$show_button_text"/>'; buttonElement.innerHTML = '<xsl:value-of select="$show_button_text"/>';
} }
} }
@ -83,7 +88,8 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
if (root[i].className == 'showhide_button') { if (root[i].className == 'showhide_button') {
root[i].innerHTML = newButton; root[i].innerHTML = newButton;
} }
if (root[i].className == 'stylepoint_body') { if (root[i].className == 'stylepoint_body' ||
root[i].className == 'link_button') {
root[i].style.display = newState; root[i].style.display = newState;
} }
} }
@ -136,11 +142,12 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
<P> <P>
Each style point has a summary for which additional information is available Each style point has a summary for which additional information is available
by toggling the accompanying arrow button that looks this way: by toggling the accompanying arrow button that looks this way:
<SPAN class="showhide_button" style="margin-left: 0;"><xsl:value-of select="$show_button_text"/></SPAN>. <SPAN class="showhide_button" style="margin-left: 0; float: none">
<xsl:value-of select="$show_button_text"/></SPAN>.
You may toggle all summaries with the big arrow button: You may toggle all summaries with the big arrow button:
</P> </P>
<DIV style=" font-size: larger; margin-left: +2em;"> <DIV style=" font-size: larger; margin-left: +2em;">
<SPAN class="showhide_button" style="font-size: 180%;"> <SPAN class="showhide_button" style="font-size: 180%; float: none">
<xsl:attribute name="onclick"><xsl:value-of select="'javascript:ShowHideAll()'"/></xsl:attribute> <xsl:attribute name="onclick"><xsl:value-of select="'javascript:ShowHideAll()'"/></xsl:attribute>
<xsl:attribute name="name"><xsl:value-of select="$show_hide_all_button"/></xsl:attribute> <xsl:attribute name="name"><xsl:value-of select="$show_hide_all_button"/></xsl:attribute>
<xsl:attribute name="id"><xsl:value-of select="$show_hide_all_button"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="$show_hide_all_button"/></xsl:attribute>
@ -152,7 +159,6 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
<xsl:call-template name="TOC"> <xsl:call-template name="TOC">
<xsl:with-param name="root" select=".."/> <xsl:with-param name="root" select=".."/>
</xsl:call-template> </xsl:call-template>
<H2>Overview</H2>
<xsl:apply-templates/> <xsl:apply-templates/>
</xsl:template> </xsl:template>
@ -213,6 +219,12 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
<xsl:value-of select="$buttonName"/> <xsl:value-of select="$buttonName"/>
<xsl:text>')</xsl:text> <xsl:text>')</xsl:text>
</xsl:variable> </xsl:variable>
<SPAN class="link_button" id="link-{$buttonName}" name="link-{$buttonName}">
<A>
<xsl:attribute name="href">?showone=<xsl:value-of select="$stylepoint_name"/>#<xsl:value-of select="$stylepoint_name"/></xsl:attribute>
link
</A>
</SPAN>
<SPAN class="showhide_button"> <SPAN class="showhide_button">
<xsl:attribute name="onclick"><xsl:value-of select="$onclick_definition"/></xsl:attribute> <xsl:attribute name="onclick"><xsl:value-of select="$onclick_definition"/></xsl:attribute>
<xsl:attribute name="name"><xsl:value-of select="$buttonName"/></xsl:attribute> <xsl:attribute name="name"><xsl:value-of select="$buttonName"/></xsl:attribute>
@ -246,12 +258,6 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
<xsl:otherwise>display: none</xsl:otherwise> <xsl:otherwise>display: none</xsl:otherwise>
</xsl:choose> </xsl:choose>
</xsl:attribute> </xsl:attribute>
<SPAN class="link_button">
<A>
<xsl:attribute name="href">?showone=<xsl:value-of select="$anchor_prefix"/>#<xsl:value-of select="$anchor_prefix"/></xsl:attribute>
link
</A>
</SPAN>
<xsl:apply-templates/> <xsl:apply-templates/>
</DIV> </DIV>
</DIV> </DIV>
@ -306,6 +312,14 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
</P> </P>
</xsl:template> </xsl:template>
<xsl:template match="SUBSUBSECTION">
<P>
<xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute>
<SPAN class="stylepoint_subsubsection"><xsl:value-of select="@title"/> </SPAN>
<xsl:apply-templates/>
</P>
</xsl:template>
<xsl:template match="CODE_SNIPPET"> <xsl:template match="CODE_SNIPPET">
<DIV> <DIV>
<xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute> <xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute>