PluginProbe
TablePress – Tables in WordPress made easy / 3.4
TablePress – Tables in WordPress made easy v3.4
3.4 3.3.4 3.3.3 3.3.2 3.3.1 trunk 1.12 1.14 1.9.2 2.0.4 2.1.7 2.1.8 2.2 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 2.3 2.3.1 2.3.2 2.4 2.4.1 2.4.2 2.4.3 All 45 releases
← All changes | admin/css/edit.scss +261 -148 2.0.4 → 3.4 View file →
@@ -6,30 +6,27 @@
6 6 * @author Tobias Bäthge
7 7 * @since 1.0.0
8 8 */
9 9
10 -/* Import spinner and alert box styling. */
11 -@import "spinner-alert";
12 -
13 -/* container for Table Preview, Advanced Editor, and Help Box dialogs */
10 +/* Container for Advanced Editor and Help Box dialogs. */
14 11 .hidden-container {
15 12 display: none;
16 13 }
17 14
18 -.help-box {
19 - padding-top: 0;
20 - padding-bottom: 0;
15 +.postbox {
16 + scroll-margin-top: 72px;
21 17 }
22 18
23 19 /* Positioning of the "Help" button in the header section of a postbox. */
24 -.postbox-header .handle-actions .button-module-help {
25 - margin-right: 10px;
26 -}
27 -@media screen and (min-width: 783px) {
28 - .postbox-header .handle-actions .button-module-help {
29 - position: relative;
30 - top: -5px;
20 +.postbox .postbox-header .hndle {
21 + &:has(> .help-container) {
22 + justify-content: flex-start;
23 + gap: 12px;
31 24 }
25 +
26 + > .help-container {
27 + height: 24px;
28 + }
32 29 }
33 30
34 31 /* Allow wide postboxes to scroll sideways. */
35 32 body,
@@ -36,136 +33,259 @@
36 33 div#post-body.metabox-holder.columns-1 {
37 34 overflow: visible !important;
38 35 }
39 36
40 -/* Move backdrop of the wpLink dialog above the "Advanced Editor" dialog */
37 +/* Add space between the screen options fieldsets. */
38 +#tablepress-screen-options {
39 + margin-top: 20px;
40 +}
41 +
42 +/* Move backdrop of the wpLink dialog above the "Advanced Editor" dialog. */
41 43 body #wp-link-backdrop {
42 44 z-index: 100103;
43 45 }
44 46
45 -/* Table Preview (CSS for actual preview is directly in the preview HTML) */
46 -#table-preview {
47 - padding: 0;
47 +/* Fix height of the wpLink dialog, to prevent vertical scrolling in WP 7.0+. */
48 +body[class*="branch-7-"] #wp-link-wrap {
49 + height: 642px;
50 + margin-top: -321px;
48 51 }
49 -#table-preview-iframe {
50 - width: 100%;
51 - height: 100%;
52 +
53 +/* Header Bar. */
54 +#tablepress-header-bar-section {
55 + margin-bottom: 20px;
56 + padding: 8px 12px;
57 + border: 1px solid #c3c4c7;
58 + background: #ffffff;
59 +
60 + /* Sticky at top of page. */
61 + @media screen and (min-width: 601px) {
62 + position: sticky;
63 + top: calc(var(--wp-admin--admin-bar--height, 32px) - 1px); /* 1px offset to remove top border. */
64 + z-index: 9989; /* Above the table editor, but below the admin menu and WP Pointers. */
65 + }
66 + /* Full width on smaller screens, to prevent the table editor from being visible near the right edge when scrolling. */
67 + @media screen and (min-width: 601px) and (max-width: 782px) {
68 + margin-left: -11px;
69 + margin-right: -21px;
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 + }
52 92 }
53 93
54 -/* Styling and positioning of buttons in wpdialogs */
55 -.ui-dialog .button {
56 - box-shadow: none;
94 +/* Table name and ID display in header. */
95 +.tablepress-header-table-name,
96 +.tablepress-header-table-id {
97 + white-space: nowrap;
98 + overflow: hidden;
99 + text-overflow: ellipsis;
57 100 }
58 -.ui-dialog .ui-dialog-buttonset {
59 - width: 100%;
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 + }
60 150 }
61 -.ui-dialog .button-cancel,
62 -.ui-dialog .button-cancel:hover {
63 - color: #b32d2e;
64 - border-color: transparent;
65 - background-color: transparent;
66 - text-decoration: underline;
151 +
152 +/* Background color for the readonly Shortcode text field. */
153 +#table-information-shortcode {
154 + &,
155 + + .components-input-control__suffix {
156 + background-color: #f0f0f1;
157 + }
67 158 }
68 -.ui-dialog .button-ok {
69 - float: right;
159 +
160 +/* Styling and positioning of buttons in wpdialogs. */
161 +.wp-core-ui .ui-dialog {
162 + .button {
163 + box-shadow: none;
164 + }
165 + .ui-dialog-buttonset {
166 + width: 100%;
167 + display: flex;
168 + justify-content: space-between;
169 + align-items: center;
170 + }
171 + .button-cancel,
172 + .button-cancel:hover {
173 + color: #cc1818;
174 + border-color: transparent;
175 + background-color: transparent;
176 + text-decoration: underline;
177 + }
178 + .button-cancel:hover {
179 + text-decoration: none;
180 + }
70 181 }
71 182
72 -/* Content of the Advanced Editor wpdialog */
183 +/* Content of the Advanced Editor wpdialog. */
73 184 #advanced-editor {
74 185 padding: 5px;
186 +
187 + .wp-editor-container {
188 + border: none;
189 + }
75 190 }
76 -#advanced-editor .wp-editor-container {
77 - border: none;
78 -}
79 191
80 192 #tablepress-page #tablepress_edit-table-data {
81 - display: inline-block; /* Stretch to the width of the table. */
82 - min-width: 99.9%; /* but use the full width, minus approx. 1px as the box is wider than the others otherwise. */
193 + display: inline-block; /* Stretch to the width of the table... */
194 + min-width: calc(100% - 2px); /* but use the full width, minus 2px to account for the borders. */
83 195 }
84 196
85 -#tablepress-page .button {
86 - vertical-align: baseline;
87 -}
197 +/* Jspreadsheet CSS. */
88 198
89 -#table-id-shortcode-wrapper {
90 - display: flex;
91 - justify-content: space-between;
92 - flex-wrap: wrap;
93 - width: 99%;
94 -}
95 -#table-information-shortcode {
96 - margin: 0 -1px 0 1px;
97 -}
98 -
99 -#tablepress_edit-table-manipulation .column-1,
100 -#tablepress_edit-table-manipulation .column-2 {
101 - width: 50%;
102 -}
103 -
104 -/* Align with checkbox labels */
105 -.checkbox-left {
106 - display: inline-block;
107 - padding-left: 1.25rem; /* Checkboxes are 1rem wide + 0.25rem margin. */
108 - padding-top: 8px;
109 -}
110 -
111 199 #table-editor {
112 200 font-size: 14px;
113 201 }
114 202
115 -/* Jspreadsheet CSS * /
116 -
117 -/* Minimum row height, using :after to keep resize animation */
203 +/* Minimum row height, using :after to keep resize animation. */
118 204 .jexcel > tbody > tr:after {
119 205 content: "";
120 206 display: inline-block;
121 - min-height: 34px;
207 + min-height: 22px;
122 208 }
123 -/* auto-grow */
124 -/*.jexcel > tbody > tr.selected:after {
125 - min-height: 78px;
126 -}*/
127 209
128 -
129 210 .jexcel > thead > tr > td {
130 211 text-align: center !important;
131 212 z-index: 22; /* Prevent drag corner from floating above fixed header. */
213 +
214 + /* Use custom sorting arrow icons. */
215 + &:not(:first-child,.dragging,.dragging-left,.dragging-right) {
216 + /* stylelint-disable-next-line function-url-quotes */
217 + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999' d='M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45zm0-384q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z'/%3E%3C/svg%3E");
218 + background-position: center right 10px;
219 + background-repeat: no-repeat;
220 + }
221 + &.arrow-up:not(.dragging,.dragging-left,.dragging-right) {
222 + /* stylelint-disable-next-line function-url-quotes */
223 + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
224 + }
225 + &.arrow-down:not(.dragging,.dragging-left,.dragging-right) {
226 + /* stylelint-disable-next-line function-url-quotes */
227 + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1408 704q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z'/%3E%3C/svg%3E");
228 + }
132 229 }
133 230
231 +/* Override default opacity, to not have text shine through when the header row/column is fixed to the top/left of the screen. */
232 +.jexcel > thead > tr > td.dragging,
233 +.jexcel > tbody > tr.dragging > td {
234 + background-color: #ffffff;
235 + opacity: 1;
236 +}
237 +
134 238 .jexcel > tbody > tr > td {
135 239 vertical-align: top;
136 - word-break: break-word;
240 + word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
241 + padding: 0;
242 +
243 + &:first-child {
244 + padding: 4px;
245 + }
246 +
247 + /* Show all lines of text in an edited cell. */
248 + &.editing {
249 + --table-editor-line-clamp-editing: 0;
250 + }
251 +
252 + > div {
253 + display: -webkit-box;
254 + -webkit-line-clamp: var(--table-editor-line-clamp-editing, var(--table-editor-line-clamp));
255 + -webkit-box-orient: vertical;
256 + overflow: hidden;
257 + padding: 4px;
258 + }
137 259 }
138 260
139 -/* Fixed header */
140 -@media screen and (min-width: 601px) {
141 - .admin-bar .jexcel > thead > tr > td {
142 - top: 46px;
261 +/* Fixed header. */
262 +.admin-bar .jexcel > thead > tr > td {
263 + @media screen and (min-width: 601px) {
264 + top: calc(var(--wp-admin--admin-bar--height) + 118px); /* Offset for the Header Bar and Toolbar, minus top and bottom borders. */
143 265 }
144 -}
145 -@media screen and (min-width: 783px) {
146 - .admin-bar .jexcel > thead > tr > td {
147 - top: 31px;
266 + @media screen and (min-width: 783px) {
267 + top: calc(var(--wp-admin--admin-bar--height) + 111px); /* Offset for the Header Bar and Toolbar, minus top and bottom borders. */
148 268 }
149 269 }
150 270
151 -/* Fixed left column, taking into account the width of the admin bar */
152 -body .jexcel > tbody > tr > .jexcel_row {
153 - position: sticky;
154 - z-index: 21; /* Prevent drag corner from floating above fixed left column. */
155 - left: 160px;
156 -}
157 -body.folded .jexcel > tbody > tr > .jexcel_row {
158 - left: 36px;
159 -}
160 -@media only screen and (max-width: 960px) {
161 - body.auto-fold .jexcel > tbody > tr > .jexcel_row {
271 +/* Fixed left column, taking into account the width of the admin menu. */
272 +.jexcel > tbody > tr > .jexcel_row {
273 + body & {
274 + position: sticky;
275 + z-index: 21; /* Prevent drag corner from floating above fixed left column. */
276 + left: 160px;
277 + }
278 + body.folded & {
162 279 left: 36px;
163 280 }
164 -}
165 -@media screen and (max-width: 782px) {
166 - body.auto-fold .jexcel > tbody > tr > .jexcel_row {
167 - left: 0;
281 + body.auto-fold & {
282 + @media only screen and (max-width: 960px) {
283 + left: 36px;
284 + }
285 + @media screen and (max-width: 782px) {
286 + left: 0;
287 + }
168 288 }
169 289 }
170 290
171 291 .jexcel tbody tr:nth-child(even) td:not(.jexcel_row) {
@@ -185,36 +305,27 @@
185 305 .jexcel_container .jexcel tbody tr td.column-hidden {
186 306 background-color: rgba(255, 224, 224, 0.7);
187 307 }
188 308
189 -.jexcel > tbody > tr > .highlight-top {
190 - padding: 4px;
191 - border-top: 1px solid rgb(82, 146, 247);
309 +.jexcel > tbody > tr > .highlight {
310 + &-top {
311 + border-top: 1px solid rgb(82, 146, 247);
312 + }
313 + &-left {
314 + border-left: 1px solid rgb(82, 146, 247);
315 + }
316 + &-right {
317 + border-right: 1px solid rgb(82, 146, 247);
318 + }
319 + &-bottom {
320 + border-bottom: 1px solid rgb(82, 146, 247);
321 + }
192 322 }
193 323
194 -.jexcel > tbody > tr > .highlight-left {
195 - padding: 4px;
196 - border-left: 1px solid rgb(82, 146, 247);
197 -}
198 -
199 -.jexcel > tbody > tr > .highlight-right {
200 - padding: 4px;
201 - border-right: 1px solid rgb(82, 146, 247);
202 -}
203 -
204 -.jexcel > tbody > tr > .highlight-bottom {
205 - padding: 4px;
206 - border-bottom: 1px solid rgb(82, 146, 247);
207 -}
208 -
209 324 .jexcel_corner {
210 325 background-color: rgb(82, 146, 247);
211 326 }
212 327
213 -.jexcel > tbody > tr > .editor {
214 - padding: 0;
215 -}
216 -
217 328 .jexcel > tbody > tr > td > textarea {
218 329 font-size: inherit;
219 330 box-shadow: none;
220 331 padding: 3px !important;
@@ -220,9 +331,9 @@
220 331 padding: 3px !important;
221 332 line-height: 1 !important;
222 333 }
223 334
224 -/* Fullscreen mode */
335 +/* Fullscreen mode. */
225 336 .admin-bar .jexcel_container.fullscreen .jexcel > thead > tr > td {
226 337 top: 0;
227 338 }
228 339 .jexcel_container.fullscreen {
@@ -228,36 +339,38 @@
228 339 .jexcel_container.fullscreen {
229 340 z-index: 99999;
230 341 }
231 342
232 -/* Context menu */
343 +/* Context menu. */
233 344 .jcontextmenu {
234 345 margin: 1px; /* Don't trigger actions by accident */
235 346 z-index: 99999; /* Hover above WP Admin bar */
236 -}
237 -.jcontextmenu > div.header {
238 - display: none !important;
239 -}
240 -.jcontextmenu > div a {
241 - color: #111111;
242 - font-size: 14px;
243 -}
244 -.jcontextmenu > div {
245 - padding: 4px 4px 4px 16px;
246 -}
247 -.jcontextmenu > .jcontextmenu-disabled,
248 -.jcontextmenu > .jcontextmenu-disabled a {
249 - color: #999999;
250 -}
251 -.jcontextmenu > div.jcontextmenu-disabled:hover {
252 - background: transparent;
253 -}
347 + background-color: var(--wpds-color-background-surface-neutral-strong, #ffffff); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */
348 + border-radius: 4px;
254 349
255 -/* The sorting arrow icon feels wrong, so flip the images for arrow-up and arrow-down. */
256 -.jexcel > thead > tr > td.arrow-up {
257 - /* stylelint-disable-next-line function-url-quotes */
258 - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
259 -}
260 -.jexcel > thead > tr > td.arrow-down {
261 - /* stylelint-disable-next-line function-url-quotes */
262 - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 14l5-5 5 5H7z' fill='gray'/%3E%3C/svg%3E");
350 + > div {
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 + }
367 + }
368 + > .jcontextmenu-disabled,
369 + > .jcontextmenu-disabled a {
370 + color: #999999;
371 + cursor: default;
372 + }
373 + > div.jcontextmenu-disabled:hover {
374 + background: transparent;
375 + }
263 376 }