libreoffice-online/loleaflet/css/menubar-mobile.css
Pedro Pinto Silva ef48e44c0e Mobile: change all media queries to:
- Include phablet size
- Ensure that the mobile css rules do not kick in when on Desktop (900px window)
-- Detect if the primary input mechanism cannot hover at all or cannot conveniently hover (hover:none)
-- Detect if at least one input mechanism includes a pointing device of limited accuracy (any-pointer:coarse)

Change-Id: Idf1494acbd52ecd40e9082c8cf6f4ce88ecf9ac6
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/88862
Tested-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
Reviewed-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
2020-02-17 15:53:33 +01:00

59 lines
1.1 KiB
CSS

@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){
.logo {
background-size: 100px;
max-width: 24px;
max-height: 31px;
top: 0;
}
#toolbar-logo {
width: 0px !important;
}
#main-menu{
width: 98%;
}
#main-menu > li{
min-height: 56px;
border: none;
}
#main-menu > li > a{
font-size: 18px !important;
border: none;
}
.lo-menu ul{
border: none !important;
background-color: #f7f7f7 !important;
}
.lo-menu ul > li{
height: auto;
}
.lo-menu ul > li > ul > li > a{
height: 56px;
display: flex;
flex-direction: row;
align-items: center;
}
.lo-menu ul >li > .separator{
display: none;
}
.lo-menu ul > li > a{
width: 100%;
height: 56px;
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
font-weight: bold;
color: #404040;
}
#document-header{
display: none !important;
}
@media (orientation: landscape) {
#mobile-wizard.menuwizard #mobile-wizard-content.with-slide-sorter-above {
overflow-y: auto !important;
}
}
}