reducing the horizontal paddings to 12px; making search icon smaller

Author: chippison

plugins/CoreHome/stylesheets/layout.less

@@ -125,7 +125,7 @@ nav {
 
 #root {
   .pageWrap {
-    width: 100%;
+    width: calc(~'100% - 18px');  // 100% - pageWrap margin
     height: fit-content;
     padding-left: 9px;
     padding-right: 9px;
@@ -142,11 +142,17 @@ nav {
     min-width: 0;
   }
 
-  .pageWrap {
-    width: calc(~'100% - 18px');  // 100% - pageWrap margin
-  }
-
   .top_controls {
+    min-height: 51px;
+    position: relative;
+    background-color: @theme-color-background-base;
+    height: auto;
+    margin-bottom: 8px;
+    margin-top: 8px;
+    visibility: hidden;
+    opacity: 0;
+    padding-left: 18px;
+
     .icon-arrowup:before, .icon-arrowdown:before {
       padding: 17px 0 0 0;
       display: inline-block;
@@ -156,6 +162,51 @@ nav {
         display: none;
       }
     }
+
+    @media all and (max-width: 600px) {
+      height: auto;
+      padding-left: 0;
+
+      .piwikTopControl {
+        position: static !important;
+        float: none;
+        margin: 0 23px 10px 17px !important;
+        display: block !important;
+      }
+
+      .piwikSelector {
+        > a.title {
+            max-width: none;
+        }
+
+        display: block;
+      }
+    }
+
+    .quickAccessPlaceholder {
+      width: 0;
+      visibility: hidden;
+      display: inline-block;
+      position: relative;
+      margin-right: -1px;
+    }
+
+    .piwikTopControl {
+      display: inline-block;
+      float: none;
+      position: relative;
+      margin-right: 14px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      vertical-align: top;
+      font-size: 11px;
+    }
+
+    @media print {
+      .quick-access {
+        display: none !important;
+      }
+    }
   }
 
   @media only screen and (min-width: 993px) {
@@ -168,7 +219,7 @@ nav {
         flex: 0 0 224px;
         background-color: @theme-color-menu-contrast-background;
         box-shadow: none !important;
-        padding: 16px 16px;
+        padding: 16px 12px;
       }
 
       .layoutWithSidebarContent {
@@ -210,26 +261,6 @@ nav {
     }
   }
 
-  @media all and (max-width: 600px) {
-    .top_controls {
-      height: auto;
-
-      .piwikTopControl {
-        position: static !important;
-        float: none;
-        margin: 0 23px 10px 17px !important;
-        display: block !important;
-      }
-
-      .piwikSelector {
-        > a.title {
-            max-width: none;
-        }
-
-        display: block;
-      }
-    }
-  }
   #ajaxLoadingDiv {
     margin-bottom: 10px;
   }
@@ -345,7 +376,7 @@ nav {
               width: 98%;
               border-radius: 8px;
             }
-            &:hover {
+            &:hover, &.active {
               background-color: @theme-color-background-base;
               border-radius: 8px;
             }
@@ -464,29 +495,6 @@ nav {
       padding: 0;
     }
   }
-  .top_controls {
-    visibility: hidden;
-    opacity: 0;
-    padding-left: 18px;
-
-    .quickAccessPlaceholder {
-      width: 0;
-      visibility: hidden;
-      display: inline-block;
-      position: relative;
-      margin-right: -1px;
-    }
-    @media screen and (max-width: 600px){
-      visibility: hidden;
-      opacity: 0;
-      padding-left: 0;
-    }
-
-    .piwikTopControl {
-      margin-top: 10px;
-      margin-bottom: 10px;
-    }
-  }
 }
 
 .badge-menu-item-container {
@@ -519,7 +527,7 @@ nav {
   margin-left: 10px;
 }
 
-#root, #standalone {
+#standalone {
   .top_controls {
     min-height: 51px;
     position: relative;
@@ -582,12 +590,6 @@ nav {
     .layoutWithSidebar--hasSidebar .page > .pageWrap {
       width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
     }
-
-    .top_controls{
-      .quick-access {
-      display: none !important;
-      }
-    }
   }
   #content.home,
   #content.admin {

plugins/CoreHome/vue/dist/CoreHome.umd.js

@@ -3,7 +3,6 @@
   box-shadow: none !important;
   border: 1px solid @theme-color-background-lowContrast !important;
   border-radius: 8px !important;
-  width: 192px;
 
   &:hover,
   &.expanded,
@@ -26,8 +25,8 @@
 
   .icon-search {
     position: absolute;
-    font-size: 18px;
-    top: 10px;
+    font-size: 14px;
+    top: 13px;
     left: 12px;
     color: @theme-color-border;
 
@@ -48,7 +47,6 @@
     }
   }
   .quickAccessInside .quickAccessDropdown.dropdown {
-    width: 192px;
     padding: 8px;
     border-radius: 8px;
     margin-top: 5px;