friendica/view/theme/vier/mobile.css

297 lines
7.3 KiB
CSS
Raw Normal View History

aside, header, #nav-events-link, #nav-search-box, #nav-admin-link, #activitiy-by-date-tab, #shared-links-tab,
2015-11-03 22:11:36 +00:00
.wall-item-location {
display: none;
}
.hide-comments-outer {
width: calc(100% - 105px);
}
section {
box-sizing: border-box;
left: 0px;
width: 100%;
max-width: 100%;
padding: 5px;
}
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 {
2015-11-08 18:08:00 +00:00
min-width: 100%;
}
.wall-item-container .wall-item-content {
2015-11-03 22:11:36 +00:00
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
/* margin-left: -70px;
padding-top: 25px; */
}
nav ul {
margin-left: 0px;
}
2015-11-03 22:11:36 +00:00
.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 {
2015-11-03 22:11:36 +00:00
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;
}
2015-12-28 23:23:59 +00:00
a.desktop-view { display: none; }
a.mobile-view { display: initial; }
#nav-apps-link { display: none; }
.wall-item-container .wall-item-info { width: auto; }
.contact-photo-wrapper { width: 55px; }
.wwto { left: 0px; }
2016-04-25 18:30:02 +00:00
.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: 100% !important; object-fit: cover !important; }
/** oembed **/
.embed_video {
float: none;
margin: 0px;
width: 100%;
overflow: hidden;
display: block;
}
.embed_video > img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
.embed_video > div {
background-image: none !important; background-color: transparent !important;
width: 100% !important; height: 110px !important;
}
2015-11-03 22:11:36 +00:00
}
@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;
}
2016-01-30 00:53:21 +00:00
/* 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%;
}
2016-05-02 12:17:55 +00:00
iframe.embed_rich { width: 100% !important }
/* TODO: check if this is needed.
* oembedded iframe usually have "width" and "height" as attributes
* that override this rule */
2016-01-30 00:53:21 +00:00
iframe {
max-width: 100%;
}
/* the top-nav notfication menu */
nav #nav-notifications-linkmenu .menu-popup {
position: fixed;
left: 10px;
right: 10px;
top: 44px;
bottom: 10px;
width: auto;
max-width: none;
max-height: none;
2016-01-30 00:53:21 +00:00
}
}
.wall-item-container.thread_level_2,
.wall-item-container.thread_level_3,
.wall-item-container.thread_level_4,
.wall-item-container.thread_level_5,
.wall-item-container.thread_level_6,
.wall-item-container.thread_level_7 {
margin-left: 0;
width: calc(100% - 10px);
}
2015-11-03 22:11:36 +00:00
.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%;
}
2015-11-08 18:08:00 +00:00
/* 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;
2015-11-08 18:08:00 +00:00
max-width: 400px;
width: 80%;
left: -100%;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-o-transition: left 0.5s;
2015-11-08 18:08:00 +00:00
transition: left 0.5s;
}
aside.show {
left: 0;
}
2015-11-11 17:39:32 +00:00
/* tabs */
.tabs { position: relative; height: 25px!important; }
.tabs li { width: 100%; }
.tabs .tab { display: none;}
.tabs .tab.active { display: block; }
.tabs::after {
2015-11-11 18:06:35 +00:00
font-family: FontAwesome;
text-align: right;
content: "\f13a";
2015-11-11 17:39:32 +00:00
display: block;
position: absolute;
left: 0; right:0; top: 0; bottom: 0;
2015-11-11 18:06:35 +00:00
padding: 8px 2px 0 0;
2015-11-11 17:39:32 +00:00
}
.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; }
/* 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; }