view/theme/vier/mobile.css

   1 aside, header, #nav-search-box, #nav-admin-link, #nav-messages-linkmenu,  #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   box-sizing: border-box;
  12   left: 0px;
  13   width: 100%;
  14   max-width: 100%;
  15   padding: 5px;
  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   .desktop-view { display: none; }
  64   .mobile-view { display: initial; }
  65   #nav-apps-link { display: none; }
  66
  67   .wall-item-container .wall-item-info { width: auto; }
  68   .contact-photo-wrapper { width: 55px; }
  69   .wwto { left: 0px; }
  70
  71   .type-link > a { height: 120px; width: 100%; overflow: hidden; display: block; }
  72   .type-link > a > img { display: block; max-width: 100%!important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  73
  74     /** oembed **/
  75   .embed_video {
  76     float: none;
  77     margin: 0px;
  78     width: 100%;
  79     overflow: hidden;
  80     display: block;
  81   }
  82   .embed_video > img {
  83     display: block;
  84     width: 100% !important;
  85     height: 100% !important;
  86     max-width: 100% !important;
  87     object-fit: cover !important;
  88   }
  89   .embed_video > div {
  90     background-image: none !important; background-color: transparent !important;
  91     width: 100% !important; height: 110px !important;
  92   }
  93
  94   #login-extra-links, #login-form {
  95     /* width: 341px; */
  96     width: 100%;
  97   }
  98   #id_remember_label {
  99     width: unset;
 100   }
 101 }
 102
 103 @media screen and (max-width: 480px) {
 104   .wall-item-container .wall-item-content img,
 105   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
 106     max-width: 200px;
 107   }
 108   /* fix img width in threaded view - maybe there exists a better possibility to do this
 109     maybe this needs also to be done for tablet view*/
 110   .children .wall-item-container .wall-item-item .wall-item-content img {
 111     max-width: 100%;
 112   }
 113   iframe.embed_rich { width: 100% !important }
 114     /* TODO: check if this is needed.
 115    * oembedded iframe usually have "width" and "height" as attributes
 116    * that override this rule */
 117   iframe {
 118     max-width: 100%;
 119   }
 120
 121
 122   /* the top-nav notfication menu */
 123   nav #nav-notifications-linkmenu .menu-popup {
 124         position: fixed;
 125         left: 10px;
 126         right: 10px;
 127         top: 44px;
 128         bottom: 10px;
 129         width: auto;
 130         max-width: none;
 131         max-height: none;
 132   }
 133
 134
 135 }
 136
 137 .wall-item-container.thread_level_2,
 138 .wall-item-container.thread_level_3,
 139 .wall-item-container.thread_level_4,
 140 .wall-item-container.thread_level_5,
 141 .wall-item-container.thread_level_6,
 142 .wall-item-container.thread_level_7 {
 143   margin-left: 0;
 144   width: calc(100% - 10px);
 145 }
 146
 147 .wall-item-container.thread_level_2 .wall-item-content,
 148 .wall-item-container.thread_level_3 .wall-item-content,
 149 .wall-item-container.thread_level_4 .wall-item-content,
 150 .wall-item-container.thread_level_5 .wall-item-content,
 151 .wall-item-container.thread_level_6 .wall-item-content,
 152 .wall-item-container.thread_level_7 .wall-item-content {
 153   max-width: 100%;
 154 }
 155
 156 /* aside in/out */
 157 .mobile-aside-toggle {
 158         display: block !important;
 159 }
 160 .mobile-aside-toggle a {
 161         line-height: 35px;
 162         padding: 0 10px;
 163 }
 164 .mobile-aside-toggle a i {
 165         font-size: 22px;
 166         color: #CCC;
 167 }
 168
 169 aside {
 170         display: block;
 171         position: fixed;
 172         max-width: 400px;
 173         width: 80%;
 174         left: -100%;
 175         -webkit-transition: left 0.5s;
 176         -moz-transition: left 0.5s;
 177         -o-transition: left 0.5s;
 178         transition: left 0.5s;
 179 }
 180
 181 aside.show {
 182         left: 0;
 183 }
 184
 185 /* tabs */
 186 .tabs { position: relative; height: 25px!important; }
 187 .tabs li { width: 100%; }
 188 .tabs .tab { display: none;}
 189 .tabs .tab.active { display: block; }
 190 .tabs::after {
 191         font-family: FontAwesome;
 192         text-align: right;
 193         content: "\f13a";
 194         display: block;
 195         position: absolute;
 196         left: 0; right:0; top: 0; bottom: 0;
 197         padding: 8px 2px 0 0;
 198 }
 199
 200 .tabs.show {
 201         position: fixed;
 202         z-index: 1000;
 203         left: 10px;
 204         right: 10px;
 205         top: 0px;
 206         bottom: 10px;
 207         height: auto !important;
 208         border: 1px solid #ccc;
 209 }
 210 .tabs.show::after { display: none; }
 211 .tabs.show .tab { display: block; }
 212
 213 /* jot buttons */
 214 #profile-jot-submit,
 215 #jot-preview-link {
 216     float: none;
 217     display: block;
 218     width: 100%;
 219     margin: 0 0 1em 0;
 220 }
 221 #profile-jot-submit-wrapper > div {
 222     margin: 0 1em 1em 0;
 223 }
 224 #profile-jot-submit-wrapper > div#profile-jot-perms { margin: 0; }
 225
 226 /* ACL window */
 227 #profile-jot-acl-wrapper, #profile-jot-acl-wrapper * { box-sizing: border-box; }
 228 #acl-wrapper { width: 100%; float: none; }
 229 #acl-search { width: 100%; float: none; padding-right: 0px; margin-bottom: 1em; }
 230 #acl-showall { width: 100%; height: 48px; margin-bottom: 1em; }
 231 .acl-list-item { width: auto; float: none; height: auto; overflow: hidden; position: relative;}
 232 .acl-list-item img { width: 48px; height: 48px; }
 233 .acl-list-item p { height: auto; font-size: inherit; }
 234 .acl-list-item a {
 235   float: none;
 236   position: absolute;
 237   top: 5px;
 238   right: 5px;
 239   height: 48px;
 240   padding: 10px 2px 2px 2px;
 241   font-size: 12px;
 242   width: 20%;
 243   text-align: center;
 244   background-position: center 5px;
 245 }
 246 .acl-list-item a.acl-button-hide { right: 25%; }
 247 /* flexbox for ACL window */
 248 #cboxLoadedContent,
 249 #cboxLoadedContent > div,
 250 #acl-wrapper {
 251   display: -ms-Flexbox !important;
 252   -ms-box-orient: vertival;
 253
 254   display: -webkit-flex !important;
 255   display: -moz-flex !important;
 256   display: -ms-flex !important;
 257   display: flex !important;
 258
 259   -webkit-flex-flow: column;
 260   -moz-flex-flow: column;
 261   -ms-flex-flow: column;
 262   flex-flow: column;
 263
 264   -webkit-flex: 1 100%;
 265   -moz-flex: 1 100%;
 266   -ms-flex: 1 100%;
 267   flex: 1 100%;
 268 }
 269 #acl-list {
 270   -webkit-flex: 1 1 auto;
 271   -moz-flex: 1 1 auto;
 272   -ms-flex: 1 1 auto;
 273   flex: 1 1 auto;
 274 }
 275
 276 /** input elements **/
 277 input,
 278 textarea,
 279 select {
 280     font-size: 18px;
 281     border: 1px solid #888;
 282     padding: 0.2em;
 283 }
 284 input:focus,
 285 textarea:focus,
 286 select:focus {
 287     box-shadow: 1px 1px 10px rgba(46, 151, 255, 0.62);
 288 }
 289
 290 .field, .field > * {  box-sizing: border-box; }
 291 .field label { width: 100%; float: none; display: block; }
 292 .field input, .field textarea, .field select { max-width: 100%; width: 100%; }
 293 .field.yesno .onoff,
 294 .field.checkbox input { width: auto; float: right; }
 295 .field.yesno label,
 296 .field.checkbox label { width: 70%; float: left; }
 297 .field .field_help { margin: 0; }
 298
 299 /** event **/
 300 .event-start, .event-end { width: auto; }
 301 .event-start .dtstart, .event-end .dtend { float: none; display: block; }
 302
 303