}
section {
- /* left: calc((100% - (784px)) / 2); */
+ box-sizing: border-box;
left: 0px;
- width: calc(100% - 20px);
+ width: 100%;
max-width: 100%;
- padding: 10px;
+ padding: 5px;
}
body, section, nav .nav-menu, div.pager, ul.tabs {
.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,
- .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: 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,
.wall-item-container.thread_level_5,
.wall-item-container.thread_level_6,
.wall-item-container.thread_level_7 {
- margin-left: 60px;
- width: calc(100% - 70px);
+ margin-left: 0;
+ width: calc(100% - 10px);
}
.wall-item-container.thread_level_2 .wall-item-content,
max-width: 100%;
}
+.wall-item-container .wall-item-info { width: auto; }
+.contact-photo-wrapper { width: 55px; }
+.wwto { left: 0px; }
+
/* aside in/out */
.mobile-aside-toggle {
display: block !important;
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;
}
}
.tabs.show::after { display: none; }
.tabs.show .tab { display: block; }
+
+/* jot buttons */
+#profile-jot-submit,
+#jot-preview-link {
+ float: none;
+ display: block;
+ width: 100%;
+ margin: 0 0 1em 0;
+}
+#profile-jot-submit-wrapper > div {
+ margin: 0 1em 1em 0;
+}
+#profile-jot-submit-wrapper > div#profile-jot-perms { margin: 0; }
+
+/* ACL window */
+#profile-jot-acl-wrapper, #profile-jot-acl-wrapper * { box-sizing: border-box; }
+#acl-wrapper { width: 100%; float: none; }
+#acl-search { width: 100%; float: none; padding-right: 0px; margin-bottom: 1em; }
+#acl-showall { width: 100%; height: 48px; margin-bottom: 1em; }
+.acl-list-item { width: auto; float: none; height: auto; overflow: hidden; position: relative;}
+.acl-list-item img { width: 48px; height: 48px; }
+.acl-list-item p { height: auto; font-size: inherit; }
+.acl-list-item a {
+ float: none;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ height: 48px;
+ padding: 10px 2px 2px 2px;
+ font-size: 12px;
+ width: 20%;
+ text-align: center;
+ background-position: center 5px;
+}
+.acl-list-item a.acl-button-hide { right: 25%; }
+/* flexbox for ACL window */
+#cboxLoadedContent,
+#cboxLoadedContent > div,
+#acl-wrapper {
+ display: -ms-Flexbox !important;
+ -ms-box-orient: vertival;
+
+ display: -webkit-flex !important;
+ display: -moz-flex !important;
+ display: -ms-flex !important;
+ display: flex !important;
+
+ -webkit-flex-flow: column;
+ -moz-flex-flow: column;
+ -ms-flex-flow: column;
+ flex-flow: column;
+
+ -webkit-flex: 1 100%;
+ -moz-flex: 1 100%;
+ -ms-flex: 1 100%;
+ flex: 1 100%;
+}
+#acl-list {
+ -webkit-flex: 1 1 auto;
+ -moz-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+/** input elements **/
+input,
+textarea,
+select {
+ font-size: 18px;
+ border: 1px solid #888;
+ padding: 0.2em;
+}
+input:focus,
+textarea:focus,
+select:focus {
+ box-shadow: 1px 1px 10px rgba(46, 151, 255, 0.62);
+}
+
+.field, .field > * { box-sizing: border-box; }
+.field label { width: 100%; float: none; display: block; }
+.field input, .field textarea, .field select { max-width: 100%; width: 100%; }
+.field.yesno .onoff,
+.field.checkbox input { width: auto; float: right; }
+.field.yesno label,
+.field.checkbox label { width: 70%; float: left; }
+.field .field_help { margin: 0; }
+
+/** event **/
+.event-start, .event-end { width: auto; }
+.event-start .dtstart, .event-end .dtend { float: none; display: block; }
+
+/** oembed **/
+.embed_video {
+ float: none;
+ margin: 0px;
+ height: 120px;
+ width: 100%;
+ overflow: hidden;
+ display: block;
+}
+.embed_video > img {
+ display: block;
+ width: 100% !important;
+ height: auto !important;
+ max-width: 100% !important;
+}
+.embed_video > div {
+ background-image: none !important; background-color: transparent !important;
+ width: 100% !important; height: 110px !important;
+}
+
+.type-link > a { height: 120px; width: 100%; overflow: hidden; display: block; }
+.type-link > a > img { display: block; max-width: 100%!important; width: 100% !important; height: auto !important; }
\ No newline at end of file