X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Fvier%2Fmobile.css;h=bf7922287600bede9cb989348520eb09e50674d5;hb=2a0e18c7dd95a3c07640c173ea400803cf6738f4;hp=1bdb8d5a954d40bbd06ac135f51359214a6e6669;hpb=08abb4ae79a50fcf94fe9af4e90c8187497615b5;p=friendica.git diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css index 1bdb8d5a95..bf79222876 100644 --- a/view/theme/vier/mobile.css +++ b/view/theme/vier/mobile.css @@ -60,17 +60,44 @@ nav ul { .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; } + .desktop-view { display: none; } + .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; } - .type-link > a { width: 100%; overflow: hidden; display: block; } - .type-link > a > img { display: block; max-width: 100%!important; width: 100% !important; height: auto !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: 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; + } + + #login-extra-links, #login-form { + /* width: 341px; */ + width: 100%; + } + #id_remember_label { + width: unset; + } } @media screen and (max-width: 480px) { @@ -83,15 +110,28 @@ nav ul { .children .wall-item-container .wall-item-item .wall-item-content img { max-width: 100%; } + 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 */ iframe { max-width: 100%; } - /* the top-nav notfication menu - Note: the device needs a min display width of 320px */ - #nav-notifications-menu { - width: 270px; + + /* 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; } + + } .wall-item-container.thread_level_2, @@ -260,22 +300,4 @@ select:focus { .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; -} +