Merge remote-tracking branch 'upstream/develop' into 1512-ostatus-comment

[friendica.git] / view / theme / vier / mobile.css

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index ba8254d7fe289442bf5d1a7b3436a3153b0fbba4..d06cb410117586432e546c3d1f6494390e7e2e2e 100644 (file)
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -24,11 +24,13 @@ body, section, nav .nav-menu, div.pager, ul.tabs {
 }
 
 nav {
-  min-width: 480px;
+  min-width: 100%;
 }
 
 .wall-item-container .wall-item-content {
   max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 /*  margin-left: -70px;
   padding-top: 25px; */
 }
@@ -86,3 +88,60 @@ nav ul {
 .wall-item-container.thread_level_7 .wall-item-content {
   max-width: 100%;
 }
+
+/* aside in/out */
+.mobile-aside-toggle {
+       display: block !important;
+}
+.mobile-aside-toggle a {
+       line-height: 35px;
+       padding: 0 10px;
+}
+.mobile-aside-toggle a i {
+       font-size: 22px;
+       color: #CCC;
+}
+
+aside {
+       display: block;
+       position: fixed;
+       max-width: 400px;
+       width: 80%;
+       left: -100%;
+       -webkit-transition: left 0.5s;
+       -moz-transition: left 0.5s;
+       -o-transition: left 0.5s;
+       transition: left 0.5s;
+}
+
+aside.show {
+       left: 0;
+}
+
+/* tabs */
+.tabs { position: relative; height: 25px!important; }
+.tabs li { width: 100%; }
+.tabs .tab { display: none;}
+.tabs .tab.active { display: block; }
+.tabs::after {
+       font-family: FontAwesome;
+       text-align: right;
+       content: "\f13a";
+       display: block;
+       position: absolute;
+       left: 0; right:0; top: 0; bottom: 0;
+       padding: 8px 2px 0 0;
+}
+
+.tabs.show {
+       position: fixed;
+       z-index: 1000;
+       left: 10px;
+       right: 10px;
+       top: 0px;
+       bottom: 10px;
+       height: auto !important;
+       border: 1px solid #ccc;
+}
+.tabs.show::after { display: none; }
+.tabs.show .tab { display: block; }