support comments in odc

doc/assets/style.css

@@ -1,4 +1,5 @@
-html,body{
+html,
+body {
     margin: 0;
     padding: 0;
     font-family: "Ubuntu";
@@ -8,7 +9,7 @@ html,body{
     height: 100%;
     overflow: hidden;
 }
-#top{
+#top {
     background-color: #2c2c2c;
     color: white;
     font-weight: bold;
@@ -17,79 +18,80 @@ html,body{
     height: 30px;
 }
 
-#bottom{
+#bottom {
     position: fixed;
     bottom: 0;
     height: 20px;
     text-align: center;
-    color:#878887;
+    color: #878887;
     background-color: white;
     font-size: 13px;
     width: 100%;
-    padding:5px;
+    padding: 5px;
     border-top: 1px solid #878887;
 }
 
-#cover{
+#cover {
     height: calc(100% - 50px);
     overflow-x: hidden;
     overflow-y: auto;
 }
-#navbar{
-    margin:0 auto;
+#navbar {
+    margin: 0 auto;
     max-width: 80%;
     display: flex;
-    justify-content:flex-end;
+    justify-content: flex-end;
     flex-direction: row;
 }
-#book{
-    margin:0 auto;
+#book {
+    margin: 0 auto;
     max-width: 80%;
     max-height: 100%;
     display: block;
-    justify-content:flex-end;
+    justify-content: flex-end;
     flex-direction: row;
     text-align: justify;
     height: 100%;
 }
 div.doc-name {
     text-align: left;
-    padding-top:3px;
+    padding-top: 3px;
 }
 div.doc-name a {
     text-decoration: none;
     color: #c9c9c9;
 }
 
-a.x-link, a.x-link:hover {
+a.x-link,
+a.x-link:hover {
     text-decoration: none;
     color: #c9c9c9;
     padding-left: 15px;
     padding-top: 7px;
 }
-a.x-link::before{
+a.x-link::before {
     content: "\f08e";
-    color:#c9c9c9;
-    width:20px;
+    color: #c9c9c9;
+    width: 20px;
     height: 25px;
     font-family: "FontAwesome";
     font-size: 15px;
 }
-div.doc-name a::before{
+div.doc-name a::before {
     /* padding-top:13px; */
     content: "\f015";
-    color:#c9c9c9;
-    width:20px;
+    color: #c9c9c9;
+    width: 20px;
     height: 25px;
     font-family: "FontAwesome";
     font-size: 18px;
 }
-input.search-box{
+input.search-box {
     outline: none;
     border: 0;
-    flex:1;
-    padding:0;
-    margin:0;
+    flex: 1;
+    padding: 0;
+    margin: 0;
     margin-left: 10px;
     /* padding-top:13px; */
     height: 25px;
@@ -100,12 +102,12 @@ input.search-box{
     line-height: 0.5;
     color: #878887;
 }
-div.search-icon:before{
+div.search-icon:before {
     /* padding-top:13px; */
     content: "\f002";
-    color:#878887;
+    color: #878887;
     display: block;
-    width:20px;
+    width: 20px;
     height: 25px;
     font-family: "FontAwesome";
     font-size: 18px;
@@ -165,7 +167,7 @@ div.doc-toc .caret-down::before {
     font-family: "FontAwesome";
     margin-right: 5px;
 }
-div.doc-toc  .active {
+div.doc-toc .active {
     display: block;
     padding-left: 20px;
 }
@@ -182,12 +184,13 @@ div.doc-content {
 }
 div.pagenav {
     display: flex;
-    justify-content:flex-end;
+    justify-content: flex-end;
     flex-direction: row;
     width: 100%;
 }
 
-div.pagenav a.go_next, div.pagenav a.go_prev {
+div.pagenav a.go_next,
+div.pagenav a.go_prev {
     display: block;
     flex: 1;
     text-decoration: none;
@@ -199,13 +202,12 @@ div.pagenav a.go_next, div.pagenav a.go_prev {
     padding-bottom: 3px;
     margin-bottom: 10px;
 }
-div.pagenav a.go_next:hover, div.pagenav a.go_prev:hover
-{
+div.pagenav a.go_next:hover,
+div.pagenav a.go_prev:hover {
     background-color: #e6e8e8;
 }
 
-div.pagenav a.go_next
-{
+div.pagenav a.go_next {
     padding-right: 5px;
     text-align: center;
 }
@@ -253,7 +255,7 @@ div.md-content p.result-content span.pattern {
     padding-right: 3px;
     border-radius: 2px;
 }
-div.md-content p.result-header a::before{
+div.md-content p.result-header a::before {
     content: "\f002";
     color: #333f67;
     display: inline-block;
@@ -264,7 +266,7 @@ div.md-content p.result-header a::before{
 	padding-left: 10px;
 } */
 #renderer img {
-    max-width:100%;
+    max-width: 100%;
     display: block;
     margin-left: auto;
     margin-right: auto;
@@ -275,7 +277,7 @@ a {
     text-decoration: none;
 }
 
-a:hover{
+a:hover {
     text-decoration: underline;
 }
 
@@ -284,27 +286,39 @@ form.search-form {
 }
 
 td.hljs-ln-numbers {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
-	text-align: center;
-	color: #ccc;
-	vertical-align: top;
+    text-align: center;
+    color: #ccc;
+    vertical-align: top;
     font-size: 13;
-	/* your custom style here */
+    /* your custom style here */
 }
 
 /* for block of code */
 .hljs-ln td.hljs-ln-code {
-	padding-left: 10px;
+    padding-left: 10px;
 }
 
-model-viewer{
+model-viewer {
     /*border: 1px solid #333f67;*/
     width: 100%;
     height: 350px;
-}
+}
+.commentsec {
+    padding: 15px;
+    display: block;
+}
+.commentsec .comment-header {
+    text-align: center;
+    border-top: 1px dashed #3170b2;
+    color: #3170b2;
+    margin: 0;
+    padding-top: 10px;
+    padding-bottom: 0px;
+}