| @@ -67,14 +67,8 @@ | ||
| 67 | 67 | /** |
| 68 | 68 | * Focus styles. |
| 69 | 69 | */ |
| 70 | 70 | /** |
| 71 | - * Standard focus rings for the WordPress Design System. | |
| 72 | - * | |
| 73 | - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| 74 | - * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| 75 | - */ | |
| 76 | -/** | |
| 77 | 71 | * Applies editor left position to the selector passed as argument |
| 78 | 72 | */ |
| 79 | 73 | /** |
| 80 | 74 | * Styles that are reused verbatim in a few places |
| @@ -156,8 +150,176 @@ | ||
| 156 | 150 | /** |
| 157 | 151 | * React Native specific. |
| 158 | 152 | * These variables do not appear to be used anywhere else. |
| 159 | 153 | */ |
| 154 | +/** | |
| 155 | + * Typography | |
| 156 | + */ | |
| 157 | +/** | |
| 158 | + * Breakpoints & Media Queries | |
| 159 | + */ | |
| 160 | +/** | |
| 161 | +* Converts a hex value into the rgb equivalent. | |
| 162 | +* | |
| 163 | +* @param {string} hex - the hexadecimal value to convert | |
| 164 | +* @return {string} comma separated rgb values | |
| 165 | +*/ | |
| 166 | +/** | |
| 167 | + * Long content fade mixin | |
| 168 | + * | |
| 169 | + * Creates a fading overlay to signify that the content is longer | |
| 170 | + * than the space allows. | |
| 171 | + */ | |
| 172 | +/** | |
| 173 | + * Breakpoint mixins | |
| 174 | + */ | |
| 175 | +/** | |
| 176 | + * Focus styles. | |
| 177 | + */ | |
| 178 | +/** | |
| 179 | + * Applies editor left position to the selector passed as argument | |
| 180 | + */ | |
| 181 | +/** | |
| 182 | + * Styles that are reused verbatim in a few places | |
| 183 | + */ | |
| 184 | +/** | |
| 185 | + * Allows users to opt-out of animations via OS-level preferences. | |
| 186 | + */ | |
| 187 | +/** | |
| 188 | + * Reset default styles for JavaScript UI based pages. | |
| 189 | + * This is a WP-admin agnostic reset | |
| 190 | + */ | |
| 191 | +/** | |
| 192 | + * Reset the WP Admin page styles for Gutenberg-like pages. | |
| 193 | + */ | |
| 194 | +/** | |
| 195 | + * Creates a checkerboard pattern background to indicate transparency. | |
| 196 | + * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. | |
| 197 | + */ | |
| 198 | +.admin-ui-page { | |
| 199 | + display: flex; | |
| 200 | + height: 100%; | |
| 201 | + background-color: #fff; | |
| 202 | + color: #2f2f2f; | |
| 203 | + position: relative; | |
| 204 | + z-index: 1; | |
| 205 | + flex-flow: column; | |
| 206 | + text-wrap: pretty; | |
| 207 | +} | |
| 208 | + | |
| 209 | +.admin-ui-page__header { | |
| 210 | + padding: 16px 24px; | |
| 211 | + border-bottom: 1px solid #f0f0f0; | |
| 212 | + background: #fff; | |
| 213 | + position: sticky; | |
| 214 | + top: 0; | |
| 215 | + z-index: 1; | |
| 216 | +} | |
| 217 | + | |
| 218 | +.admin-ui-page__sidebar-toggle-slot:empty { | |
| 219 | + display: none; | |
| 220 | +} | |
| 221 | + | |
| 222 | +.admin-ui-page__header-subtitle { | |
| 223 | + padding-block-end: 8px; | |
| 224 | + color: #757575; | |
| 225 | + font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 226 | + font-weight: 400; | |
| 227 | + font-size: 13px; | |
| 228 | + line-height: 20px; | |
| 229 | + margin: 0; | |
| 230 | +} | |
| 231 | + | |
| 232 | +.admin-ui-page__content { | |
| 233 | + flex-grow: 1; | |
| 234 | + overflow: auto; | |
| 235 | + display: flex; | |
| 236 | + flex-direction: column; | |
| 237 | +} | |
| 238 | + | |
| 239 | +.admin-ui-page__content.has-padding { | |
| 240 | + padding: 16px 24px; | |
| 241 | +} | |
| 242 | + | |
| 243 | +.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon { | |
| 244 | + width: auto; | |
| 245 | + padding: 0 8px; | |
| 246 | +} | |
| 247 | + | |
| 248 | +.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg { | |
| 249 | + display: none; | |
| 250 | +} | |
| 251 | + | |
| 252 | +.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after { | |
| 253 | + content: attr(aria-label); | |
| 254 | + font-size: 12px; | |
| 255 | +} | |
| 256 | + | |
| 257 | +.admin-ui-breadcrumbs__list { | |
| 258 | + list-style: none; | |
| 259 | + padding: 0; | |
| 260 | + margin: 0; | |
| 261 | + gap: 0; | |
| 262 | + font-size: 15px; | |
| 263 | + min-height: 32px; | |
| 264 | + font-weight: 500; | |
| 265 | +} | |
| 266 | + | |
| 267 | +.admin-ui-breadcrumbs__list li:not(:last-child)::after { | |
| 268 | + content: "/"; | |
| 269 | + margin: 0 8px; | |
| 270 | +} | |
| 271 | + | |
| 272 | +.admin-ui-breadcrumbs__list h1 { | |
| 273 | + font-size: inherit; | |
| 274 | + line-height: inherit; | |
| 275 | +} | |
| 276 | + | |
| 277 | +/** | |
| 278 | + * Colors | |
| 279 | + */ | |
| 280 | +/** | |
| 281 | + * SCSS Variables. | |
| 282 | + * | |
| 283 | + * Please use variables from this sheet to ensure consistency across the UI. | |
| 284 | + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. | |
| 285 | + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. | |
| 286 | + */ | |
| 287 | +/** | |
| 288 | + * Fonts & basic variables. | |
| 289 | + */ | |
| 290 | +/** | |
| 291 | + * Typography | |
| 292 | + */ | |
| 293 | +/** | |
| 294 | + * Grid System. | |
| 295 | + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ | |
| 296 | + */ | |
| 297 | +/** | |
| 298 | + * Radius scale. | |
| 299 | + */ | |
| 300 | +/** | |
| 301 | + * Elevation scale. | |
| 302 | + */ | |
| 303 | +/** | |
| 304 | + * Dimensions. | |
| 305 | + */ | |
| 306 | +/** | |
| 307 | + * Mobile specific styles | |
| 308 | + */ | |
| 309 | +/** | |
| 310 | + * Editor styles. | |
| 311 | + */ | |
| 312 | +/** | |
| 313 | + * Block & Editor UI. | |
| 314 | + */ | |
| 315 | +/** | |
| 316 | + * Block paddings. | |
| 317 | + */ | |
| 318 | +/** | |
| 319 | + * React Native specific. | |
| 320 | + * These variables do not appear to be used anywhere else. | |
| 321 | + */ | |
| 160 | 322 | .interface-complementary-area-header { |
| 161 | 323 | background: #fff; |
| 162 | 324 | padding-right: 8px; |
| 163 | 325 | gap: 4px; |
| @@ -191,14 +353,8 @@ | ||
| 191 | 353 | /** |
| 192 | 354 | * Focus styles. |
| 193 | 355 | */ |
| 194 | 356 | /** |
| 195 | - * Standard focus rings for the WordPress Design System. | |
| 196 | - * | |
| 197 | - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| 198 | - * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| 199 | - */ | |
| 200 | -/** | |
| 201 | 357 | * Applies editor left position to the selector passed as argument |
| 202 | 358 | */ |
| 203 | 359 | /** |
| 204 | 360 | * Styles that are reused verbatim in a few places |
| @@ -250,9 +406,9 @@ | ||
| 250 | 406 | } |
| 251 | 407 | |
| 252 | 408 | .interface-complementary-area h2 { |
| 253 | 409 | font-size: 13px; |
| 254 | - font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 410 | + font-weight: 499; | |
| 255 | 411 | color: #1e1e1e; |
| 256 | 412 | margin-bottom: 1.5em; |
| 257 | 413 | } |
| 258 | 414 | |
| @@ -258,9 +414,9 @@ | ||
| 258 | 414 | |
| 259 | 415 | .interface-complementary-area h3 { |
| 260 | 416 | font-size: 11px; |
| 261 | 417 | text-transform: uppercase; |
| 262 | - font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 418 | + font-weight: 499; | |
| 263 | 419 | color: #1e1e1e; |
| 264 | 420 | margin-bottom: 1.5em; |
| 265 | 421 | } |
| 266 | 422 | |
| @@ -292,9 +448,14 @@ | ||
| 292 | 448 | height: 100%; |
| 293 | 449 | } |
| 294 | 450 | |
| 295 | 451 | @media (min-width: 782px) { |
| 296 | - body.js.is-fullscreen-mode #adminmenumain { | |
| 452 | + body.js.is-fullscreen-mode { | |
| 453 | + margin-top: -32px; | |
| 454 | + height: calc(100% + 32px); | |
| 455 | + } | |
| 456 | + body.js.is-fullscreen-mode #adminmenumain, | |
| 457 | + body.js.is-fullscreen-mode #wpadminbar { | |
| 297 | 458 | display: none; |
| 298 | 459 | } |
| 299 | 460 | body.js.is-fullscreen-mode #wpcontent, |
| 300 | 461 | body.js.is-fullscreen-mode #wpfooter { |
| @@ -328,9 +489,9 @@ | ||
| 328 | 489 | .interface-interface-skeleton { |
| 329 | 490 | top: 32px; |
| 330 | 491 | } |
| 331 | 492 | .is-fullscreen-mode .interface-interface-skeleton { |
| 332 | - top: var(--wp-admin--admin-bar--height, 0); | |
| 493 | + top: 0; | |
| 333 | 494 | } |
| 334 | 495 | } |
| 335 | 496 | .interface-interface-skeleton__editor { |
| 336 | 497 | display: flex; |
| @@ -510,9 +671,9 @@ | ||
| 510 | 671 | border-left: 1px solid #ddd; |
| 511 | 672 | top: 32px; |
| 512 | 673 | } |
| 513 | 674 | .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within { |
| 514 | - top: var(--wp-admin--admin-bar--height, 0); | |
| 675 | + top: 0; | |
| 515 | 676 | } |
| 516 | 677 | } |
| 517 | 678 | .interface-pinned-items { |
| 518 | 679 | display: flex; |
| @@ -546,9 +707,9 @@ | ||
| 546 | 707 | margin-left: auto; |
| 547 | 708 | margin-right: auto; |
| 548 | 709 | } |
| 549 | 710 | .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title { |
| 550 | - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 711 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 551 | 712 | margin: 0; |
| 552 | 713 | height: 48px; |
| 553 | 714 | position: relative; |
| 554 | 715 | z-index: 1; |
| @@ -735,9 +896,9 @@ | ||
| 735 | 896 | margin: 0 0 2rem 0; |
| 736 | 897 | } |
| 737 | 898 | .edit-widgets-keyboard-shortcut-help-modal__section-title { |
| 738 | 899 | font-size: 0.9rem; |
| 739 | - font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 900 | + font-weight: 600; | |
| 740 | 901 | } |
| 741 | 902 | .edit-widgets-keyboard-shortcut-help-modal__shortcut { |
| 742 | 903 | display: flex; |
| 743 | 904 | align-items: baseline; |
| @@ -751,9 +912,9 @@ | ||
| 751 | 912 | .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty { |
| 752 | 913 | display: none; |
| 753 | 914 | } |
| 754 | 915 | .edit-widgets-keyboard-shortcut-help-modal__shortcut-term { |
| 755 | - font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 916 | + font-weight: 600; | |
| 756 | 917 | margin: 0 0 0 1rem; |
| 757 | 918 | text-align: right; |
| 758 | 919 | } |
| 759 | 920 | .edit-widgets-keyboard-shortcut-help-modal__shortcut-description { |
| @@ -804,18 +965,8 @@ | ||
| 804 | 965 | .edit-widgets-notices__snackbar .components-snackbar { |
| 805 | 966 | margin-inline: auto; |
| 806 | 967 | } |
| 807 | 968 | |
| 808 | -.edit-widgets-notices.notices-inline-notices-wrapper, | |
| 809 | -.edit-widgets-notices .components-notice-list { | |
| 810 | - gap: 0; | |
| 811 | -} | |
| 812 | - | |
| 813 | -.edit-widgets-notices .components-notice { | |
| 814 | - border-top-width: 0; | |
| 815 | - border-inline-width: 0; | |
| 816 | -} | |
| 817 | - | |
| 818 | 969 | .edit-widgets-layout__inserter-panel { |
| 819 | 970 | height: 100%; |
| 820 | 971 | display: flex; |
| 821 | 972 | flex-direction: column; |
| @@ -849,13 +1000,12 @@ | ||
| 849 | 1000 | } |
| 850 | 1001 | .edit-widgets-welcome-guide__image > img { |
| 851 | 1002 | display: block; |
| 852 | 1003 | max-width: 100%; |
| 853 | - -o-object-fit: cover; | |
| 854 | - object-fit: cover; | |
| 1004 | + object-fit: cover; | |
| 855 | 1005 | } |
| 856 | 1006 | .edit-widgets-welcome-guide__heading { |
| 857 | - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 1007 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 858 | 1008 | font-size: 24px; |
| 859 | 1009 | line-height: 1.4; |
| 860 | 1010 | margin: 16px 0 16px 0; |
| 861 | 1011 | padding: 0 32px; |
| @@ -875,9 +1025,9 @@ | ||
| 875 | 1025 | } |
| 876 | 1026 | |
| 877 | 1027 | .edit-widgets-block-editor { |
| 878 | 1028 | position: relative; |
| 879 | - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 1029 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 880 | 1030 | display: flex; |
| 881 | 1031 | flex-direction: column; |
| 882 | 1032 | flex-grow: 1; |
| 883 | 1033 | } |
| @@ -890,9 +1040,9 @@ | ||
| 890 | 1040 | .edit-widgets-block-editor .edit-widgets-main-block-list { |
| 891 | 1041 | height: 100%; |
| 892 | 1042 | } |
| 893 | 1043 | .edit-widgets-block-editor .components-button { |
| 894 | - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 1044 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 895 | 1045 | font-size: 13px; |
| 896 | 1046 | } |
| 897 | 1047 | .edit-widgets-block-editor .components-button.is-tertiary, .edit-widgets-block-editor .components-button.has-icon { |
| 898 | 1048 | padding: 6px; |
