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

		@@ -368,8 +368,85 @@
368	368	width: auto;
369	369	}
370	370
371	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	+/* ---------------------------------------------------------------
372	449	* Block Editor — hide Gutenberg chrome that would break the window.
373	450	*
374	451	* The fullscreen-mode close button (the "W" logo top-left of the editor)
375	452	* is an <a href="/wp-admin/edit.php"> that navigates the iframe to a
		@@ -543,8 +620,27 @@
543	620	* --------------------------------------------------------------- */
544	621	.os-chromeless .commands-command-menu__container,
545	622	.os-chromeless .commands-command-menu {
546	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;
547	643	}
548	644
549	645	/* ---------------------------------------------------------------
550	646	* Appearance → Themes workspace