From: fabrixxm <fabrix.xm@gmail.com>
Date: Wed, 26 Apr 2017 06:58:45 +0000 (+0200)
Subject: mobile aside: max-width and transparent overlay
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=bd4ce2daeee6958e4c693a5b545f54b67fb4e5dc;p=friendica.git

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 9e0fafad1b..e65b81ac19 100644
--- 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