stylesheet changes for graying corpus statstic and reload button(plus renaming)

Change-Id: I13394bd2fa8da48548a83142168b4448178ded6a
(cherry picked from commit 9586263a94a66446584d2ce2f2ad22f2fa677114)
diff --git a/Changes b/Changes
index d149d19..a0c1aca 100755
--- a/Changes
+++ b/Changes
@@ -2,6 +2,8 @@
         - Support attachements in metadata fields (#77).
         - Added ping request option to Piwik.
         - Fix handling of login errors.
+        - Added Statistics reload option (hebasta, #66).
+        - Fixed VC query serialization.
 
 0.31 2018-11-30
         - Update to Mojolicious >= 8.06.
diff --git a/dev/js/src/view/corpstatv.js b/dev/js/src/view/corpstatv.js
index a566287..ee65c03 100644
--- a/dev/js/src/view/corpstatv.js
+++ b/dev/js/src/view/corpstatv.js
@@ -133,29 +133,27 @@
      * Disabling corpus statistic if in vc builder a different vc is choosen.
      * After clicking at the reload-button the up-to-date corpus statistic is displayed.
      */   
+
     disableStat : function(){
       var statt = this._show;
-      
+  
       if(statt.getElementsByClassName('reloadStatB').length == 0){
-          var reloadspan = document.createElement('span');
-          reloadspan.classList.add('reloadStatB');
-          reloadb = reloadspan.addE('span');
-          reloadb.classList.add('refresh');
+        var reloadspan = document.createElement('div');
+        reloadspan.classList.add('reloadStatB'); 
+        reloadspan.classList.add('button-group');
+        reloadspan.classList.add('button-panel');    
+        reloadb = reloadspan.addE('span');
+        reloadb.classList.add('refresh');
           
-          var that = this;
+        var that = this;          
+        reloadb.addEventListener("click", function (e){    
+        statt.classList.remove('stdisabled');
+        that.panel.reloadCorpStat(); 
+        });
           
-          reloadb.addEventListener("click", function (e){    
-          statt.classList.remove('stdisabled');
-          that.panel.actions.element().querySelector(".statistic").classList.remove('stdisabled');
-          that.panel.reloadCorpStat(); 
-             });
-          
- 
+
         statt.appendChild(reloadspan);
         statt.classList.add('stdisabled');        
-        this.panel.actions.element().querySelector(".statistic").classList.add('stdisabled');
-        
-        console.log("Corpus statistic DISABLED");
         }
     },
 
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index a4d3f1e..3952e66 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -1,31 +1,65 @@
 @charset "utf-8";
 @import "../util";
 
+
+/* 
+Corpus statistic  
+Graying corpus statistic 
+*/
 div.stattable {
-	display: flex;
-	flex-direction: row;
+    display: flex;
+    flex-direction: row;
+}
+div.stattable {
+    > dl {
+        display: flex;
+        flex-flow: row wrap;
+        margin-top:4px;
+        margin-bottom:4px;
+        padding-bottom: 1px;   
+            > div {
+                border-color: $dark-green;
+                > dt {
+                    background-color: $middle-green;
+                    width: 15em;
+                    margin: 0;
+                    &:after {
+                    content: ":";
+                        }
+                    }   
+                > dd {
+                     background-color: $lightest-green;
+                     color: $dark-grey;
+                    }
+                }
+            }
+    &.stdisabled {
+        > dl 
+            > div {
+                > dt {
+                    @include vcinfo-inactive;
+                    }
+             > dd {
+                    @include vcinfo-inactive;
+                }
+            }
+        }
 }
 
-div.stattable > dl {
-  display: flex;
-  flex-flow: row wrap;
-  //margin-top: 4 * $border-size !important;
-  margin-top:4px;
-  margin-bottom:4px;
-  padding-bottom: 1px;   
-  > div {
-    border-color: $dark-green;
-    > dt {
-      background-color: $middle-green;
-      width: 15em;
-      margin: 0;
-      &:after {
-  		  content: ":";
-  	  }
+
+/* Corpus statistic reload button */
+div.reloadStatB {
+    font-family: 'FontAwesome';
+    padding-left: 2px;
+    z-index: 30;
     }
-   	> dd {
-      background-color: $lightest-green;
-      color: $dark-grey;
-	  }
-  }
-}
+span.refresh::after{
+    line-height: normal;
+    content : $fa-redo;
+    font-size: 15pt;
+    }
+
+/* Close-button should always be seen next to or above reload-button */
+.button-view.vcstatistic {
+    z-index: 30;
+    }
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index bb82ca0..90e20b1 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -38,6 +38,7 @@
 $middle-green:   lighten($ids-green-1, 9%);
 $light-green:    lighten($ids-green-1, 13%); // #7ba400;
 $lightest-green: #d8e38c; // lighten($ids-green-1, 26%);
+$grey-green: #bcc387;
 
 /**
  * Blue Colors
@@ -50,10 +51,10 @@
  * Grey Colors
  */
 $middle-grey:  $ids-grey-1; // #999;
+$semilight-grey: #8d8d8d;
 $light-grey:   $ids-grey-2; // #ddd;
 $dark-grey:    darken($middle-grey, 15%);
 $nearly-white: #fefefe;
-
 /**
  * Red Colors (no IDS relation)
  */
@@ -234,7 +235,15 @@
   appearance:none;
 }
 
-
+/** 
+* Mixin for the appearance of inactive elements in the vcinfo panel
+*/
+@mixin vcinfo-inactive{
+    background-color: $grey-green;
+    color: $semilight-grey;
+    border-color:   $semilight-grey; 
+    text-shadow: none;
+}
 /**
  * Font Awesome symbol table
  */
@@ -267,4 +276,5 @@
 $fa-to-query:     "\f102";
 $fa-cut:          "\f0c4";
 $fa-plugin:       "\f1e6";
-$fa-referto:      "\f0c5";
\ No newline at end of file
+$fa-referto:      "\f0c5";
+$fa-redo:         "\f01e";
diff --git a/package.json b/package.json
index 542e3b3..df09c86 100755
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "Kalamar",
   "description": "Mojolicious-based Frontend for KorAP",
   "license": "BSD-2-Clause",
-  "version": "0.31.1",
+  "version": "0.32.1",
   "pluginVersion": "0.1",
   "repository" : {
     "type": "git",