tdf#106574 JavaScript navigation history with links added, CSS improvements

Change-Id: I991e4a9c48f91997dc44fb7b9b9c2f57a3c49099
Reviewed-on: https://gerrit.libreoffice.org/35728
Reviewed-by: Olivier Hallot <olivier.hallot@edx.srv.br>
Tested-by: Olivier Hallot <olivier.hallot@edx.srv.br>

1 files changed, 180 insertions, 116 deletions

diff --git a/source/default.css b/source/default.css
index dce078cb3a..edd767db3c 100644
--- a/source/default.css
+++ b/source/default.css
@@ -25,164 +25,228 @@
 
 */
 
-body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable
-	 { font-family: "Segoe UI",Ubuntu,Cantarell,"Noto Sans","DejaVu Sans","Lucida Sans Unicode","Helvetica Neue",Helvetica,Tahoma,sans-serif; }
+body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable {
+  font-family: "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
+}
 
-pre, .code, .codeintable, .example, .exampleintable, .literal, .literalintable, .path, .pathintable
-	{ font-family: Menlo,Consolas,"DejaVu Sans Mono","Nimbus Mono L","Lucida Sans Typewriter","Courier New",Courier,Monaco,monospace; margin-top: 1pt; margin-bottom: 1pt; }
+pre, .code, .codeintable, .example, .exampleintable, .literal, .literalintable, .path, .pathintable {
+  font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+  margin-top: 1pt;
+  margin-bottom: 1pt;
+}
 
-.acronym
-	{ font-weight: bold; }
+.acronym {
+  font-weight: bold;
+}
 
-.related
-	{ font-weight: bold; margin-top:20pt; border-top: 1px solid black;}
+.related {
+  font-weight: bold;
+  margin-top: 20pt;
+  border-top: 1px solid black;
+}
 
-.emph, .menuitem, .keycode
-	{ font-weight: bold; }
+.emph, .menuitem, .keycode {
+  font-weight: bold;
+}
 
-.tablehead, .tableheadintable
-	{ font-weight: bold; margin-top: 0px; background:#CCF4C6; text-align: center;}
+.tablehead, .tableheadintable {
+  font-weight: bold;
+  margin-top: 0px;
+  background: #CCF4C6;
+  text-align: center;
+}
 
-.howtogetheader
-	{ font-weight: bold; border: 1px solid #999999; background: #FFFFFF; padding: 3px;}
+.howtogetheader {
+  font-weight: bold;
+  border: 1px solid #999999;
+  background: #FFFFFF;
+  padding: 3px;
+}
 
-h1, h2, h3, h4, h5, h6
-	{ margin-bottom: 5pt; color: #18A303;}
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 5pt;
+  color: #18A303;
+}
 
-p, td
-	{ font-size: 10pt; margin: 2px 2px 2px 2px;}
+p, td {
+  font-size: 10pt;
+  margin: 2px 2px 2px 2px;
+}
 
-h1
-	{ font-size: 18pt; border-bottom: 5px solid #18A303; padding-bottom: 6px; margin-bottom: 6px;}
+h1 {
+  font-size: 18pt;
+  border-bottom: 5px solid #18A303;
+  padding-bottom: 6px;
+  margin-bottom: 6px;
+}
 
-h2
-	{ font-size: 14pt; }
+h2 {
+  font-size: 14pt;
+}
 
-h3
-	{ font-size: 12pt; }
+h3 {
+  font-size: 12pt;
+}
 
-h4, h5, h6
-	{ font-size: 10pt; }
+h4, h5, h6 {
+  font-size: 10pt;
+}
 
-.relatedtopics
-	{ font-weight: normal; }
+.relatedtopics {
+  font-weight: normal;
+}
 
-.relatedbody
-	{ margin-top: 2px; margin-bottom: 2px; margin-left: 5px; }
+.relatedbody {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  margin-left: 5px;
+}
 
-.howtoget
-	{ background:#CCF4C6;}
+.howtoget {
+  background: #CCF4C6;
+}
 
-.howtogetbody
-	{ background:#CCF4C6; margin: 0px;}
+.howtogetbody {
+  background: #CCF4C6;
+  margin: 0px;
+}
 
-.wide
-	{ width: 100%; }
+.wide {
+  width: 100%;
+}
 
-.topalign
-	 { vertical-align: top; border: 1px;}
+.topalign {
+  vertical-align: top;
+  border: 1px;
+}
 
-.bug
-	{ color: red; border: 1px solid red;}
+.bug {
+  color: red;
+  border: 1px solid red;
+}
 
-.debug
-	{ border: 1px solid black; padding: 3px; display: show;}
+.debug {
+  border: 1px solid black;
+  padding: 3px;
+  display: show;
+}
 
 /* Basic code syntax highlight */
-.identifier, .unknown
-	{ color: green;}
+.identifier, .unknown {
+  color: green;
+}
 
-.keyword
-	{ color: blue;}
+.keyword {
+  color: blue;
+}
 
-.comment
-	{ color: gray;}
+.comment {
+  color: gray;
+}
 
-.number, .string
-	{ color: red;}
+.number, .string {
+  color: red;
+}
 
-.operator, .parameter
-	{ color: black;}
+.operator, .parameter {
+  color: black;
+}
 
-.hotlink
-        { color:blue;}
+.hotlink {
+  color: blue;
+}
 
 .infopage {
-        color:green;
-        font-size:16pt;
-        font-weight:bold;
-        }
-
-.topmenu{
-    color: #18A303;
-    background-color: white;
-    font-size:12pt;
-    font-weight:bold;
-    padding:1px;
-    border: solid 1px #18A303;
-}
-.indexlink{font-size: 10pt; margin-top: 2px; margin-bottom: 2px;}
-
-#DisplayArea{
-position: fixed;
-bottom: 5px;
-right: 5px;
-left:30%;
-top:10%;
-overflow:auto;
-border:solid 1px;
-padding:10px;
+  color: green;
+  font-size: 16pt;
+  font-weight: bold;
+}
+
+.topmenu {
+  color: #18A303;
+  background-color: white;
+  font-size: 12pt;
+  font-weight: bold;
+  padding: 1px;
+  border: solid 1px #18A303;
 }
+
+.indexlink {
+  font-size: 10pt;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+#DisplayArea {
+  position: fixed;
+  bottom: 5px;
+  right: 5px;
+  left: 30%;
+  top: 10%;
+  overflow: auto;
+  border: solid 1px;
+  padding: 10px;
+}
+
 #BottomLeft {
-position: fixed;
-bottom: 5px;
-left: 5px;
-overflow:auto;
-right: 70%;
-top: 10%;
-border-top:solid 1px;
-border-left:solid 1px;
-border-bottom:solid 1px;
-padding:10px;
+  position: fixed;
+  bottom: 5px;
+  left: 5px;
+  overflow: auto;
+  right: 70%;
+  top: 10%;
+  border-top: solid 1px;
+  border-left: solid 1px;
+  border-bottom: solid 1px;
+  padding: 10px;
 }
+
 #TopRight {
-    border-top:solid 1px;
-    border-left:solid 1px;
-    border-right:solid 1px;
-    position: fixed;
-    right: 5px;
-    top: 5px;
-    left: 30%;
-    bottom:90%;
+  border-top: solid 1px;
+  border-left: solid 1px;
+  border-right: solid 1px;
+  position: fixed;
+  right: 5px;
+  top: 10%;
+  left: 30%;
+  bottom: 90%;
 }
+
 #TopLeft {
-    border-top:solid 1px;
-    border-left:solid 1px;
-    left: 5px;
-    position: fixed;
-    top: 5px;
-    right: 70%;
-    bottom:90%;
+  border-top: solid 1px;
+  border-left: solid 1px;
+  border-right: solid 1px;
+  left: 5px;
+  position: fixed;
+  top: 5px;
+  bottom: 90%;
 }
 
-#mediadiv {
+#NavigationHistory {
+	top: 5px;
+	float: right;
+	text-align: right;
+	color: #18A303;
+	font-weight: 700;
+	font-size: 0.625rem;
+	cursor: pointer;
 }
 
-.mediabutton{
-background-color:cyan;
+.mediabutton {
+  background-color: cyan;
 }
 
 .tintro {
-color: white;
-background-color: green;
-font-family: Arial;
-font-weight: bold;
-font-size: 24pt;
-border: 1px solid black;
-padding-bottom: 6px;
-margin-bottom: 6px;
+  color: white;
+  background-color: green;
+  font-family: Arial;
+  font-weight: bold;
+  font-size: 24pt;
+  border: 1px solid black;
+  padding-bottom: 6px;
+  margin-bottom: 6px;
 }
+
 .embedded {
-border-right: 10px solid red;
+  border-right: 10px solid red;
 }
-