mobile aside: max-width and transparent overlay

fix maximum aside with in mobile screen at 300px.
This way the aside will not cover all the screen.
The area not covered by aside element are dimmed by a semi-transparent overlay

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 9e0fafad1b1ce96095a71696829a6e6e52ad8e33..e65b81ac19c5198ec2b9c6f55ea115649a5bf7e8 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -109,10 +109,22 @@ code {
         top: 0!important;
         background-color: #fff;
         width: 100%;
+        max-width: 300px;
         height: 100%;
         padding-top: 100px;
         z-index: 10;
     }
+    aside::before {
+        content: " ";
+        position: fixed;
+        display: block;
+        top: 0; left: 300px; right: 0; bottom: 0;
+        background-color: rgba(0,0,0,0.4);
+    }
+    aside + div {
+        display:none!important;
+    }
+
 }
 /*
 * standard page elements