Synchronize documentation stylesheet changes to the new layout

Thom Brown

media/css/docs.css

@@ -8,6 +8,10 @@ body {
   font-size: 76%;
 }
 
+div.NAVHEADER table {
+  margin-left: 0;
+}
+
 /* Container Definitions */
 
 #docContainerWrap {
@@ -36,11 +40,12 @@ body {
   height: 83px;
   border: 0px;
   padding: 0px;
-  margin: 0px;
+  margin: 0 0 0 20px;
-  margin-left: 20px;
 }
 
-#docHeaderLogo img { border: 0px; }
+#docHeaderLogo img {
+  border: 0px;
+}
 
 #docNavSearchContainer {
   padding-bottom: 2px;
@@ -71,35 +76,38 @@ body {
 }
 
 #docSearch form {
-	position: relative;
+  position: relative;
-	top: 5px;
+  top: 5px;
-	right: 0;
+  right: 0;
-	margin: 0; /* need for IE Mac */
+  margin: 0; /* need for IE 5.5 OSX */
-	text-align: right; /* need for IE Mac */
+  text-align: right; /* need for IE 5.5 OSX */
-	white-space: nowrap; /* for Opera */
+  white-space: nowrap; /* for Opera */
 }
 
-#docSearch form label { color: #666; font-size: 0.95em; }
+#docSearch form label {
-#docSearch form input { font-size: 0.95em; }
+  color: #666;
-	
+  font-size: 0.95em;
-#docSearch form #submit {
-	font-size: 0.95em;
-	background: #7A7A7A;
-	color: #fff;
-	border-right: 1px solid #7A7A7A;
-	border-bottom: 1px solid #7A7A7A;
-	border-top: 1px solid #7A7A7A;
-	border-left: 1px solid #7A7A7A;
-	padding: 1px 4px;
 }
-	
+
+#docSearch form input {
+  font-size: 0.95em;
+}
+  
+#docSearch form #submit {
+  font-size: 0.95em;
+  background: #7A7A7A;
+  color: #fff;
+  border: 1px solid #7A7A7A;
+  padding: 1px 4px;
+}
+  
 #docSearch form #q {
-	width: 170px;
+  width: 170px;
-	font-size: 0.95em;
+  font-size: 0.95em;
-	border:	1px solid #7A7A7A;
+  border:  1px solid #7A7A7A;
-	background: #E1E1E1;
+  background: #E1E1E1;
-        color: #000000;
+  color: #000000;
-	padding: 2px;
+  padding: 2px;
 }
 
 .frmDocSearch {
@@ -142,26 +150,46 @@ body {
 
 /* Heading Definitions */
 
+h1, h2, h3 {
+  font-weight: bold;
+  margin-top: 2ex;
+}
+
 h1 {
-  font-weight: bold; 
-  color: #EC5800; 
   font-size: 1.4em;
 }
 
 h2 {
-  font-weight: bold; 
+  font-size: 1.2em !important;
-  color: #666; 
-  font-size: 1.2em;
 }
 
-h3 { 
+h3 {
-  font-weight: bold; 
-  color: #666; 
   font-size: 1.1em;
 }
 
+h1 a:hover {
+  color: #EC5800;
+  text-decoration: none;
+}
+
+h2 a:hover,
+h3 a:hover,
+h4 a:hover {
+  color: #666666;
+  text-decoration: none;
+}
+
 /* Text Styles */
 
+div.SECT2 {
+  margin-top: 4ex;
+}
+
+div.SECT3 {
+  margin-top: 3ex;
+  margin-left: 3ex;
+}
+
 .txtCurrentLocation {
   font-weight: bold;
 }
@@ -192,19 +220,224 @@ p, ol, ul, li {
   padding: 3px;
 }
 
+#docContainer pre code,
+#docContainer pre tt,
+#docContainer pre pre,
+#docContainer tt tt,
+#docContainer tt code,
+#docContainer tt pre {
+  font-size: 1em;
+}
+
+pre.LITERALLAYOUT,
+.SCREEN,
+.SYNOPSIS,
+.PROGRAMLISTING,
+.REFSYNOPSISDIV p,
+table.CAUTION,
+table.WARNING,
+blockquote.NOTE,
+blockquote.TIP,
+table.CALSTABLE {
+  -moz-box-shadow: 3px 3px 5px #DFDFDF;
+  -webkit-box-shadow: 3px 3px 5px #DFDFDF;
+  -khtml-box-shadow: 3px 3px 5px #DFDFDF;
+  -o-box-shadow: 3px 3px 5px #DFDFDF;
+  box-shadow: 3px 3px 5px #DFDFDF;
+}
+
+pre.LITERALLAYOUT,
+.SCREEN,
+.SYNOPSIS,
+.PROGRAMLISTING,
+.REFSYNOPSISDIV p,
+table.CAUTION,
+table.WARNING,
+blockquote.NOTE,
+blockquote.TIP {
+  color: black;
+  border-width: 1px;
+  border-style: solid;
+  padding: 2ex;
+  margin: 2ex 0 2ex 2ex;
+  overflow: auto;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -khtml-border-radius: 8px;
+  border-radius: 8px;
+}
+
+pre.LITERALLAYOUT,
+pre.SYNOPSIS,
+pre.PROGRAMLISTING,
+.REFSYNOPSISDIV p,
+.SCREEN {
+  border-color: #CFCFCF;
+  background-color: #F7F7F7;
+}
+
+blockquote.NOTE,
+blockquote.TIP {
+  border-color: #DBDBCC;
+  background-color: #EEEEDD;
+  padding: 14px;
+  width: 572px;
+}
+
+blockquote.NOTE,
+blockquote.TIP,
+table.CAUTION,
+table.WARNING {
+  margin: 4ex auto;
+}
+
+blockquote.NOTE p,
+blockquote.TIP p {
+  margin: 0;
+}
+
+blockquote.NOTE pre,
+blockquote.NOTE code,
+blockquote.TIP pre,
+blockquote.TIP code {
+  margin-left: 0;
+  margin-right: 0;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  -khtml-box-shadow: none;
+  -o-box-shadow: none;
+  box-shadow: none;
+}
+
+.emphasis {
+  font-weight: bold;
+}
+
+/* Table Styles */
+
+table {
+  margin-left: 2ex;
+}
+
+table.CALSTABLE td,
+table.CALSTABLE th,
+table.CAUTION td,
+table.CAUTION th,
+table.WARNING td,
+table.WARNING th {
+  border-style: solid;
+}
+
+table.CALSTABLE,
+table.CAUTION,
+table.WARNING {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table.CALSTABLE
+{
+  margin: 2ex 0 2ex 2ex;
+  background-color: #E0ECEF;
+  border: 2px solid #A7C6DF;
+}
+
+table.CALSTABLE tr:hover td
+{
+  background-color: #EFEFEF;
+}
+
+table.CALSTABLE td {
+  background-color: #FFF;
+}
+
+table.CALSTABLE td,
+table.CALSTABLE th {
+  border: 1px solid #A7C6DF;
+  padding: 0.5ex 0.5ex;
+}
+
+table.CAUTION,
+table.WARNING {
+  border-collapse: separate;
+  display: block;
+  padding: 0;
+  max-width: 600px;
+}
+
+table.CAUTION {
+  background-color: #F5F5DC;
+  border-color: #DEDFA7;
+}
+
+table.WARNING {
+  background-color: #FFD7D7;
+  border-color: #DF421E;
+}
+
+table.CAUTION td,
+table.CAUTION th,
+table.WARNING td,
+table.WARNING th {
+  border-width: 0;
+  padding-left: 2ex;
+  padding-right: 2ex;
+}
+
+table.CAUTION td,
+table.CAUTION th {
+  border-color: #F3E4D5
+}
+
+table.WARNING td,
+table.WARNING th {
+  border-color: #FFD7D7;
+}
+
+td.c1,
+td.c2,
+td.c3,
+td.c4,
+td.c5,
+td.c6 {
+  font-size: 1.1em;
+  font-weight: bold;
+  border-bottom: 0px solid #FFEFEF;
+  padding: 1ex 2ex 0;
+}
+
 /* Link Styles */
 
 #docNav a {
   font-weight: bold;
 }
 
+a:link,
+a:visited,
+a:active,
+a:hover {
+  text-decoration: underline;
+}
 
-a:link                          { color:#0066A2; text-decoration: underline; }
+a:link,
-a:visited                       { color:#004E66; text-decoration: underline; }
+a:active {
-a:active                        { color:#0066A2; text-decoration: underline; }
+  color:#0066A2;
-a:hover                         { color:#000000; text-decoration: underline; }
+}
 
-#docFooter a:link                { color:#666; text-decoration: underline; }
+a:visited {
-#docFooter a:visited             { color:#666; text-decoration: underline; }
+  color:#004E66;
-#docFooter a:active              { color:#666; text-decoration: underline; }
+}
-#docFooter a:hover               { color:#000000; text-decoration: underline; }
+
+a:hover {
+  color:#000000;
+}
+
+#docFooter a:link,
+#docFooter a:visited,
+#docFooter a:active {
+  color:#666;
+}
+
+#docContainer code.FUNCTION tt {
+  font-size: 1em;
+}

media/css/geckofixes.css

@@ -1,21 +0,0 @@
-/* Gecko is broken with pre,tt,code sizes */
-
-#pgContainer code, #pgContainer pre, #pgContainer tt {
-  font-size: 1.2em;
-}
-
-#docContainer tt, #docContainer pre, #docContainer code {
-  font-size: 1.4em;
-}
-
-#docContainer tt tt, #docContainer tt code, #docContainer tt pre {
-  font-size: 1.0em;
-}
-
-#docContainer pre code, #docContainer pre tt, #docContainer pre pre {
-  font-size: 1.0em;
-}
-
-#docContainer code code, #docContainer code tt, #docContainer code pre {
-  font-size: 1.0em;
-}

media/css/layout.css

@@ -88,23 +88,21 @@
   font-size: 0.8em; 
 }
 
-#pgSearch form #submit {
+#pgSearch form #submit,
+#pgSearch form #q {
   font-size: 0.8em;
   background: #FFFFFF;
   color: #000000;
-  border-right: 1px solid #7A7A7A;
+  border: 1px solid #7A7A7A;
-  border-bottom: 1px solid #7A7A7A;
+}
-  border-top: 1px solid #7A7A7A;
+
-  border-left: 1px solid #7A7A7A;
+#pgSearch form #submit {
+
   padding: 1px 4px;
 }
 
 #pgSearch form #q {
-  font-size: 0.8em;
   width: 140px;
-  border: 1px solid #7A7A7A;
-  background: #FFFFFF;
-  color: #000000;
   padding: 2px;
 }
 
@@ -438,10 +436,7 @@ img.pgArrowImage {
   font-size: 0.9em;
   background: #F5F5F5;
   color: #000000;
-  border-right: 1px solid #7A7A7A;
+  border: 1px solid #7A7A7A;
-  border-bottom: 1px solid #7A7A7A;
-  border-top: 1px solid #7A7A7A;
-  border-left: 1px solid #7A7A7A;
   padding: 1px 4px;
 }
 
@@ -640,18 +635,9 @@ TABLE.pgGenericFormTable TR {
    vertical-align: top;
 }
 
-TABLE.pgGenericFormTable TR TD INPUT {
+TABLE.pgGenericFormTable TR TD INPUT,
-   width: 100%;
+TABLE.pgGenericFormTable TR TD SELECT,
-}
+TABLE.pgGenericFormTable TR TD TEXTAREA,
-
-TABLE.pgGenericFormTable TR TD SELECT {
-   width: 100%;
-}
-
-TABLE.pgGenericFormTable TR TD TEXTAREA {
-   width: 100%;
-}
-
 TABLE.pgGenericFormTable TR TD DIV.markdownpreview {
    width: 100%;
 }
@@ -668,7 +654,7 @@ TABLE.pgGenericFormTable TR.errorinfo {
 TABLE.pgGenericFormTable TR.errorheader TD {
    background-color: #FFFFCC;
    border: 1px solid red;
-   padding: 2px 2px 2px 2px;
+   padding: 2px;
 }
 
 /* Misc Classes */

media/js/monospacefix.js

@@ -0,0 +1,24 @@
+function display_default_font_size(id)
+{
+        var x = document.getElementById(id);
+
+        if (x.currentStyle)
+                var y = x.currentStyle['fontSize'];
+        else if (window.getComputedStyle)
+                var y = document.defaultView.getComputedStyle(x,null).getPropertyValue('font-size');
+        return y;
+}
+
+document.write('<pre id="monotest" style="display: none;">&nbsp;</pre>');
+document.write('<p id="paratest" style="display: none;">&nbsp;</p>');
+var monoSize = parseInt(display_default_font_size("monotest"));
+var propSize = parseInt(display_default_font_size("paratest"));
+var newMonoSize = propSize / monoSize;
+
+if (newMonoSize != 1)
+{
+        document.write('<style type="text/css" media="screen">'
+					+ '#docContainer tt, #docContainer pre, #docContainer code'
+					+ '{font-size: ' + newMonoSize.toFixed(1) + 'em;}</style>\n');
+}
+

media/js/styleswitcher.js

@@ -0,0 +1,91 @@
+/* http://www.alistapart.com/articles/alternate/ */
+
+function
+setActiveStyleSheet (title)
+{
+  var i, a, main;
+  for (i = 0; (a = document.getElementsByTagName ("link")[i]); i++)
+    {
+      if (a.getAttribute ("rel").indexOf ("style") != -1
+	  && a.getAttribute ("title"))
+	{
+	  a.disabled = true;
+	  if (a.getAttribute ("title").indexOf(title) != -1)
+	    a.disabled = false;
+	}
+    }
+}
+
+function
+getActiveStyleSheet ()
+{
+  var i, a;
+  for (i = 0; (a = document.getElementsByTagName ("link")[i]); i++)
+    {
+      if (a.getAttribute ("rel").indexOf ("style") != -1
+	  && a.getAttribute ("title") && !a.disabled)
+	return a.getAttribute ("title");
+    }
+  return null;
+}
+
+function
+getPreferredStyleSheet ()
+{
+  var i, a;
+  for (i = 0; (a = document.getElementsByTagName ("link")[i]); i++)
+    {
+      if (a.getAttribute ("rel").indexOf ("style") != -1
+	  && a.getAttribute ("rel").indexOf ("alt") == -1
+	  && a.getAttribute ("title"))
+	return a.getAttribute ("title");
+    }
+  return null;
+}
+
+function
+createCookie (name, value, days)
+{
+  if (days)
+    {
+      var date = new Date ();
+      date.setTime (date.getTime () + (days * 24 * 60 * 60 * 1000));
+      var expires = "; expires=" + date.toGMTString ();
+    }
+  else
+    expires = "";
+  document.cookie = name + "=" + value + expires + "; path=/";
+}
+
+function
+readCookie (name)
+{
+  var nameEQ = name + "=";
+  var ca = document.cookie.split (';');
+  for (var i = 0; i < ca.length; i++)
+    {
+      var c = ca[i];
+      while (c.charAt (0) == ' ')
+	c = c.substring (1, c.length);
+      if (c.indexOf (nameEQ) == 0)
+	return c.substring (nameEQ.length, c.length);
+    }
+  return null;
+}
+
+window.onload = function (e)
+{
+  var cookie = readCookie ("style");
+  var title = cookie ? cookie : getPreferredStyleSheet ();
+  setActiveStyleSheet (title);
+}
+
+window.onunload = function (e)
+{
+  var title = getActiveStyleSheet ();
+  createCookie ("style", title, 365);
+}
+
+var cookie = readCookie ("style");
+var title = cookie ? cookie : getPreferredStyleSheet ();
+setActiveStyleSheet (title);

templates/docs/docspage.html

@@ -1,12 +1,11 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
 <head>
     <title>PostgreSQL: Documentation: Manuals: {{page.title}}</title>
     <style type="text/css" media="screen" title="Normal Text">@import url("/media/css/docs.css");</style>
     <link rel="alternate stylesheet" media="screen" href="/media/css/docs_large.css" type="text/css" title="Large Text" />
     <script type="text/javascript" src="/media/js/styleswitcher.js"></script>
-    <script type="text/javascript" src="/media/js/geckostyle.js"></script>
+    <script type="text/javascript" src="/media/js/monospacefix.js"></script>
     <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-1345454-1";urchinTracker();</script>
 </head>
 <body>

templates/index.html

@@ -83,7 +83,7 @@ database user and developer.
             <h2><img src="/media/img/hdr/hdr_supportus.png" width="81" height="10" alt="Support Us" /></h2>
             <div id="pgFrontSupportUsWrap">
               <div id="txtFrontSupportUsText">
-                PostgreSQL is free. Please support our work by making a <a href=\"/about/donate\">donation</a>.
+                PostgreSQL is free. Please support our work by making a <a href="/about/donate">donation</a>.
               </div>
             </div>
           </div> <!-- pgFrontSupportUs -->