From 1999f12b359473819e13737d4fc2b637371ec283 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tam=C3=A1s=20Zolnai?= Date: Tue, 18 Feb 2020 10:04:34 +0100 Subject: [PATCH] Revert "Revert "Mobile: change all media queries to:"" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 55d067bfee2eaa1629b1659bfb7dea0a0dc40bf5. Change-Id: I2077276e70e16324031b393a58bf802c3efdcb4f Reviewed-on: https://gerrit.libreoffice.org/c/online/+/88921 Tested-by: Tamás Zolnai Reviewed-by: Tamás Zolnai --- loleaflet/css/editor.css | 2 +- loleaflet/css/leaflet.css | 3 +-- loleaflet/css/loleaflet.css | 8 +++----- loleaflet/css/menubar-mobile.css | 2 +- loleaflet/css/menubar.css | 2 +- loleaflet/css/mobilewizard.css | 2 +- loleaflet/css/partsPreviewControl.css | 6 ++---- loleaflet/css/scrollBar.css | 2 +- loleaflet/css/selectionMarkers.css | 2 +- loleaflet/css/spreadsheet-mobile.css | 3 +-- loleaflet/css/toolbar-mobile.css | 2 +- loleaflet/css/vex.css | 2 +- 12 files changed, 15 insertions(+), 21 deletions(-) diff --git a/loleaflet/css/editor.css b/loleaflet/css/editor.css index bf534498e..2e1799ef8 100644 --- a/loleaflet/css/editor.css +++ b/loleaflet/css/editor.css @@ -19,7 +19,7 @@ text-align: center; padding: 3px 5px; } -@media (max-width: 767px), (max-device-height: 767px) { +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ #editor-btn{ max-width: 160px; } diff --git a/loleaflet/css/leaflet.css b/loleaflet/css/leaflet.css index 04ea07362..8326159c1 100644 --- a/loleaflet/css/leaflet.css +++ b/loleaflet/css/leaflet.css @@ -839,8 +839,7 @@ input.clipboard { display: none; } } - -@media (max-width: 767px),(max-device-height: 767px) { +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ .loleaflet-ruler { height: 0px; display: none; diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css index 2eef29afe..78db67b85 100644 --- a/loleaflet/css/loleaflet.css +++ b/loleaflet/css/loleaflet.css @@ -212,7 +212,7 @@ body { .w2ui-tag .w2ui-tag-top{display:none !important;} } -@media (max-width: 767px),(max-device-height: 767px) { +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ /* Show slidesorter beyond 768px only */ #presentation-controls-wrapper { top: initial; @@ -287,8 +287,7 @@ body { display: block !important; } } - -@media (max-width: 767px) and (orientation: portrait),(max-device-height: 767px) and (orientation: portrait) { +@media screen (max-width: 900px) and (orientation: portrait) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (orientation: portrait) and (any-pointer: coarse) and (hover: none){ #presentation-controls-wrapper { top: initial; left: initial; @@ -319,8 +318,7 @@ body { bottom: 33px; } } - -@media (max-width: 767px) and (orientation: landscape),(max-device-height: 767px) and (orientation: landscape) { +@media screen (max-width: 900px) and (orientation: landscape) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (orientation: landscape) and (any-pointer: coarse) and (hover: none){ #document-container.parts-preview-document { left: 66px !important; bottom: 33px; diff --git a/loleaflet/css/menubar-mobile.css b/loleaflet/css/menubar-mobile.css index 564eedc3e..c917ba595 100644 --- a/loleaflet/css/menubar-mobile.css +++ b/loleaflet/css/menubar-mobile.css @@ -1,4 +1,4 @@ -@media (max-width: 767px), (max-device-height: 767px) { +@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; diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css index 3edf69d1c..696cf262b 100644 --- a/loleaflet/css/menubar.css +++ b/loleaflet/css/menubar.css @@ -256,7 +256,7 @@ background-position: bottom; } -@media (max-width: 767px),(max-device-height: 767px) { +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ .document-logo { width: 35px; height: 38px; diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css index d8ed93a71..1cb1ab70c 100644 --- a/loleaflet/css/mobilewizard.css +++ b/loleaflet/css/mobilewizard.css @@ -1,4 +1,4 @@ -@media (max-width: 767px), (max-device-height: 767px){ +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ span.menu-entry-icon img { width: 24px !important; margin: 4px !important; diff --git a/loleaflet/css/partsPreviewControl.css b/loleaflet/css/partsPreviewControl.css index 8a9d46d7a..dd1e33dae 100644 --- a/loleaflet/css/partsPreviewControl.css +++ b/loleaflet/css/partsPreviewControl.css @@ -32,8 +32,7 @@ border: 2px solid #dfdfdf; margin-left: 20px; } - -@media (max-width: 767px) and (orientation: potrait),(max-device-height: 767px) and (orientation: portrait) { +@media screen (max-width: 900px) and (orientation: potrait) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (orientation: portrait) and (any-pointer: coarse) and (hover: none){ #slide-sorter { max-height: 60px; } @@ -50,8 +49,7 @@ padding-right: 1em; } } - -@media (max-width: 767px) and (orientation: landscape),(max-device-height: 767px) and (orientation: landscape) { +@media screen (max-width: 900px) and (orientation: landscape) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (orientation: landscape) and (any-pointer: coarse) and (hover: none){ #slide-sorter { max-width: 120px; } diff --git a/loleaflet/css/scrollBar.css b/loleaflet/css/scrollBar.css index 9e8a062ed..f881dc589 100644 --- a/loleaflet/css/scrollBar.css +++ b/loleaflet/css/scrollBar.css @@ -11,7 +11,7 @@ width: 100%; overflow: auto; } -@media (max-width: 767px), (max-device-height: 767px) { +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ .mCSB_scrollTools_vertical{ width: 38px !important; } diff --git a/loleaflet/css/selectionMarkers.css b/loleaflet/css/selectionMarkers.css index a0dd4ccde..c86394c53 100644 --- a/loleaflet/css/selectionMarkers.css +++ b/loleaflet/css/selectionMarkers.css @@ -26,7 +26,7 @@ #tb_formulabar_item_formula .inputbar_selection_handles{ /*display: none;*/ } -@media (max-width: 767px), (max-device-height: 767px) and (pointer: coarse) { +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ #tb_formulabar_item_formula, #tb_formulabar_item_address { height: 54px !important; } diff --git a/loleaflet/css/spreadsheet-mobile.css b/loleaflet/css/spreadsheet-mobile.css index c5af29197..74aa982cd 100644 --- a/loleaflet/css/spreadsheet-mobile.css +++ b/loleaflet/css/spreadsheet-mobile.css @@ -1,5 +1,4 @@ -@media (max-width: 767px), (max-device-height: 767px) { - +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ @-moz-document url-prefix() { #spreadsheet-row-column-frame.readonly { top: 36px !important; diff --git a/loleaflet/css/toolbar-mobile.css b/loleaflet/css/toolbar-mobile.css index b94857006..210b23fef 100644 --- a/loleaflet/css/toolbar-mobile.css +++ b/loleaflet/css/toolbar-mobile.css @@ -10,7 +10,7 @@ top:-1px; } } -@media (max-width: 767px), (max-device-height: 767px) { +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ .insertshape-grid { box-sizing: content-box; position: absolute; diff --git a/loleaflet/css/vex.css b/loleaflet/css/vex.css index dc7a9d660..5c9f430f5 100644 --- a/loleaflet/css/vex.css +++ b/loleaflet/css/vex.css @@ -64,7 +64,7 @@ } /*mobile*/ -@media (max-width: 767px), (max-device-height: 767px) { +@media screen (max-width: 900px) and (any-pointer: coarse) and (hover: none), (max-height: 900px) and (any-pointer: coarse) and (hover: none){ .vex-open .loleaflet-user-idle { background: rgba(0, 0, 0, 0)!important; font-size: xx-large!important;