support preview mode background

Author: haroun

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextDevicePreviewMode.vue

@@ -64,8 +64,8 @@ export default {
       width,
       height
     }) {
+      document.querySelector('body').setAttribute('data-device-preview-mode', mode);
       document.querySelector('[data-apos-refreshable]').setAttribute('data-resizable', this.resizable);
-      document.querySelector('[data-apos-refreshable]').setAttribute('data-device-preview-mode', mode);
       document.querySelector('[data-apos-refreshable]').setAttribute('data-label', this.$t(label));
       document.querySelector('[data-apos-refreshable]').style.width = width;
       document.querySelector('[data-apos-refreshable]').style.height = height;
@@ -84,8 +84,8 @@ export default {
       height
     }) {
       if (this.mode === mode || mode === null) {
+        document.querySelector('body').removeAttribute('data-device-preview-mode');
         document.querySelector('[data-apos-refreshable]').removeAttribute('data-resizable');
-        document.querySelector('[data-apos-refreshable]').removeAttribute('data-device-preview-mode');
         document.querySelector('[data-apos-refreshable]').removeAttribute('data-label');
         document.querySelector('[data-apos-refreshable]').style.removeProperty('width');
         document.querySelector('[data-apos-refreshable]').style.removeProperty('height');

modules/@apostrophecms/ui/ui/apos/scss/global/_device_preview.scss

@@ -1,20 +1,24 @@
-[data-apos-refreshable][data-device-preview-mode] {
-  container-type: size;
-  flex-grow: unset;
-  margin: 60px auto auto;
-  border: 1px solid var(--a-base-2);
-  box-shadow: 0 0 3px var(--a-base-2);
+body[data-device-preview-mode] {
+  background-color: var(--a-base-10);
 
-  &[data-resizable="true"] {
-    resize: both;
-    overflow: scroll;
-  }
+  [data-apos-refreshable] {
+    container-type: size;
+    flex-grow: unset;
+    margin: 60px auto auto;
+    border: 1px solid var(--a-base-2);
+    box-shadow: 0 2px 10px 2px var(--a-base-5);
+    background-color: var(--a-background-primary);
+
+    &[data-resizable="true"] {
+      resize: both;
+      overflow: scroll;
+    }
 
-  &::before {
-    content: attr(data-label);
-    position: relative;
-    top: -1.5rem;
-    left: $spacing-half;
-    display: block;
+    &::before {
+      content: attr(data-label);
+      position: relative;
+      top: -1.5rem;
+      display: block;
+    }
   }
 }