view/theme/vier/mobile.css

   1 aside, header, #nav-events-link, #search-box, #nav-admin-link, #activitiy-by-date-tab, #shared-links-tab,
   2 .wall-item-location {
   3   display: none;
   4 }
   5
   6 .hide-comments-outer {
   7   width: calc(100% - 105px);
   8 }
   9
  10 section {
  11   /* left: calc((100% - (784px)) / 2); */
  12   left: 0px;
  13   width: calc(100% - 20px);
  14   max-width: 100%;
  15   padding: 10px;
  16 }
  17
  18 body, section, nav .nav-menu, div.pager, ul.tabs {
  19   font-size: 16px;
  20 }
  21
  22 .wall-item-container .wall-item-ago, .wall-item-network,.type-link blockquote, .type-video blockquote {
  23   font-size: 13px;
  24 }
  25
  26 nav {
  27   min-width: 100%;
  28 }
  29
  30 .wall-item-container .wall-item-content {
  31   max-width: 100%;
  32   overflow: hidden;
  33   text-overflow: ellipsis;
  34 /*  margin-left: -70px;
  35   padding-top: 25px; */
  36 }
  37
  38 nav ul {
  39     margin-left: 0px;
  40 }
  41
  42
  43 .wall-item-container .wall-item-content img,
  44 .children .wall-item-container .wall-item-item .wall-item-content img,
  45 .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
  46   max-width: 650px;
  47 }
  48
  49 @media screen and (max-width: 800px) {
  50   .wall-item-container .wall-item-content img,
  51   .children .wall-item-container .wall-item-item .wall-item-content img,
  52   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
  53     max-width: 450px;
  54   }
  55 }
  56
  57 @media screen and (max-width: 600px) {
  58   .wall-item-container .wall-item-content img,
  59   .children .wall-item-container .wall-item-item .wall-item-content img,
  60   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
  61     max-width: 350px;
  62   }
  63   a.desktop-view { display: none; }
  64   a.mobile-view { display: initial; }
  65   #nav-apps-link { display: none; }
  66 }
  67
  68 @media screen and (max-width: 480px) {
  69   .wall-item-container .wall-item-content img,
  70   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
  71     max-width: 200px;
  72   }
  73   /* fix img width in threaded view - maybe there exists a better possibility to do this
  74     maybe this needs also to be done for tablet view*/
  75   .children .wall-item-container .wall-item-item .wall-item-content img {
  76     max-width: 100%;
  77   }
  78   iframe {
  79     max-width: 100%;
  80   }
  81
  82   /* the top-nav notfication menu
  83     Note: the device needs a min display width of 320px */
  84   #nav-notifications-menu {
  85     width: 270px;
  86   }
  87 }
  88
  89 .wall-item-container.thread_level_2,
  90 .wall-item-container.thread_level_3,
  91 .wall-item-container.thread_level_4,
  92 .wall-item-container.thread_level_5,
  93 .wall-item-container.thread_level_6,
  94 .wall-item-container.thread_level_7 {
  95   margin-left: 60px;
  96   width: calc(100% - 70px);
  97 }
  98
  99 .wall-item-container.thread_level_2 .wall-item-content,
 100 .wall-item-container.thread_level_3 .wall-item-content,
 101 .wall-item-container.thread_level_4 .wall-item-content,
 102 .wall-item-container.thread_level_5 .wall-item-content,
 103 .wall-item-container.thread_level_6 .wall-item-content,
 104 .wall-item-container.thread_level_7 .wall-item-content {
 105   max-width: 100%;
 106 }
 107
 108 /* aside in/out */
 109 .mobile-aside-toggle {
 110         display: block !important;
 111 }
 112 .mobile-aside-toggle a {
 113         line-height: 35px;
 114         padding: 0 10px;
 115 }
 116 .mobile-aside-toggle a i {
 117         font-size: 22px;
 118         color: #CCC;
 119 }
 120
 121 aside {
 122         display: block;
 123         position: fixed;
 124         max-width: 400px;
 125         width: 80%;
 126         left: -100%;
 127         -webkit-transition: left 0.5s;
 128         -moz-transition: left 0.5s;
 129         -o-transition: left 0.5s;
 130         transition: left 0.5s;
 131 }
 132
 133 aside.show {
 134         left: 0;
 135 }
 136
 137 /* tabs */
 138 .tabs { position: relative; height: 25px!important; }
 139 .tabs li { width: 100%; }
 140 .tabs .tab { display: none;}
 141 .tabs .tab.active { display: block; }
 142 .tabs::after {
 143         font-family: FontAwesome;
 144         text-align: right;
 145         content: "\f13a";
 146         display: block;
 147         position: absolute;
 148         left: 0; right:0; top: 0; bottom: 0;
 149         padding: 8px 2px 0 0;
 150 }
 151
 152 .tabs.show {
 153         position: fixed;
 154         z-index: 1000;
 155         left: 10px;
 156         right: 10px;
 157         top: 0px;
 158         bottom: 10px;
 159         height: auto !important;
 160         border: 1px solid #ccc;
 161 }
 162 .tabs.show::after { display: none; }
 163 .tabs.show .tab { display: block; }