ScadaDoc: improve appearance

Author: 2mik

ScadaDoc/ScadaDoc/ScadaDoc.csproj

@@ -232,6 +232,7 @@
     <Content Include="css\contents.less" />
     <Content Include="css\search.less" />
     <Content Include="css\cover.less" />
+    <Content Include="css\variables.less" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>

ScadaDoc/ScadaDoc/css/common.less

@@ -1,4 +1,8 @@
-body {
+@import "variables.less";
+
+body {
+    background-color: @content-back-color;
+    color: @content-fore-color;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     margin: 0;
@@ -33,20 +37,20 @@ p, ul, ol {
 }
 
 em {
-    color: #dd0055;
+    color: @content-fore-color-em;
 }
 
 a,
 a:active,
 a:hover,
 a:focus,
 a:visited {
-    color: #1fa2d6;
+    color: @link-fore-color;
     outline: 0;
     text-decoration: none;
 }
 
 a:hover {
-    color: #0074a2;
+    color: @link-hover-fore-color;
     text-decoration: underline;
 }

ScadaDoc/ScadaDoc/css/contents.less

@@ -1,4 +1,6 @@
-.sd-contents-wrapper {
+@import "variables.less";
+
+.sd-contents-wrapper {
     border-right: 5px solid #ddd;
     display: inline-block;
     margin: 0;
@@ -11,25 +13,30 @@
 .sd-contents {
     font-size: 13px;
     margin: 0;
-    padding: 10px;
+    padding: 10px 0;
 }
 
 .sd-contents-item {
-    margin: 7px 0;
+    padding: 5px 10px;
 }
 
 .sd-contents-item.level1 {
-    margin-left: 20px;
+    padding-left: 30px;
 }
 
 .sd-contents-item.level2 {
-    margin-left: 40px;
+    padding-left: 40px;
 }
 
 .sd-contents-item.level3 {
-    margin-left: 60px;
+    padding-left: 70px;
 }
 
 .sd-contents-item.selected {
-    font-weight: bold;
+    background-color: @link-fore-color;
+    color: @content-back-color;
 }
+
+.sd-contents-item.selected a {
+    color: @content-back-color;
+}

ScadaDoc/ScadaDoc/css/scadadoc.css

@@ -1,4 +1,6 @@
 body {
+  background-color: white;
+  color: black;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   margin: 0;
@@ -56,22 +58,26 @@ a:hover {
 .sd-contents {
   font-size: 13px;
   margin: 0;
-  padding: 10px;
+  padding: 10px 0;
 }
 .sd-contents-item {
-  margin: 7px 0;
+  padding: 5px 10px;
 }
 .sd-contents-item.level1 {
-  margin-left: 20px;
+  padding-left: 30px;
 }
 .sd-contents-item.level2 {
-  margin-left: 40px;
+  padding-left: 40px;
 }
 .sd-contents-item.level3 {
-  margin-left: 60px;
+  padding-left: 70px;
 }
 .sd-contents-item.selected {
-  font-weight: bold;
+  background-color: #1fa2d6;
+  color: white;
+}
+.sd-contents-item.selected a {
+  color: white;
 }
 .sd-article-wrapper {
   display: inline-block;
@@ -117,6 +123,7 @@ table.sd-article-table {
 }
 .gsc-control-cse {
   padding: 0 !important;
+  margin: 0 10px !important;
 }
 .gsc-control-cse input {
   box-sizing: content-box;

ScadaDoc/ScadaDoc/css/scadadoc.min.css

@@ -1,5 +1,6 @@
 .gsc-control-cse {
     padding: 0 !important;
+    margin: 0 10px !important;
 }
 
 .gsc-control-cse input {

ScadaDoc/ScadaDoc/css/search.less

@@ -0,0 +1,5 @@
+@content-back-color: white;
+@content-fore-color: black;
+@content-fore-color-em: #dd0055;
+@link-fore-color: #1fa2d6;
+@link-hover-fore-color: #0074a2;

ScadaDoc/ScadaDoc/css/variables.less

@@ -57,14 +57,18 @@ function createContents() {
     $.getScript(context.siteRoot + "js/contents-" + context.lang + ".js", function () {
         addContents(context);
 
-        var selItem = $(".sd-contents-item.selected:first");
-        if (selItem.length > 0) {
-            context.contents.scrollTop(selItem.offset().top);
-        }
-
         if (typeof onContentsCreated == "function") {
             onContentsCreated();
         }
+
+        // scroll contents
+        var selItem = $(".sd-contents-item.selected:first");
+        if (selItem.length > 0) {
+            // delay is needed to load search panel that affects contents height
+            setTimeout(function () {
+                context.contents.parent().scrollTop(selItem.offset().top)
+            }, 200);
+        }
     });
 }