Changeset 53383
- Timestamp:
- 05/10/2022 04:43:44 PM (3 years ago)
- Location:
- trunk/src/wp-admin
- Files:
-
- 9 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/css/colors/_admin.scss
r52562 r53383 784 784 785 785 /* Welcome Panel */ 786 787 786 .welcome-panel { 788 background-color: $highlight-color; 787 background-color: mix($dashboard-accent-1, white, 12%); 788 } 789 790 .welcome-panel-header-image .about-six { 791 fill: $dashboard-accent-1; 792 } 793 794 .welcome-panel-header-image .about-zero { 795 fill: $dashboard-accent-2; 789 796 } 790 797 791 798 [class*="welcome-panel-icon"] { 792 @if ( $scheme-name == "light" ) { 793 background-color: $icon-color; 794 } @else { 795 background-color: $base-color; 796 } 797 } 799 background-color: $dashboard-icon-background; 800 } -
trunk/src/wp-admin/css/colors/_variables.scss
r52562 r53383 64 64 $menu-customizer-text: mix( $base-color, $text-color, 40% ) !default; 65 65 66 // Dashboard Colors 67 68 $dashboard-accent-1: $highlight-color !default; 69 $dashboard-accent-2: $base-color !default; 70 $dashboard-icon-background: $dashboard-accent-2 !default; 71 66 72 $low-contrast-theme: "false" !default; -
trunk/src/wp-admin/css/colors/blue/colors.scss
r52562 r53383 10 10 $menu-submenu-background: #4796b3; 11 11 12 $dashboard-icon-background: $highlight-color; 13 12 14 @import "../_admin.scss"; -
trunk/src/wp-admin/css/colors/light/colors.scss
r52562 r53383 19 19 $menu-collapse-focus-icon: #555; 20 20 21 $dashboard-accent-2: $icon-color; 22 $dashboard-icon-background: $text-color; 23 21 24 @import "../_admin.scss"; 22 25 -
trunk/src/wp-admin/css/colors/midnight/colors.scss
r52562 r53383 4 4 $notification-color: #69a8bb; 5 5 6 $dashboard-icon-background: $highlight-color; 7 6 8 @import "../_admin.scss"; -
trunk/src/wp-admin/css/colors/modern/colors.scss
r52562 r53383 8 8 $link-focus: darken($highlight-color, 10%); 9 9 10 $dashboard-accent-1: #3858e9; 11 $dashboard-accent-2: #1b8362; 12 $dashboard-icon-background: #1d2327; 13 10 14 @import "../_admin.scss"; -
trunk/src/wp-admin/css/dashboard.css
r52735 r53383 121 121 overflow: auto; 122 122 margin: 16px 0; 123 background: #2271b1 url(../images/about-texture.png) center repeat; 124 background-size: 500px 500px; 125 background-blend-mode: overlay; 123 background-color: #e7ebfd; 126 124 font-size: 14px; 127 125 line-height: 1.3; … … 129 127 } 130 128 131 .welcome-panel::before {132 content: "";133 position: absolute;134 top: -16px;135 right: 96px;136 z-index: 0;137 width: 300px;138 height: 382px;139 background: url(../images/about-header-about.svg) no-repeat center;140 background-size: contain;141 }142 143 129 .welcome-panel h2 { 144 130 margin: 0; … … 146 132 font-weight: 600; 147 133 line-height: 1.25; 148 color: #fff;149 134 } 150 135 … … 162 147 163 148 .welcome-panel-header { 164 color: #fff; 149 --about-header-image-width: 521px; 150 --about-header-bg-width: calc(var(--about-header-image-width) * 0.55); 151 --about-header-bg-offset-inline: 2rem; 152 153 position: relative; 154 } 155 156 .welcome-panel-header-image { 157 position: absolute; 158 inset: -1rem var(--about-header-bg-offset-inline) 0 auto; 159 width: var(--about-header-bg-width); 160 height: auto; 161 } 162 163 .welcome-panel-header-image svg { 164 width: 100%; 165 height: auto; 165 166 } 166 167 167 168 .welcome-panel-header a { 168 color: #fff;169 color: inherit; 169 170 } 170 171 171 172 .welcome-panel-header a:focus, 172 173 .welcome-panel-header a:hover { 173 color: #f5e6ab;174 color: inherit; 174 175 text-decoration: none; 175 176 } … … 196 197 line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */ 197 198 text-decoration: none; 199 z-index: 1; /* Raise above the version image. */ 198 200 } 199 201 … … 205 207 content: '\f335'; 206 208 font-size: 24px; 207 color: # fff;209 color: #1d2327; 208 210 } 209 211 210 212 .welcome-panel .welcome-panel-close { 211 color: # fff;213 color: #1d2327; 212 214 } 213 215 … … 216 218 .welcome-panel .welcome-panel-close:hover::before, 217 219 .welcome-panel .welcome-panel-close:focus::before { 218 color: # f5e6ab;220 color: #2271b1; 219 221 } 220 222 … … 241 243 max-width: 1500px; 242 244 width: 100%; 243 /* 408px = 300px (balloon width) + 96px (offset from edge) + 16px (spacing). */244 padding : 48px 408px 48px 48px;245 padding: 48px 0 80px 48px; 246 padding-right: calc(var(--about-header-bg-width) + (var(--about-header-bg-offset-inline) * 2)); 245 247 } 246 248 … … 251 253 display: grid; 252 254 z-index: 1; 253 margin-top: 32px;254 255 padding: 48px; 255 256 grid-template-columns: repeat(3, 1fr); … … 1354 1355 1355 1356 @media screen and (max-width: 782px) { 1356 .welcome-panel::before {1357 width: 240px;1358 height: 305px;1359 right: 32px;1360 }1361 1362 1357 .welcome-panel-header { 1363 /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */ 1364 padding: 32px 288px 32px 32px; 1358 --about-header-bg-width: calc(var(--about-header-image-width) * 0.4); 1359 --about-header-bg-offset-inline: 1rem; 1360 } 1361 1362 .welcome-panel-header-image { 1363 top: 2rem; 1365 1364 } 1366 1365 … … 1435 1434 /* Smartphone */ 1436 1435 @media screen and (max-width: 600px) { 1437 .welcome-panel::before { 1436 .welcome-panel-header { 1437 padding: 32px 32px 64px; 1438 } 1439 1440 .welcome-panel-header-image { 1438 1441 display: none; 1439 }1440 1441 .welcome-panel-header {1442 padding: 32px;1443 1442 } 1444 1443 } -
trunk/src/wp-admin/images/about-header-about.svg
r53339 r53383 1 <svg width="521" height="504" viewBox="0 0 521 504" fill="none" xmlns="http://www.w3.org/2000/svg" >2 <path d="M265.692 238.093c0 17.061-3.506 33.055-10.518 47.984-6.707 14.928-16.006 28.028-27.895 39.301-11.89 10.968-25.914 19.651-42.072 26.048-15.853 6.398-32.926 9.597-51.218 9.597-19.816 0-37.956-3.808-54.419-11.425-16.462-7.921-30.639-18.889-42.529-32.903-11.585-14.014-20.73-30.618-27.438-49.812C3.201 247.385 0 225.906 0 202.447c0-27.724 4.268-53.772 12.804-78.145 8.537-24.678 20.122-46.157 34.755-64.436 14.634-18.584 31.707-33.208 51.218-43.871C118.289 5.332 139.172 0 161.427 0c12.195 0 23.628 1.371 34.298 4.113 10.67 2.437 19.816 5.94 27.438 10.51 7.927 4.57 14.176 10.054 18.749 16.452 4.573 6.094 6.86 12.796 6.86 20.108 0 8.835-2.744 15.842-8.232 21.022-5.487 4.874-12.804 7.311-21.95 7.311-6.402 0-11.433-1.37-15.091-4.112-3.658-2.742-6.86-6.094-9.603-10.054-2.439-3.96-4.726-8.226-6.86-12.796-2.134-4.875-4.878-9.292-8.231-13.253-3.049-3.96-7.012-7.312-11.89-10.054-4.878-2.741-11.433-4.113-19.664-4.113-10.061 0-19.359 3.352-27.895 10.054-8.537 6.398-16.006 15.386-22.408 26.963-6.097 11.272-10.975 24.677-14.634 40.215-3.658 15.538-5.487 32.446-5.487 50.726l1.371.914c9.756-10.968 19.97-19.041 30.64-24.22 10.975-5.18 23.779-7.769 38.413-7.769 16.768 0 32.316 3.046 46.645 9.14 14.633 5.788 27.133 13.862 37.498 24.22 10.671 10.359 19.055 22.697 25.152 37.016 6.097 14.015 9.146 29.248 9.146 45.7Zm-189.78-10.968c0 35.95 5.03 63.065 15.09 81.344 10.366 18.28 25.305 27.42 44.816 27.42 19.207 0 33.383-7.769 42.529-23.307 9.146-15.538 13.719-39.758 13.719-72.661 0-29.857-4.42-52.402-13.261-67.635-8.537-15.538-21.189-23.307-37.956-23.307-13.414 0-25.152 4.265-35.212 12.796-10.061 8.53-19.97 22.088-29.725 40.672v24.678Z" fill="#3858E9" style="mix-blend-mode:multiply"/>1 <svg width="521" height="504" viewBox="0 0 521 504" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> 2 <path class="about-six" d="M265.692 238.093c0 17.061-3.506 33.055-10.518 47.984-6.707 14.928-16.006 28.028-27.895 39.301-11.89 10.968-25.914 19.651-42.072 26.048-15.853 6.398-32.926 9.597-51.218 9.597-19.816 0-37.956-3.808-54.419-11.425-16.462-7.921-30.639-18.889-42.529-32.903-11.585-14.014-20.73-30.618-27.438-49.812C3.201 247.385 0 225.906 0 202.447c0-27.724 4.268-53.772 12.804-78.145 8.537-24.678 20.122-46.157 34.755-64.436 14.634-18.584 31.707-33.208 51.218-43.871C118.289 5.332 139.172 0 161.427 0c12.195 0 23.628 1.371 34.298 4.113 10.67 2.437 19.816 5.94 27.438 10.51 7.927 4.57 14.176 10.054 18.749 16.452 4.573 6.094 6.86 12.796 6.86 20.108 0 8.835-2.744 15.842-8.232 21.022-5.487 4.874-12.804 7.311-21.95 7.311-6.402 0-11.433-1.37-15.091-4.112-3.658-2.742-6.86-6.094-9.603-10.054-2.439-3.96-4.726-8.226-6.86-12.796-2.134-4.875-4.878-9.292-8.231-13.253-3.049-3.96-7.012-7.312-11.89-10.054-4.878-2.741-11.433-4.113-19.664-4.113-10.061 0-19.359 3.352-27.895 10.054-8.537 6.398-16.006 15.386-22.408 26.963-6.097 11.272-10.975 24.677-14.634 40.215-3.658 15.538-5.487 32.446-5.487 50.726l1.371.914c9.756-10.968 19.97-19.041 30.64-24.22 10.975-5.18 23.779-7.769 38.413-7.769 16.768 0 32.316 3.046 46.645 9.14 14.633 5.788 27.133 13.862 37.498 24.22 10.671 10.359 19.055 22.697 25.152 37.016 6.097 14.015 9.146 29.248 9.146 45.7Zm-189.78-10.968c0 35.95 5.03 63.065 15.09 81.344 10.366 18.28 25.305 27.42 44.816 27.42 19.207 0 33.383-7.769 42.529-23.307 9.146-15.538 13.719-39.758 13.719-72.661 0-29.857-4.42-52.402-13.261-67.635-8.537-15.538-21.189-23.307-37.956-23.307-13.414 0-25.152 4.265-35.212 12.796-10.061 8.53-19.97 22.088-29.725 40.672v24.678Z" fill="#3858E9" style="mix-blend-mode:multiply"/> 3 3 <path d="M156.25 398.381c0-8.068 2.648-14.877 7.943-20.424 5.547-5.799 12.355-8.699 20.424-8.699 8.321 0 15.255 2.9 20.803 8.699 5.547 5.547 8.321 12.356 8.321 20.424 0 7.817-2.774 14.499-8.321 20.047-5.548 5.295-12.482 7.942-20.803 7.942-8.069 0-14.877-2.647-20.424-7.942-5.295-5.548-7.943-12.23-7.943-20.047Z" fill="#2F2F2F" style="mix-blend-mode:multiply"/> 4 <path d="M369.361 142.207c20.947 0 40.528 4.722 58.743 14.167 18.519 9.444 34.608 22.392 48.269 38.844 13.662 16.452 24.439 35.798 32.332 58.038 8.196 22.24 12.295 46.308 12.295 72.205 0 24.677-4.099 47.831-12.295 69.462-7.893 21.631-18.67 40.52-32.332 56.667-13.661 15.843-29.75 28.486-48.269 37.931-18.215 9.139-37.796 13.709-58.743 13.709-20.643 0-40.072-4.57-58.287-13.709-17.911-9.445-33.697-22.088-47.358-37.931-13.358-16.147-23.983-35.036-31.876-56.667-7.893-21.631-11.84-44.785-11.84-69.462 0-25.897 3.947-49.965 11.84-72.205 7.893-22.24 18.518-41.586 31.876-58.038 13.661-16.452 29.447-29.4 47.358-38.844 18.215-9.445 37.644-14.167 58.287-14.167Zm0 334.518c10.929 0 20.644-2.285 29.144-6.855 8.804-4.875 16.242-13.101 22.313-24.678 6.072-11.577 10.626-26.962 13.661-46.156 3.34-19.193 5.009-43.262 5.009-72.204 0-30.162-1.669-55.296-5.009-75.404-3.035-20.412-7.589-36.712-13.661-48.898-6.071-12.187-13.509-20.869-22.313-26.049-8.5-5.179-18.215-7.768-29.144-7.768-10.928 0-20.795 2.589-29.599 7.768-8.5 5.18-15.786 13.862-21.857 26.049-6.072 12.186-10.778 28.486-14.117 48.898-3.036 20.108-4.554 45.242-4.554 75.404 0 28.942 1.518 53.011 4.554 72.204 3.339 19.194 8.045 34.579 14.117 46.156 6.071 11.577 13.357 19.803 21.857 24.678 8.804 4.57 18.671 6.855 29.599 6.855Z" fill="#1B8362" style="mix-blend-mode:multiply"/>4 <path class="about-zero" d="M369.361 142.207c20.947 0 40.528 4.722 58.743 14.167 18.519 9.444 34.608 22.392 48.269 38.844 13.662 16.452 24.439 35.798 32.332 58.038 8.196 22.24 12.295 46.308 12.295 72.205 0 24.677-4.099 47.831-12.295 69.462-7.893 21.631-18.67 40.52-32.332 56.667-13.661 15.843-29.75 28.486-48.269 37.931-18.215 9.139-37.796 13.709-58.743 13.709-20.643 0-40.072-4.57-58.287-13.709-17.911-9.445-33.697-22.088-47.358-37.931-13.358-16.147-23.983-35.036-31.876-56.667-7.893-21.631-11.84-44.785-11.84-69.462 0-25.897 3.947-49.965 11.84-72.205 7.893-22.24 18.518-41.586 31.876-58.038 13.661-16.452 29.447-29.4 47.358-38.844 18.215-9.445 37.644-14.167 58.287-14.167Zm0 334.518c10.929 0 20.644-2.285 29.144-6.855 8.804-4.875 16.242-13.101 22.313-24.678 6.072-11.577 10.626-26.962 13.661-46.156 3.34-19.193 5.009-43.262 5.009-72.204 0-30.162-1.669-55.296-5.009-75.404-3.035-20.412-7.589-36.712-13.661-48.898-6.071-12.187-13.509-20.869-22.313-26.049-8.5-5.179-18.215-7.768-29.144-7.768-10.928 0-20.795 2.589-29.599 7.768-8.5 5.18-15.786 13.862-21.857 26.049-6.072 12.186-10.778 28.486-14.117 48.898-3.036 20.108-4.554 45.242-4.554 75.404 0 28.942 1.518 53.011 4.554 72.204 3.339 19.194 8.045 34.579 14.117 46.156 6.071 11.577 13.357 19.803 21.857 24.678 8.804 4.57 18.671 6.855 29.599 6.855Z" fill="#1B8362" style="mix-blend-mode:multiply"/> 5 5 </svg> -
trunk/src/wp-admin/includes/dashboard.php
r53131 r53383 1997 1997 <div class="welcome-panel-content"> 1998 1998 <div class="welcome-panel-header"> 1999 <div class="welcome-panel-header-image"> 2000 <?php echo file_get_contents( dirname( __DIR__ ) . '/images/about-header-about.svg' ); ?> 2001 </div> 1999 2002 <h2><?php _e( 'Welcome to WordPress!' ); ?></h2> 2000 2003 <p>
Note: See TracChangeset
for help on using the changeset viewer.