X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Ffrio%2Fcss%2Fstyle.css;fp=view%2Ftheme%2Ffrio%2Fcss%2Fstyle.css;h=8cc8997930ed7792b179cd26536b89fea4f1ba34;hb=4a473611163a12b48d3bbad71dc54765be8789f9;hp=01cab105bc4602d610923f2f6bffeede36188b1f;hpb=fd9c9603e40025d59fef05bcc068b3c95c35e066;p=friendica.git

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 01cab105bc..8cc8997930 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -100,6 +100,36 @@ code {
 }
 .help-content-wrapper code, .help-aside-wrapper code {display: inline}
 
+/**
+ * mobile aside
+ */
+@media screen and (max-width: 990px) {
+    aside{
+        position: fixed!important;
+        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);
+        opacity: 0;
+        transition: opacity 0.5s;
+    }
+    aside.canvas-slid::before {
+        opacity: 1;
+    }
+
+    /* prevent page scroll when the aside is opened **/
+    body.aside-out { overflow: hidden; }
+}
 /*
 * standard page elements
 */