| @@ -6,26 +6,13 @@ | ||
| 6 | 6 | * @author Tobias Bäthge |
| 7 | 7 | * @since 1.0.0 |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | -// Load the Sass string module, for use in the `unicode` function. | |
| 11 | -@use "sass:string"; | |
| 12 | - | |
| 13 | -/* Load WordPress color schemes, which normally are only loaded on WP admin screens that use the block editor. This and the dependency in package.json are only needed for WP < 6.9. */ | |
| 10 | +/* Load WordPress color schemes, which normally are only loaded on WP admin screens that use the block editor. */ | |
| 14 | 11 | @use "~@wordpress/base-styles/colors"; |
| 15 | 12 | @use "~@wordpress/base-styles/mixins"; |
| 16 | 13 | @include mixins.wordpress-admin-schemes(); |
| 17 | 14 | |
| 18 | -// Ensure that Unicode characters are embedded in ASCII-encoded form. | |
| 19 | -@function unicode($str) { | |
| 20 | - @return string.unquote("\"") + string.unquote(string.insert($str, "\\", 1)) + string.unquote("\""); | |
| 21 | -} | |
| 22 | - | |
| 23 | -/* Hour glass cursor, while waiting for AJAX requests. */ | |
| 24 | -body.wait * { | |
| 25 | - cursor: wait !important; | |
| 26 | -} | |
| 27 | - | |
| 28 | 15 | /* Move down the header when the Screen Options or Help tabs are opened. */ |
| 29 | 16 | #screen-meta[style$="block;"] ~ #tablepress-page { |
| 30 | 17 | margin-top: 40px; |
| 31 | 18 | } |
| @@ -48,13 +35,8 @@ | ||
| 48 | 35 | #tablepress-body { |
| 49 | 36 | padding: 0 20px; |
| 50 | 37 | } |
| 51 | 38 | |
| 52 | - /* Metabox titles should have the same height, with and without the "?" button. */ | |
| 53 | - .postbox-header h2 { | |
| 54 | - line-height: 24px; | |
| 55 | - } | |
| 56 | - | |
| 57 | 39 | .header { |
| 58 | 40 | background: #ffffff; |
| 59 | 41 | border-bottom: 1px solid #dedae6; |
| 60 | 42 | align-items: center; |
| @@ -123,24 +105,32 @@ | ||
| 123 | 105 | padding: 6px 4px 6px 12px; |
| 124 | 106 | font-size: 14px; |
| 125 | 107 | line-height: 1; |
| 126 | 108 | text-decoration: none; |
| 109 | + transition: color 0.1s, background-color 0.1s, border-color 0.1s; | |
| 127 | 110 | display: inline-flex; |
| 128 | 111 | color: #ffffff; |
| 129 | - background-color: #16a34a; | |
| 130 | - border-color: #16a34a; | |
| 112 | + background-color: #8ab547; | |
| 113 | + border-color: #8ab547; | |
| 131 | 114 | |
| 132 | 115 | &:hover, |
| 133 | 116 | &:active, |
| 134 | 117 | &:focus { |
| 135 | - span:first-child { | |
| 136 | - text-decoration: underline; | |
| 137 | - } | |
| 118 | + color: #ffffff; | |
| 119 | + background-color: #69b547; | |
| 120 | + border-color: #69b547; | |
| 138 | 121 | } |
| 139 | 122 | |
| 140 | 123 | &.renew { |
| 141 | - background-color: #ff5100; | |
| 142 | - border-color: #ff5100; | |
| 124 | + background-color: #dba617; | |
| 125 | + border-color: #dba617; | |
| 126 | + | |
| 127 | + &:hover, | |
| 128 | + &:active, | |
| 129 | + &:focus { | |
| 130 | + background-color: #ebb72a; | |
| 131 | + border-color: #ebb72a; | |
| 132 | + } | |
| 143 | 133 | } |
| 144 | 134 | |
| 145 | 135 | .dashicons { |
| 146 | 136 | margin: 0 6px 0 4px; |
| @@ -147,8 +137,13 @@ | ||
| 147 | 137 | } |
| 148 | 138 | } |
| 149 | 139 | } |
| 150 | 140 | |
| 141 | + /* Margins for messages on screens */ | |
| 142 | + div.notice { | |
| 143 | + margin: 20px 0 0; | |
| 144 | + } | |
| 145 | + | |
| 151 | 146 | .postbox ul { |
| 152 | 147 | list-style: disc inside; |
| 153 | 148 | margin: 0; |
| 154 | 149 | |
| @@ -184,27 +179,21 @@ | ||
| 184 | 179 | |
| 185 | 180 | .components-card { |
| 186 | 181 | box-shadow: none; |
| 187 | 182 | border-radius: 0; |
| 188 | - border: 1px solid #c3c4c7; | |
| 189 | 183 | |
| 190 | 184 | .components-card-header { |
| 191 | - padding: 0; | |
| 192 | - border-bottom: 1px solid #c3c4c7; | |
| 193 | - | |
| 194 | 185 | h2 { |
| 195 | - line-height: 24px; | |
| 186 | + padding: 0; | |
| 187 | + line-height: normal; | |
| 196 | 188 | } |
| 197 | 189 | } |
| 198 | 190 | |
| 199 | - .components-card-body { | |
| 200 | - padding: 16px; | |
| 201 | - } | |
| 202 | - | |
| 203 | 191 | .card-title { |
| 204 | 192 | font-size: 13px; |
| 205 | 193 | font-weight: 500; |
| 206 | - padding: 0 0 16px; | |
| 194 | + padding: 0 0 18px; | |
| 195 | + margin-left: -8px; | |
| 207 | 196 | } |
| 208 | 197 | } |
| 209 | 198 | |
| 210 | 199 | .components-checkbox-control__input, |
| @@ -218,13 +207,11 @@ | ||
| 218 | 207 | border-color: #cccccc; |
| 219 | 208 | } |
| 220 | 209 | } |
| 221 | 210 | |
| 222 | - .components-text-control__input:disabled, | |
| 223 | - .components-textarea-control__input:disabled { | |
| 211 | + .components-text-control__input:disabled { | |
| 224 | 212 | background: #f0f0f0; |
| 225 | 213 | border-color: #cccccc; |
| 226 | - box-shadow: none; | |
| 227 | 214 | } |
| 228 | 215 | |
| 229 | 216 | /* Alignment of selects inside of checkbox labels. */ |
| 230 | 217 | .checkbox-select-in-label { |
| @@ -236,101 +223,10 @@ | ||
| 236 | 223 | gap: 8px; |
| 237 | 224 | align-items: center; |
| 238 | 225 | } |
| 239 | 226 | } |
| 240 | - | |
| 241 | - .notice { | |
| 242 | - margin: 20px 0 0; | |
| 243 | - | |
| 244 | - /* Remove rounded corners in WP 7.1+, as long as notices still use non-Gutenberg style. */ | |
| 245 | - --wpds-border-radius-lg: 0; /* stylelint-disable-line plugin-wpds/no-setting-wpds-custom-properties */ | |
| 246 | - } | |
| 247 | - | |
| 248 | - .components-notice { | |
| 249 | - @at-root body[class*="branch-6-"] &.notice { | |
| 250 | - box-shadow: none; | |
| 251 | - padding: 8px 12px; | |
| 252 | - border-top: none; | |
| 253 | - border-right: none; | |
| 254 | - border-bottom: none; | |
| 255 | - | |
| 256 | - | |
| 257 | - &.is-dismissible { | |
| 258 | - padding-right: 38px; | |
| 259 | - | |
| 260 | - .notice-dismiss { | |
| 261 | - &:before { | |
| 262 | - content: unicode("f335"); | |
| 263 | - content: unicode("f335") / ""; | |
| 264 | - font-size: 24px; | |
| 265 | - padding-right: 4px; | |
| 266 | - } | |
| 267 | - | |
| 268 | - &:hover:before { | |
| 269 | - color: #1e1e1e; | |
| 270 | - } | |
| 271 | - } | |
| 272 | - } | |
| 273 | - } | |
| 274 | - | |
| 275 | - &.notice-info { | |
| 276 | - border-left-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); | |
| 277 | - } | |
| 278 | - .components-notice__content { | |
| 279 | - margin: 0; | |
| 280 | - } | |
| 281 | - } | |
| 282 | - | |
| 283 | - /* Notices for "Preview" and "Save Changes" buttons. */ | |
| 284 | - .components-notice-list { | |
| 285 | - display: flex; | |
| 286 | - flex-direction: column; | |
| 287 | - gap: 8px; | |
| 288 | - | |
| 289 | - @keyframes fadeIn { | |
| 290 | - from { | |
| 291 | - opacity: 0; | |
| 292 | - } | |
| 293 | - to { | |
| 294 | - opacity: 1; | |
| 295 | - } | |
| 296 | - } | |
| 297 | - | |
| 298 | - .components-notice { | |
| 299 | - animation: fadeIn 1s; /* Fade in new notices. */ | |
| 300 | - transition: opacity 1s; /* Fade out notices before removing them. */ | |
| 301 | - scroll-margin-bottom: 50px; /* Scroll into view offset for error notices. */ | |
| 302 | - } | |
| 303 | - | |
| 304 | - } | |
| 305 | - | |
| 306 | - .components-snackbar-list { | |
| 307 | - position: fixed; | |
| 308 | - bottom: 24px; | |
| 309 | - padding-left: 4px; | |
| 310 | - } | |
| 311 | 227 | } |
| 312 | 228 | |
| 313 | -/* Table Preview (CSS for actual preview is directly in the preview HTML). */ | |
| 314 | -.table-preview-modal { | |
| 315 | - .components-modal__content { | |
| 316 | - padding: 0 16px 26px; | |
| 317 | - } | |
| 318 | - | |
| 319 | - iframe { | |
| 320 | - width: 100%; | |
| 321 | - height: 100%; | |
| 322 | - } | |
| 323 | - | |
| 324 | - .components-modal__header { | |
| 325 | - padding: 20px 26px 8px; | |
| 326 | - | |
| 327 | - + div { | |
| 328 | - height: 100%; | |
| 329 | - } | |
| 330 | - } | |
| 331 | -} | |
| 332 | - | |
| 333 | 229 | /* Width of the columns on the "All Tables" list. */ |
| 334 | 230 | .tablepress-all-tables { |
| 335 | 231 | thead { |
| 336 | 232 | .column-table_id { |
| @@ -355,47 +251,13 @@ | ||
| 355 | 251 | /* Responsiveness on the All Tables screen. */ |
| 356 | 252 | @media screen and (max-width: 782px) { |
| 357 | 253 | .column-table_id { |
| 358 | 254 | display: none !important; |
| 359 | - font-size: 14px; | |
| 360 | - } | |
| 361 | - /* WordPress < 7.1. */ | |
| 362 | - th + .column-table_id { | |
| 363 | 255 | padding: 3px 8px 3px 35%; |
| 364 | 256 | } |
| 365 | - | |
| 366 | - /* WordPress >= 7.1. */ | |
| 367 | - td + .column-table_id { | |
| 368 | - padding: 6px 8px 8px 32px; | |
| 369 | - } | |
| 370 | 257 | } |
| 371 | 258 | } |
| 372 | 259 | |
| 373 | -/* Layout adjustments for the header row. */ | |
| 374 | -table.widefat { | |
| 375 | - thead, | |
| 376 | - tfoot { | |
| 377 | - td.check-column { | |
| 378 | - padding-top: 0; | |
| 379 | - | |
| 380 | - @media screen and (max-width: 782px) { | |
| 381 | - padding-top: 6px; | |
| 382 | - } | |
| 383 | - } | |
| 384 | - } | |
| 385 | - th { | |
| 386 | - &.sortable, | |
| 387 | - &.sorted { | |
| 388 | - a { | |
| 389 | - line-height: 24px; | |
| 390 | - } | |
| 391 | - } | |
| 392 | - } | |
| 393 | - .sorting-indicators { | |
| 394 | - margin-top: 2px; | |
| 395 | - } | |
| 396 | -} | |
| 397 | - | |
| 398 | 260 | /* Positioning of Search results of WP_List_Tables. */ |
| 399 | 261 | #tablepress-page .subtitle { |
| 400 | 262 | float: left; |
| 401 | 263 | padding: 8px 0 0 0; |
| @@ -406,9 +268,9 @@ | ||
| 406 | 268 | border-spacing: 0; |
| 407 | 269 | max-width: 1000px; |
| 408 | 270 | width: 100%; |
| 409 | 271 | |
| 410 | - /* Default column widths. */ | |
| 272 | + /* Default column widths */ | |
| 411 | 273 | .column-1 { |
| 412 | 274 | width: 25%; |
| 413 | 275 | } |
| 414 | 276 | .column-2 { |
| @@ -453,9 +315,9 @@ | ||
| 453 | 315 | margin: 1px; |
| 454 | 316 | } |
| 455 | 317 | |
| 456 | 318 | /* Styling of pills in postbox headings. */ |
| 457 | -.postbox .postbox-header .hndle:not(:has(> .help-container)) { | |
| 319 | +.postbox .postbox-header .hndle { | |
| 458 | 320 | display: inline; |
| 459 | 321 | |
| 460 | 322 | .pill-label { |
| 461 | 323 | display: inline-block; |
| @@ -460,9 +322,9 @@ | ||
| 460 | 322 | .pill-label { |
| 461 | 323 | display: inline-block; |
| 462 | 324 | vertical-align: top; |
| 463 | 325 | box-sizing: border-box; |
| 464 | - margin: 3px 0 0 6px; | |
| 326 | + margin: 1px 0 -1px 6px; | |
| 465 | 327 | padding: 0 5px; |
| 466 | 328 | min-width: 18px; |
| 467 | 329 | height: 18px; |
| 468 | 330 | border-radius: 9px; |
