-aside, header, #nav-events-link, #search-box, #nav-admin-link, #activitiy-by-date-tab, #shared-links-tab {
+aside, header, #nav-events-link, #search-box, #nav-admin-link, #activitiy-by-date-tab, #shared-links-tab,
+.wall-item-location {
display: none;
}
padding: 10px;
}
-body, section, nav .nav-menu, div.pager, ul.tabs, .wall-item-container .wall-item-ago, .wall-item-network,
-.type-link blockquote, .type-video blockquote {
+body, section, nav .nav-menu, div.pager, ul.tabs {
font-size: 16px;
}
+.wall-item-container .wall-item-ago, .wall-item-network,.type-link blockquote, .type-video blockquote {
+ font-size: 13px;
+}
+
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; */
}
-.wall-item-container .wall-item-content img {
- max-width: 400px;
-}
-
nav ul {
margin-left: 0px;
}
+
+.wall-item-container .wall-item-content img,
+.children .wall-item-container .wall-item-item .wall-item-content img,
.wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
- max-width: 400px;
+ max-width: 650px;
+}
+
+@media screen and (max-width: 800px) {
+ .wall-item-container .wall-item-content img,
+ .children .wall-item-container .wall-item-item .wall-item-content img,
+ .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
+ max-width: 450px;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .wall-item-container .wall-item-content img,
+ .children .wall-item-container .wall-item-item .wall-item-content img,
+ .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
+ max-width: 350px;
+ }
+ a.desktop-view { display: none; }
+ a.mobile-view { display: initial; }
+ #nav-apps-link { display: none; }
+}
+
+@media screen and (max-width: 480px) {
+ .wall-item-container .wall-item-content img,
+ .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
+ max-width: 200px;
+ }
+ /* fix img width in threaded view - maybe there exists a better possibility to do this
+ maybe this needs also to be done for tablet view*/
+ .children .wall-item-container .wall-item-item .wall-item-content img {
+ max-width: 100%;
+ }
+ iframe {
+ max-width: 100%;
+ }
+
+ /* the top-nav notfication menu
+ Note: the device needs a min display width of 320px */
+ #nav-notifications-menu {
+ width: 270px;
+ }
}
.wall-item-container.thread_level_2,
margin-left: 60px;
width: calc(100% - 70px);
}
+
+.wall-item-container.thread_level_2 .wall-item-content,
+.wall-item-container.thread_level_3 .wall-item-content,
+.wall-item-container.thread_level_4 .wall-item-content,
+.wall-item-container.thread_level_5 .wall-item-content,
+.wall-item-container.thread_level_6 .wall-item-content,
+.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; }