Tweak looks of API documentation.

WIP:
 * Only a first subset of CSS has been applied
 * Look based on Humdinger's and other's work on user guide
 * Navigation is still ugly. I need to work around the limitations of Doxygen. Maybe by a patch though.
 * Needs a manual extra step: you need to copy the /trunk/docs/userguide/images/logo.png to the /trunk/generated/doxygen/html directory

git-svn-id: file:///srv/svn/repos/haiku/haiku/trunk@29117 a95241bf-73f2-0310-859d-f6bbb57e9c96

docs/user/Doxyfile

@@ -683,7 +683,7 @@ HTML_FILE_EXTENSION    = .html
 # each generated HTML page. If it is left blank doxygen will generate a 
 # standard header.
 
-HTML_HEADER            = 
+HTML_HEADER            = header.html
 
 # The HTML_FOOTER tag can be used to specify a personal HTML footer for 
 # each generated HTML page. If it is left blank doxygen will generate a 
@@ -698,7 +698,7 @@ HTML_FOOTER            = footer.html
 # the style sheet file to the HTML output directory, so don't put your own 
 # stylesheet in the HTML output directory as well, or it will be erased!
 
-HTML_STYLESHEET        = 
+HTML_STYLESHEET        = book.css
 
 # If the HTML_ALIGN_MEMBERS tag is set to YES, the members of classes, 
 # files or namespaces will be aligned in HTML using tables. If set to 

docs/user/book.css

@@ -1,78 +1,281 @@
-H1 {
+/*
-	text-align: center;
+ * Copyright 2008, Haiku. All rights reserved.
-	font-family: Arial, Helvetica, sans-serif;
+ * Distributed under the terms of the MIT License.
+ *
+ * Authors:
+ *		François Revol <[email protected]>
+ *		Stephan Aßmus <[email protected]>
+ *		Braden Ewing <[email protected]>
+ *		Humdinger <[email protected]>
+ */
+
+/*  This is the Doxygen standard (messy) CSS updated with Haiku stuff.
+    All tags which are lower case have custom CSS, all upper case tags are the original.
+    I did some reordering.
+    - nielx 
+ */
+
+html {
+	margin: 0px;
+	padding: 0px;
 }
-H2 {
+
-	font-family: Arial, Helvetica, sans-serif;
+body {
-}
+	font-family: "DejaVu Sans",Arial,Helvetica,sans-serif;
-CAPTION { font-weight: bold }
-DIV.qindex { width: 100%;
-			 font-family: Arial, Helvetica, sans-serif;
-             background-color: white;
-             border: 1px solid black;
-			 padding: 2px;
-             text-align: center;
-             margin-bottom: 2px
-}
-A.qindex { text-decoration: none; font-weight: bold; color: #2222aa }
-A.qindex:visited { text-decoration: none; font-weight: bold; color: #2222aa }
-A.qindex:hover { text-decoration: none; background-color: #f0f0e0 }
-A.qindexHL { text-decoration: underlined; font-weight: bold;
-             background-color: #e0e0d0 /*#111199;*/
-             color: black; /*#cccccc*/
-           }
-A.qindexHL:hover { text-decoration: none; background-color: #111199; color: #ffffff }
-/*A.qindexHL:visited { text-decoration: none; color: #000060 }*/
-A.el { text-decoration: underline; font-weight: bold; color: #2222aa }
-A.elRef { font-weight: bold }
-A { text-decoration: underline; color: #2222aa }
-A.codeRef { text-decoration: underline; font-weight: normal; color: #2222aa }
-A:hover { text-decoration: underline; background-color: #e0e0d0 }
-A.el:visited { text-decoration: underline; color: #000060 }
-DL.el { margin-left: -1cm }
-DIV.fragment {
-	width: 98%;
-	border: 1px solid #CCCCCC;
-	background-color: #f5f5f5;
-	padding-left: 4px;
-	margin: 4px;
-}
-DIV.ah { background-color: black; font-weight: bold; color: #ffffff; margin-bottom: 3px; margin-top: 3px }
-TD.md { background-color: #ffffff; font-weight: bold; }
-TD.mdname1 { background-color: #ffffff; font-weight: bold; color: #602020; }
-TD.mdname { background-color: #ffffff; font-weight: bold; color: #602020; width: 600px; }
-DIV.groupHeader { margin-left: 16px; margin-top: 12px; margin-bottom: 6px; font-weight: bold }
-DIV.groupText { margin-left: 16px; font-style: italic; font-size: smaller }
-BODY {
- 	font-family: Arial, Helvetica, sans-serif;
 	background: white;
-	color: black;
+	color: #333333;
-	margin-right: 20px;
+	font-size: 90%;
+	margin: 0px;
+	padding: 0px;
+}
+
+h1 {
+	font-size: 1.3em;
+	font-weight: normal;
+	color: #0c3762;
+	border-bottom: dotted thin #e0e0e0;
+}
+
+h2 {
+	font-size: 1.2em;
+	font-weight: normal;
+	color: #0c3762;
+	border-bottom: dotted thin #e0e0e0;
+	margin-top: 10px;
+}
+
+h3 {
+	font-size: 1.1em;
+	font-weight: normal;
+	color: #0c3762;
+	margin-top: 10px;
+}
+
+h4 {
+	font-size: 1.0em;
+	font-weight: lighter;
+	color: #0c3762;
+	margin-top: 10px;
+}
+
+p {
+	text-align: justify;
+	line-height: 1.3;
+}
+
+/* link colors and text decoration */
+
+a:link {
+	font-weight: bold; 
+	text-decoration: none;
+	color: #dc3c01;
+}
+
+a:visited {
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #892601;
+}
+
+a:hover, a:active { 
+	text-decoration: underline; 
+	color: #ff4500;
+}
+
+/* Some headers act as anchors, don't give them a hover effect */
+
+h1 a:hover, a:active {
+	text-decoration: none;
+	color: #0c3762;
+}
+
+h2 a:hover, a:active {
+	text-decoration: none;
+	color: #0c3762;
+}
+
+h3 a:hover, a:active {
+	text-decoration: none;
+	color: #0c3762;
+}
+
+h4 a:hover, a:active {
+	text-decoration: none;
+	color: #0c3762;
+}
+
+/* Custom Header */
+
+div.logo {
+	position: relative;
+	left: 0px;
+	top: 0px;
+	background: #efefef;
+}
+
+div.logo img {
 	margin-left: 20px;
 }
-TD.indexkey { 
+
-   background-color: white;
+div.title {
-   font-weight: bold; 
+	position: absolute;
-   padding-right  : 10px; 
+	top: 54px;
-   padding-top    : 2px; 
+	right: 40px;
-   padding-left   : 10px; 
+	font-size: 1.2em;
-   padding-bottom : 2px; 
-   margin-left    : 0px; 
-   margin-right   : 0px; 
-   margin-top     : 2px; 
-   margin-bottom  : 2px  
 }
-TD.indexvalue { 
+
-   background-color: white;
+/* Navigation Tabs */
-   font-style: italic; 
+div.tabs {
-   padding-right  : 10px; 
+	width: 100%;
-   padding-top    : 2px; 
+	background: #e0e0e0;
-   padding-left   : 10px; 
+}
-   padding-bottom : 2px; 
+
-   margin-left    : 0px; 
+div.tabs ul {
-   margin-right   : 0px; 
+	margin: 0px;
-   margin-top     : 2px; 
+	padding-left: 10px;
-   margin-bottom  : 2px  
+	list-style: none;
+}
+
+div.tabs li {
+	display: inline;
+	margin: 0px;
+	padding: 0px;
+	font-size: 0,8em;
+}
+
+div.tabs span {
+	display: inline;
+	padding: 5px 9px;
+	white-space: nowrap;
+}
+
+div.tabs li.current a {
+	color: black;
+	text-decoration: none;
+}
+
+/* Contents div */
+
+div.contents {
+	padding: 50px 40px;	
+}
+
+/* Continue with the rest of the standard Doxygen stuff... */
+
+CAPTION { font-weight: bold }
+DIV.qindex {
+	width: 100%;
+	background-color: #e8eef2;
+	border: 1px solid #84b0c7;
+	text-align: center;
+	margin: 2px;
+	padding: 2px;
+	line-height: 140%;
+}
+DIV.nav {
+	width: 100%;
+	background-color: #e8eef2;
+	border: 1px solid #84b0c7;
+	text-align: center;
+	margin: 2px;
+	padding: 2px;
+	line-height: 140%;
+}
+DIV.navtab {
+       background-color: #e8eef2;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       margin-right: 15px;
+       padding: 2px;
+}
+TD.navtab {
+       font-size: 70%;
+}
+A.qindex {
+       text-decoration: none;
+       font-weight: bold;
+       color: #1A419D;
+}
+A.qindex:visited {
+       text-decoration: none;
+       font-weight: bold;
+       color: #1A419D
+}
+A.qindex:hover {
+	text-decoration: none;
+	background-color: #ddddff;
+}
+A.qindexHL {
+	text-decoration: none;
+	font-weight: bold;
+	background-color: #6666cc;
+	color: #ffffff;
+	border: 1px double #9295C2;
+}
+A.qindexHL:hover {
+	text-decoration: none;
+	background-color: #6666cc;
+	color: #ffffff;
+}
+A.qindexHL:visited { text-decoration: none; background-color: #6666cc; color: #ffffff }
+A.elRef { font-weight: bold }
+A.code:link { text-decoration: none; font-weight: normal; color: #0000FF}
+A.code:visited { text-decoration: none; font-weight: normal; color: #0000FF}
+A.codeRef:link { font-weight: normal; color: #0000FF}
+A.codeRef:visited { font-weight: normal; color: #0000FF}
+DL.el { margin-left: -1cm }
+.fragment {
+       font-family: monospace, fixed;
+       font-size: 95%;
+}
+PRE.fragment {
+	border: 1px solid #CCCCCC;
+	background-color: #f5f5f5;
+	margin-top: 4px;
+	margin-bottom: 4px;
+	margin-left: 2px;
+	margin-right: 8px;
+	padding-left: 6px;
+	padding-right: 6px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+DIV.ah { background-color: black; font-weight: bold; color: #ffffff; margin-bottom: 3px; margin-top: 3px }
+
+DIV.groupHeader {
+       margin-left: 16px;
+       margin-top: 12px;
+       margin-bottom: 6px;
+       font-weight: bold;
+}
+DIV.groupText { margin-left: 16px; font-style: italic; font-size: 90% }
+
+TD.indexkey {
+	background-color: #e8eef2;
+	font-weight: bold;
+	padding-right  : 10px;
+	padding-top    : 2px;
+	padding-left   : 10px;
+	padding-bottom : 2px;
+	margin-left    : 0px;
+	margin-right   : 0px;
+	margin-top     : 2px;
+	margin-bottom  : 2px;
+	border: 1px solid #CCCCCC;
+}
+TD.indexvalue {
+	background-color: #e8eef2;
+	font-style: italic;
+	padding-right  : 10px;
+	padding-top    : 2px;
+	padding-left   : 10px;
+	padding-bottom : 2px;
+	margin-left    : 0px;
+	margin-right   : 0px;
+	margin-top     : 2px;
+	margin-bottom  : 2px;
+	border: 1px solid #CCCCCC;
 }
 TR.memlist {
    background-color: #f0f0f0; 
@@ -87,29 +290,11 @@ SPAN.comment       { color: #800000 }
 SPAN.preprocessor  { color: #806020 }
 SPAN.stringliteral { color: #002080 }
 SPAN.charliteral   { color: #008080 }
-
-/* this violates anything which is good style - but it seem to work... */
-EM.none { font-style: italic; }
-EM, SPAN.var { 
-	font-weight: bold; 
-	font-family: Arial, sans-serif; 
-	font-style: italic; 
-	color: #602020; 
-}
-CODE { color: #3333aa; }
-
-.mdTable {
-	border: 4px ridge #868686;
-	background-color: #ffffff;
-}
-.mdRow {
-	padding: 8px 20px;
-}
 .mdescLeft {
-	font-size: smaller;
+       padding: 0px 8px 4px 8px;
-	font-family: Arial, Helvetica, sans-serif;
+	font-size: 80%;
+	font-style: italic;
 	background-color: #FAFAFA;
-	padding-left: 8px;
 	border-top: 1px none #E0E0E0;
 	border-right: 1px none #E0E0E0;
 	border-bottom: 1px none #E0E0E0;
@@ -117,18 +302,15 @@ CODE { color: #3333aa; }
 	margin: 0px;
 }
 .mdescRight {
-	font-size: smaller;
+       padding: 0px 8px 4px 8px;
-	font-family: Arial, Helvetica, sans-serif;
+	font-size: 80%;
 	font-style: italic;
 	background-color: #FAFAFA;
-	padding-left: 4px;
 	border-top: 1px none #E0E0E0;
 	border-right: 1px none #E0E0E0;
 	border-bottom: 1px none #E0E0E0;
 	border-left: 1px none #E0E0E0;
 	margin: 0px;
-	padding-bottom: 0px;
-	padding-right: 8px;
 }
 .memItemLeft {
 	padding: 1px 0px 0px 8px;
@@ -137,38 +319,91 @@ CODE { color: #3333aa; }
 	border-right-width: 1px;
 	border-bottom-width: 1px;
 	border-left-width: 1px;
-	border-top-style: solid;
 	border-top-color: #E0E0E0;
 	border-right-color: #E0E0E0;
 	border-bottom-color: #E0E0E0;
 	border-left-color: #E0E0E0;
+	border-top-style: solid;
 	border-right-style: none;
 	border-bottom-style: none;
 	border-left-style: none;
 	background-color: #FAFAFA;
-	font-family: Arial, Helvetica, sans-serif;
+	font-size: 80%;
-	font-size: 12px;
 }
 .memItemRight {
+	padding: 1px 8px 0px 8px;
+	margin: 4px;
+	border-top-width: 1px;
+	border-right-width: 1px;
+	border-bottom-width: 1px;
+	border-left-width: 1px;
+	border-top-color: #E0E0E0;
+	border-right-color: #E0E0E0;
+	border-bottom-color: #E0E0E0;
+	border-left-color: #E0E0E0;
+	border-top-style: solid;
+	border-right-style: none;
+	border-bottom-style: none;
+	border-left-style: none;
+	background-color: #FAFAFA;
+	font-size: 80%;
+}
+.memTemplItemLeft {
 	padding: 1px 0px 0px 8px;
 	margin: 4px;
 	border-top-width: 1px;
 	border-right-width: 1px;
 	border-bottom-width: 1px;
 	border-left-width: 1px;
-	border-top-style: solid;
 	border-top-color: #E0E0E0;
 	border-right-color: #E0E0E0;
 	border-bottom-color: #E0E0E0;
 	border-left-color: #E0E0E0;
+	border-top-style: none;
 	border-right-style: none;
 	border-bottom-style: none;
 	border-left-style: none;
 	background-color: #FAFAFA;
-	font-family: Arial, Helvetica, sans-serif;
+	font-size: 80%;
-	font-size: 13px;
 }
-.search     { color: #0000ee;
+.memTemplItemRight {
+	padding: 1px 8px 0px 8px;
+	margin: 4px;
+	border-top-width: 1px;
+	border-right-width: 1px;
+	border-bottom-width: 1px;
+	border-left-width: 1px;
+	border-top-color: #E0E0E0;
+	border-right-color: #E0E0E0;
+	border-bottom-color: #E0E0E0;
+	border-left-color: #E0E0E0;
+	border-top-style: none;
+	border-right-style: none;
+	border-bottom-style: none;
+	border-left-style: none;
+	background-color: #FAFAFA;
+	font-size: 80%;
+}
+.memTemplParams {
+	padding: 1px 0px 0px 8px;
+	margin: 4px;
+	border-top-width: 1px;
+	border-right-width: 1px;
+	border-bottom-width: 1px;
+	border-left-width: 1px;
+	border-top-color: #E0E0E0;
+	border-right-color: #E0E0E0;
+	border-bottom-color: #E0E0E0;
+	border-left-color: #E0E0E0;
+	border-top-style: solid;
+	border-right-style: none;
+	border-bottom-style: none;
+	border-left-style: none;
+       color: #606060;
+	background-color: #FAFAFA;
+	font-size: 80%;
+}
+.search     { color: #003399;
               font-weight: bold;
 }
 FORM.search {
@@ -178,7 +413,82 @@ FORM.search {
 INPUT.search { font-size: 75%;
                color: #000080;
                font-weight: normal;
-               background-color: #eeeeff;
+               background-color: #e8eef2;
 }
 TD.tiny      { font-size: 75%;
 }
+
+.dirtab { padding: 4px;
+          border-collapse: collapse;
+          border: 1px solid #84b0c7;
+}
+TH.dirtab { background: #e8eef2;
+            font-weight: bold;
+}
+HR { height: 1px;
+     border: none;
+     border-top: 1px solid black;
+}
+
+/* Style for detailed member documentation */
+.memtemplate {
+  font-size: 80%;
+  color: #606060;
+  font-weight: normal;
+} 
+.memnav { 
+  background-color: #e8eef2;
+  border: 1px solid #84b0c7;
+  text-align: center;
+  margin: 2px;
+  margin-right: 15px;
+  padding: 2px;
+}
+.memitem {
+  padding: 4px;
+  background-color: #eef3f5;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #dedeee;
+  -moz-border-radius: 8px 8px 8px 8px;
+}
+.memname {
+  white-space: nowrap;
+  font-weight: bold;
+}
+.memdoc{
+  padding-left: 10px;
+}
+.memproto {
+  background-color: #d5e1e8;
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #84b0c7;
+  font-weight: bold;
+  -moz-border-radius: 8px 8px 8px 8px;
+}
+.paramkey {
+  text-align: right;
+}
+.paramtype {
+  white-space: nowrap;
+}
+.paramname {
+  color: #602020;
+  font-style: italic;
+  white-space: nowrap;
+}
+/* End Styling for detailed member documentation */
+
+/* for the tree view */
+.ftvtree {
+	font-family: sans-serif;
+	margin:0.5em;
+}
+.directory { font-size: 9pt; font-weight: bold; }
+.directory h3 { margin: 0px; margin-top: 1em; font-size: 11pt; }
+.directory > h3 { margin-top: 0; }
+.directory p { margin: 0px; white-space: nowrap; }
+.directory div { display: none; margin: 0px; }
+.directory img { vertical-align: -30%; }

docs/user/footer.html

@@ -1,3 +1,4 @@
+
 <HR>
 
 $projectname $projectnumber - $title<BR>

docs/user/header.html

@@ -1,8 +1,12 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
-	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
+	<meta http-equiv="Content-Type" content="text/html;charset=UTF8">
-	<title>$projectname: $title</title>
+	<title>$title</title>
 	<link href="book.css" rel="stylesheet" type="text/css">
 </head>
-<body bgcolor=white style="font-family: sans-serif;" background="images/bodyBack.gif">
+<body>
+	<div class="logo">
+		<img src="logo.png" alt="logo" width="372" height="86" />
+		<div class="title">$title</div>
+	</div>