Fixed unusable overlay in fullscreen mode

2021-11-02 20:06:06 +01:00
parent a10bc713f2
commit 12de93b397
3 changed files with 30 additions and 30 deletions
--- a/examples/resources/external-map-map.html
+++ b/examples/resources/external-map-map.html
@@ -6,39 +6,25 @@
      body {
        margin: 0;
      }
-      .container {
-        position: relative;
-        height: 100%;
-        width: 100%;
-      }
-      #unusable-overlay,
      .map {
-        position: absolute;
-        top: 0;
-        left: 0;
        height: 100%;
-        width: 100%;
      }
-      .unusable #unusable-overlay {
-        background-color: rgba(0, 0, 0, .7);
-        font-size: 3rem;
-        font-weight: bold;
-        color: white;
+      .map.unusable .ol-mask {
+        height: 100%;
        display: flex;
        align-items: center;
-        user-select: none;
        justify-content: center;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        user-select: none;
+        background-color: rgba(0, 0, 0, .7);
+        color: white;
+        font: bold 3rem 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
-      .unusable .map .ol-control {
+      .map.unusable .ol-control {
        display: none;
      }
    </style>
  </head>
-  <body class="container">
+  <body>
    <div id="map" class="map"></div>
-    <div id="unusable-overlay" hidden>
-      <span>Map not usable</span>
-    </div>
  </body>
 </html>