doc/default.css: use ffmpeg.org website CSS

The attribute container of the top-level div is changed from "class" to
"id" to match the website CSS.

Improve consistency between website docs and local documentation style.

2 files changed, 135 insertions, 100 deletions

diff --git a/doc/default.css b/doc/default.css
index a7fcd34401..77a3514ed7 100644
--- a/doc/default.css
+++ b/doc/default.css
@@ -1,114 +1,149 @@
-.container {
-  margin-right: auto;
-  margin-left: auto;
-  width: 1070px;
+a {
+    color: #2D6198;
+}
+
+a:visited {
+    color: #884488;
 }
+
+#banner {
+    background-color: white;
+    position: relative;
+    text-align: center;
+}
+
+#banner img {
+    padding-bottom: 1px;
+    padding-top: 5px;
+}
+
+#body {
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
 body {
-  font-size: 14px;
-  line-height: 20px;
-  color: #666666;
-  background-color: #ffffff;
+    background-color: #313131;
+    margin: 0;
+    text-align: justify;
 }
-a {
-  color: #0088cc;
-  text-decoration: none;
+
+.center {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
 }
-a:hover {
-  color: #005580;
-  text-decoration: underline;
+
+#container {
+    background-color: white;
+    color: #202020;
+    margin-left: 1em;
+    margin-right: 1em;
 }
-p {
-  margin: 0 0 10px;
-}
-h2,
-h3,
-h4 {
-  margin: 10px 0;
-  font-family: inherit;
-  font-weight: bold;
-  line-height: 1;
-  border-color: #D6E9C6;
-  color: #468847;
-  border-style: solid;
-  border-width: 0 0 1px;
-  padding-left: 0.5em;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a {
-  color: inherit;
+
+#footer {
+    text-align: center;
+}
+
+h1, h2, h3 {
+    padding-left: 0.4em;
+    border-radius: 4px;
+    padding-bottom: 0.2em;
+    padding-top: 0.2em;
+    border: 1px solid #6A996A;
 }
+
 h1 {
-  font-size: 30px;
-  line-height: 40px;
+    background-color: #7BB37B;
+    color: #151515;
+    font-size: 1.2em;
+    padding-bottom: 0.3em;
+    padding-top: 0.3em;
 }
+
 h2 {
-  font-size: 20px;
-  line-height: 40px;
+    color: #313131;
+    font-size: 0.9em;
+    background-color: #ABE3AB;
 }
+
 h3 {
-  font-size: 18px;
-  line-height: 40px;
+    color: #313131;
+    font-size: 0.8em;
+    margin-bottom: -8px;
+    background-color: #BBF3BB;
 }
-code,
-pre {
-  padding: 0 3px 2px;
-  font-family: monospace;
-  font-size: 12px;
-  color: #333333;
-  border-radius: 3px;
+
+img {
+    border: 0;
 }
+
+#navbar {
+    background-color: #738073;
+    border-bottom: 1px solid #5C665C;
+    border-top: 1px solid #5C665C;
+    margin-top: 12px;
+    padding: 0.3em;
+    position: relative;
+    text-align: center;
+}
+
+#navbar a, #navbar_secondary a {
+    color: white;
+    padding: 0.3em;
+    text-decoration: none;
+}
+
+#navbar a:hover, #navbar_secondary a:hover {
+    background-color: #313131;
+    color: white;
+    text-decoration: none;
+}
+
+#navbar_secondary {
+    background-color: #738073;
+    border-bottom: 1px solid #5C665C;
+    border-left: 1px solid #5C665C;
+    border-right: 1px solid #5C665C;
+    padding: 0.3em;
+    position: relative;
+    text-align: center;
+}
+
+p {
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
 pre {
-  display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
-  font-size: 13px;
-  line-height: 20px;
-  word-break: break-all;
-  word-wrap: break-word;
-  white-space: pre;
-  white-space: pre-wrap;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-code {
-  padding: 2px 4px;
-  color: #d14;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
-}
-pre code {
-  padding: 0;
-  color: inherit;
-  background-color: transparent;
-  border: 0;
-}
-.alert {
-  padding: 8px 35px 8px 14px;
-  margin-bottom: 20px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  background-color: #fcf8e3;
-  border: 1px solid #fbeed5;
-  border-radius: 4px;
-  color: #c09853;
-}
-
-.alert-danger,
-.alert-error {
-  background-color: #f2dede;
-  border-color: #eed3d7;
-  color: #b94a48;
-}
-.alert-info {
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-  color: #3a87ad;
-}
-
-ul.toc {
-  list-style-type: none;
+    margin-left: 3em;
+    margin-right: 3em;
+    padding: 0.3em;
+    border: 1px solid #bbb;
+    background-color: #f7f7f7;
+}
+
+dl dt {
+    font-weight: bold;
+}
+
+#proj_desc {
+    font-size: 1.2em;
+}
+
+#repos {
+    margin-left: 1em;
+    margin-right: 1em;
+    border-collapse: collapse;
+    border: solid 1px #6A996A;
+}
+
+#repos th {
+    background-color: #7BB37B;
+    border: solid 1px #6A996A;
+}
+
+#repos td {
+    padding: 0.2em;
+    border: solid 1px #6A996A;
 }
diff --git a/doc/t2h.init b/doc/t2h.init
index fe1ce234ce..bb28d96790 100644
--- a/doc/t2h.init
+++ b/doc/t2h.init
@@ -16,7 +16,7 @@ my $TEMPLATE_HEADER = $ENV{"FFMPEG_HEADER"} || <<EOT;
 <link rel="icon" href="favicon.png" type="image/png" />
 </head>
 <body>
-<div class="container">
+<div id="container">
 EOT
 
 $PRE_BODY_CLOSE = '</div></div>';