← All changes | admin/css/edit.scss +92 -16 3.3.4 → 3.4 View file →

		@@ -67,8 +67,29 @@
67	67	@media screen and (min-width: 601px) and (max-width: 782px) {
68	68	margin-left: -11px;
69	69	margin-right: -21px;
70	70	}
	71	+
	72	+ /* Fixed left header bar, taking into account the width of the admin menu. */
	73	+ .tablepress-header-bar-wrapper {
	74	+ max-width: 1000px;
	75	+
	76	+ body & {
	77	+ position: sticky;
	78	+ left: 172px;
	79	+ }
	80	+ body.folded & {
	81	+ left: 48px;
	82	+ }
	83	+ body.auto-fold & {
	84	+ @media only screen and (max-width: 960px) {
	85	+ left: 48px;
	86	+ }
	87	+ @media screen and (max-width: 782px) {
	88	+ left: 0;
	89	+ }
	90	+ }
	91	+ }
71	92	}
72	93
73	94	/* Table name and ID display in header. */
74	95	.tablepress-header-table-name,
		@@ -77,8 +98,58 @@
77	98	overflow: hidden;
78	99	text-overflow: ellipsis;
79	100	}
80	101
	102	+/* Table Editor Toolbar. */
	103	+#tablepress-table-editor-toolbar-section {
	104	+ margin: -6px 0 0;
	105	+ padding: 4px 0;
	106	+ background: #ffffff;
	107	+
	108	+ /* Sticky at top of page. */
	109	+ @media screen and (min-width: 601px) {
	110	+ position: sticky;
	111	+ top: calc(var(--wp-admin--admin-bar--height, 32px) + 53px);
	112	+ z-index: 9988; /* Above the table editor, but below the admin menu, WP Pointers, and the Header Bar. */
	113	+ }
	114	+ @media screen and (min-width: 601px) and (max-width: 782px) {
	115	+ top: calc(var(--wp-admin--admin-bar--height, 32px) + 60px);
	116	+ }
	117	+
	118	+ /* Fixed left toolbar, taking into account the width of the admin menu. */
	119	+ .tablepress-toolbar-scroll-wrapper {
	120	+ body & {
	121	+ position: sticky;
	122	+ left: 172px;
	123	+ width: auto;
	124	+ }
	125	+ body.folded & {
	126	+ left: 48px;
	127	+ }
	128	+ body.auto-fold & {
	129	+ @media only screen and (max-width: 960px) {
	130	+ left: 48px;
	131	+ }
	132	+ @media screen and (max-width: 782px) {
	133	+ left: 0;
	134	+ }
	135	+ }
	136	+ }
	137	+
	138	+ /* Backward compatibility with WP < 6.9. */
	139	+ .components-button.is-compact.has-icon:not(.has-text) {
	140	+ width: auto;
	141	+ }
	142	+
	143	+ .tablepress-toolbar-button-text {
	144	+ font-weight: normal;
	145	+
	146	+ @media screen and (max-width: 600px) {
	147	+ display: none;
	148	+ }
	149	+ }
	150	+}
	151	+
81	152	/* Background color for the readonly Shortcode text field. */
82	153	#table-information-shortcode {
83	154	&,
84	155	+ .components-input-control__suffix {
		@@ -122,13 +193,8 @@
122	193	display: inline-block; /* Stretch to the width of the table... */
123	194	min-width: calc(100% - 2px); /* but use the full width, minus 2px to account for the borders. */
124	195	}
125	196
126		-#tablepress_edit-table-manipulation .column-1,
127		-#tablepress_edit-table-manipulation .column-2 {
128		- width: 50%;
129		-}
130		-
131	197	/* Jspreadsheet CSS. */
132	198
133	199	#table-editor {
134	200	font-size: 14px;
		@@ -170,9 +236,9 @@
170	236	}
171	237
172	238	.jexcel > tbody > tr > td {
173	239	vertical-align: top;
174		- word-break: break-word;
	240	+ word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
175	241	padding: 0;
176	242
177	243	&:first-child {
178	244	padding: 4px;
		@@ -194,16 +260,16 @@
194	260
195	261	/* Fixed header. */
196	262	.admin-bar .jexcel > thead > tr > td {
197	263	@media screen and (min-width: 601px) {
198		- top: calc(var(--wp-admin--admin-bar--height) + 59px); /* Offset of 61px for the Header Bar and 2px to remove top and bottom border. */
	264	+ top: calc(var(--wp-admin--admin-bar--height) + 118px); /* Offset for the Header Bar and Toolbar, minus top and bottom borders. */
199	265	}
200	266	@media screen and (min-width: 783px) {
201		- top: calc(var(--wp-admin--admin-bar--height) + 52px); /* Offset of 54px for the Header Bar and 2px to remove top and bottom border. */
	267	+ top: calc(var(--wp-admin--admin-bar--height) + 111px); /* Offset for the Header Bar and Toolbar, minus top and bottom borders. */
202	268	}
203	269	}
204	270
205		-/* Fixed left column, taking into account the width of the admin bar. */
	271	+/* Fixed left column, taking into account the width of the admin menu. */
206	272	.jexcel > tbody > tr > .jexcel_row {
207	273	body & {
208	274	position: sticky;
209	275	z-index: 21; /* Prevent drag corner from floating above fixed left column. */
		@@ -277,18 +343,28 @@
277	343	/* Context menu. */
278	344	.jcontextmenu {
279	345	margin: 1px; /* Don't trigger actions by accident */
280	346	z-index: 99999; /* Hover above WP Admin bar */
	347	+ background-color: var(--wpds-color-background-surface-neutral-strong, #ffffff); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */
	348	+ border-radius: 4px;
281	349
282		- > div.header {
283		- display: none !important;
284		- }
285		- > div a {
286		- color: #111111;
287		- font-size: 14px;
288		- }
289	350	> div {
290	351	padding: 4px 4px 4px 16px;
	352	+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */
	353	+ font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */
	354	+
	355	+ &.header {
	356	+ display: none !important;
	357	+ }
	358	+
	359	+ &:hover {
	360	+ background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, #ffffff)); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */
	361	+ }
	362	+
	363	+ a {
	364	+ font-size: 13px;
	365	+ color: #1e1e1e;
	366	+ }
291	367	}
292	368	> .jcontextmenu-disabled,
293	369	> .jcontextmenu-disabled a {
294	370	color: #999999;