← All changes | assets/css/chromeless.css +150 -0 1.1.2 → 1.1.10 View file →

		@@ -118,8 +118,36 @@
118	118	.os-chromeless .woocommerce-layout__header {
119	119	width: 100% !important;
120	120	}
121	121
	122	+/*
	123	+ * MailPoet top-bar overlap fix.
	124	+ *
	125	+ * MailPoet mounts a 64px-tall brand bar on its screens as
	126	+ * `.wrap .mailpoet-top-bar { position: absolute; top: 0 }` —
	127	+ * anchored to `#wpbody` (core's `position: relative`), overlaying
	128	+ * whatever the page's first 64px contain. In classic admin nothing
	129	+ * is visibly covered only by accident of geometry: the in-flow
	130	+ * space above `.wrap` — the `#screen-meta-links` row plus `.wrap`'s
	131	+ * own top margin — happens to add up to more than the bar's height,
	132	+ * so the content starts below it (measured: `.wrap` at y=114 vs
	133	+ * bar bottom at y=96).
	134	+ *
	135	+ * Chromeless collapses exactly that space on purpose — screen-meta
	136	+ * links are hidden (the window title bar owns those buttons) and
	137	+ * `.wrap` margins are trimmed — which slides MailPoet's content up
	138	+ * underneath the overlaid bar. Symptom: the page's heading sits
	139	+ * half-hidden behind the white logo bar inside the window.
	140	+ *
	141	+ * Reserve the bar's height in flow instead. `:has()` scopes the
	142	+ * rule to precisely the pages that render the in-wrap bar —
	143	+ * whatever MailPoet screen shape it is, present or future — and to
	144	+ * nothing else.
	145	+ */
	146	+.os-chromeless .wrap:has( .mailpoet-top-bar ) {
	147	+ padding-top: 64px;
	148	+}
	149	+
122	150	/* ---------------------------------------------------------------
123	151	* Screen Meta (Screen Options / Help panels)
124	152	* The toggle buttons (#screen-meta-links) are hidden because
125	153	* the parent desktop shell adds its own buttons to the window
		@@ -215,8 +243,34 @@
215	243	.os-chromeless.themes-php .wrap > .page-title-action {
216	244	display: none;
217	245	}
218	246
	247	+/*
	248	+ * Core offsets every title action by `top: -3px` (common.css) so it
	249	+ * sits on the H1's baseline. Chromeless hides the H1, and the first
	250	+ * thing in the frame has nothing above it to overlap: the offset
	251	+ * pulls the button's top border under the window's content edge and
	252	+ * it renders cropped. The offset has no baseline left to meet here,
	253	+ * so drop it.
	254	+ *
	255	+ * The margins are the same 12px the rule above gives a lone button,
	256	+ * applied to whatever element a plugin grouped its buttons in. On a
	257	+ * Jetpack site that is `div.wpcom-media-library-action-buttons`
	258	+ * (external-media moves core's "Add Media File" into it so it can
	259	+ * append "Import Media"; Big Sky adds "Generate Image" beside them),
	260	+ * and a group is not a `.page-title-action`, so it picks up neither
	261	+ * the margin nor the block layout and lands flush against the top.
	262	+ * `:has()` reaches the group whatever a plugin decided to call it.
	263	+ */
	264	+.os-chromeless .wrap .page-title-action {
	265	+ top: 0;
	266	+}
	267	+
	268	+.os-chromeless .wrap :has( > .page-title-action ) {
	269	+ margin-top: 12px;
	270	+ margin-bottom: 12px;
	271	+}
	272	+
219	273	/* ---------------------------------------------------------------
220	274	* WooCommerce "embed page" header overlay — page-scoped.
221	275	*
222	276	* Background: WC renders TWO layouts simultaneously on "connected"
		@@ -314,8 +368,85 @@
314	368	width: auto;
315	369	}
316	370
317	371	/* ---------------------------------------------------------------
	372	+ * Metabox screens — the one-column breakpoint is 160px too early.
	373	+ *
	374	+ * Core collapses every `#poststuff` two-column screen (the classic
	375	+ * post editor, any CPT editor, a WooCommerce order) to one column
	376	+ * at `max-width: 850px`. That number is a VIEWPORT width, and it is
	377	+ * sized for a viewport that still has the 160px admin menu in it:
	378	+ * at 851px core leaves roughly 650px of usable content — less than
	379	+ * the 763px the two columns actually need (`#post-body-content`'s
	380	+ * 463px floor plus the 300px sidebar reservation), which is why
	381	+ * core's own two-column layout scrolls sideways just above the
	382	+ * breakpoint.
	383	+ *
	384	+ * A chromeless iframe hides the admin menu, so the same 851px gives
	385	+ * 835px of content — comfortably two columns — and core stacks it
	386	+ * anyway. The sidebar then lands BELOW the editor, and since the
	387	+ * classic editor grows to fit its text, a long post pushes Publish,
	388	+ * Categories, Tags and Featured image thousands of pixels down the
	389	+ * page. The user's word for that is "vanished".
	390	+ *
	391	+ * Same shape as the WooCommerce header fix at the top of this file:
	392	+ * the page reserved space for a sidebar we removed, so reclaim the
	393	+ * reservation. Two columns stay until the content really stops
	394	+ * fitting: 763px of content, plus the 16px `#wpbody-content` gutter
	395	+ * above, plus up to 17px for a classic vertical scrollbar — which a
	396	+ * media query does NOT subtract from the width it matches on, the
	397	+ * same reason `100vw` overflows a scrolling page. That is 796px.
	398	+ * Below it, core's one-column layout is correct and stays.
	399	+ *
	400	+ * The reservation is written flow-relative rather than as core's
	401	+ * `margin-right` / `float: right`, because core ships the mirrored
	402	+ * values in a separate `edit-rtl.css` and this file has no RTL
	403	+ * build — one logical declaration lands on the correct side in
	404	+ * both directions. `float: right` stays ahead of `float:
	405	+ * inline-end` as the fallback.
	406	+ *
	407	+ * Attachments keep core's own, wider, 1200px breakpoint: the media
	408	+ * editor's sidebar carries the whole attachment form and needs the
	409	+ * room. `.post-type-attachment` is excluded rather than re-stacked
	410	+ * so that rule keeps working untouched.
	411	+ *
	412	+ * Verifying: open a post with a few thousand words in a window
	413	+ * ~800px wide. Publish/Categories/Tags sit beside the editor, not
	414	+ * under it, and the page has no horizontal scrollbar.
	415	+ * --------------------------------------------------------------- */
	416	+@media only screen and ( min-width: 796px ) and ( max-width: 850px ) {
	417	+ .os-chromeless:not( .post-type-attachment ) #wpbody-content #poststuff #post-body.columns-2 {
	418	+ margin-inline-end: 300px;
	419	+ }
	420	+
	421	+ .os-chromeless:not( .post-type-attachment ) #wpbody-content #post-body.columns-2 #postbox-container-1 {
	422	+ float: right;
	423	+ float: inline-end;
	424	+ margin-inline-end: -300px;
	425	+ width: 280px;
	426	+ }
	427	+
	428	+ .os-chromeless:not( .post-type-attachment ) #poststuff #post-body.columns-2 #side-sortables {
	429	+ min-height: 250px;
	430	+ width: 280px;
	431	+ }
	432	+
	433	+ /*
	434	+ * Core hides the Layout radios with the two-column layout. They
	435	+ * are the way back to one column, so they come back with it.
	436	+ *
	437	+ * `edit.css` is part of the `wp-admin` bundle and loads on every
	438	+ * screen, so that hide reaches the Dashboard's own 1-4 column
	439	+ * radios too. Only un-hide them where this block actually gave a
	440	+ * layout back.
	441	+ */
	442	+ .os-chromeless:not( .post-type-attachment ):has( #post-body.columns-2 ) .screen-layout,
	443	+ .os-chromeless:not( .post-type-attachment ):has( #post-body.columns-2 ) .columns-prefs {
	444	+ display: block;
	445	+ }
	446	+}
	447	+
	448	+/* ---------------------------------------------------------------
318	449	* Block Editor — hide Gutenberg chrome that would break the window.
319	450	*
320	451	* The fullscreen-mode close button (the "W" logo top-left of the editor)
321	452	* is an <a href="/wp-admin/edit.php"> that navigates the iframe to a
		@@ -489,8 +620,27 @@
489	620	* --------------------------------------------------------------- */
490	621	.os-chromeless .commands-command-menu__container,
491	622	.os-chromeless .commands-command-menu {
492	623	display: none !important;
	624	+}
	625	+
	626	+/* ---------------------------------------------------------------
	627	+ * A file drag over a native upload box.
	628	+ *
	629	+ * The chromeless bridge hands an OS-file drop to Core's own
	630	+ * `<input type="file">` when it lands on one, or anywhere on the
	631	+ * `form.wp-upload-form` box around it (Upload Plugin, Upload
	632	+ * Theme), and stamps `data-os-file-drop-active` on that box while
	633	+ * the drag is over it. Outside the shell the box gives no sign it
	634	+ * will take a drop; inside, the shell used to take the file
	635	+ * instead, so people learned it would not. Say so while it can.
	636	+ *
	637	+ * Core's own admin colour, read the way common.css reads it, not
	638	+ * the station's: this is a wp-admin control on a wp-admin page.
	639	+ * --------------------------------------------------------------- */
	640	+.os-chromeless [data-os-file-drop-active] {
	641	+ outline: 2px dashed var( --wp-admin-theme-color, #3858e9 );
	642	+ outline-offset: -2px;
493	643	}
494	644
495	645	/* ---------------------------------------------------------------
496	646	* Appearance → Themes workspace