| 1 |
/*!*****************************************************************************************************************************************************************************************************************************************************!*\ |
| 2 |
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./dev/scss/frames/_iframe.scss ***! |
| 3 |
\*****************************************************************************************************************************************************************************************************************************************************/ |
| 4 |
html[frame-adminify-iframe=true] { |
| 5 |
padding-top: 0 !important; |
| 6 |
} |
| 7 |
|
| 8 |
html[frame-adminify-iframe=true] #adminmenumain, |
| 9 |
html[frame-adminify-iframe=true] #wpadminbar { |
| 10 |
display: none !important; |
| 11 |
} |
| 12 |
|
| 13 |
html[frame-adminify-iframe=true] #wpcontent, |
| 14 |
html[frame-adminify-iframe=true] #wpfooter { |
| 15 |
margin-left: 0 !important; |
| 16 |
margin-right: 0 !important; |
| 17 |
} |
| 18 |
|
| 19 |
/** |
| 20 |
* Pre-publish panel in the block editor - duplicate Publish button. |
| 21 |
* |
| 22 |
* Core anchors the panel below the admin bar - `top: 46px` below 782px where the |
| 23 |
* panel is full-bleed, `top: 32px` on desktop where it is the right-hand sidebar - |
| 24 |
* so it lines up with the editor header it is meant to cover. Inside the Adminify |
| 25 |
* frame the admin bar is hidden (above) and the editor header moves up to the top |
| 26 |
* of the iframe, so that gap leaves the header - Publish button and all - showing |
| 27 |
* above the panel's own Cancel / Publish row. Anchor the panel to the top of the |
| 28 |
* iframe at every width so it covers the header the way it does in the default |
| 29 |
* admin. Newer core builds drive the offset from `--wp-admin--admin-bar--height`, |
| 30 |
* so zero that too for anything else keyed to it. |
| 31 |
*/ |
| 32 |
html[frame-adminify-iframe=true] { |
| 33 |
--wp-admin--admin-bar--height: 0px; |
| 34 |
} |
| 35 |
|
| 36 |
html[frame-adminify-iframe=true] .editor-post-publish-panel { |
| 37 |
top: 0; |
| 38 |
} |
| 39 |
|
| 40 |
/** |
| 41 |
* Media library popup on real mobile devices - breathing room at the bottom. |
| 42 |
* |
| 43 |
* WordPress renders the modal full-bleed below 640px and pins its toolbar flush |
| 44 |
* to the modal's bottom edge, so the "Set featured image" / "Select" button ends |
| 45 |
* up hard against the device edge - and on phones with a home indicator, partly |
| 46 |
* under it. Lift the whole modal box instead of touching the toolbar, so the |
| 47 |
* toolbar keeps the geometry core gives it (`.media-frame-toolbar` bottom 60px |
| 48 |
* + `.media-toolbar` bottom -60px) and everything inside moves up together. |
| 49 |
*/ |
| 50 |
@media screen and (max-width: 782px), screen and (max-height: 400px) { |
| 51 |
html[frame-adminify-iframe=true] .media-modal, |
| 52 |
html[frame-adminify-iframe=true] .image-details .media-modal { |
| 53 |
bottom: calc(16px + env(safe-area-inset-bottom, 0px)); |
| 54 |
} |
| 55 |
} |
| 56 |
/** |
| 57 |
* Media library popup on real mobile devices - legacy browsers only. |
| 58 |
* |
| 59 |
* The shell sizes the iframe against the visible viewport (`100dvh`), so the |
| 60 |
* media modal fits and its bottom toolbar - the "Set featured image" / "Select" |
| 61 |
* button - is reachable. Browsers without `dvh` support (iOS < 15.4, |
| 62 |
* Chrome < 108) fall back to `100vh`, which mobile browsers resolve against the |
| 63 |
* LARGE viewport (URL bar hidden). There the iframe hangs below the visible |
| 64 |
* area and takes the modal's toolbar with it. |
| 65 |
* |
| 66 |
* Shrink the modal by the Adminify topbar height for those browsers only, on |
| 67 |
* top of the 16px gap above. |
| 68 |
*/ |
| 69 |
@supports not (height: 100dvh) { |
| 70 |
@media screen and (max-width: 782px), screen and (max-height: 400px) { |
| 71 |
html[frame-adminify-iframe=true] .media-modal, |
| 72 |
html[frame-adminify-iframe=true] .image-details .media-modal { |
| 73 |
bottom: calc(72px + env(safe-area-inset-bottom, 0px)); |
| 74 |
} |
| 75 |
} |
| 76 |
} |
| 77 |
|
