WordPress.org

Make WordPress Core

Changeset 52562


Ignore:
Timestamp:
01/11/2022 06:25:38 PM (10 days ago)
Author:
ryelle
Message:

Administration: Update design of the Dashboard welcome panel.

Tone down the brightness of the dashboard panel by using a white background behind the main text, and use the highlight color from each color scheme for the main background. This also introduces a $scheme-name SCSS variable to allow overrides for specific color schemes.

Props critterverse, sabernhardt, joedolson, audrasjb.
See #54489.

Location:
trunk/src/wp-admin/css
Files:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/colors/_admin.scss

    r50549 r52562  
    782782    }
    783783}
     784
     785/* Welcome Panel */
     786
     787.welcome-panel {
     788    background-color: $highlight-color;
     789}
     790
     791[class*="welcome-panel-icon"] {
     792    @if ( $scheme-name == "light" ) {
     793        background-color: $icon-color;
     794    } @else {
     795        background-color: $base-color;
     796    }
     797}
  • trunk/src/wp-admin/css/colors/_variables.scss

    r48342 r52562  
    11// assign default value to all undefined variables
    22
     3$scheme-name: "default" !default;
    34
    45// core variables
  • trunk/src/wp-admin/css/colors/blue/colors.scss

    r31471 r52562  
     1$scheme-name: "blue";
    12$base-color: #52accc;
    23$icon-color: #e5f8ff;
  • trunk/src/wp-admin/css/colors/coffee/colors.scss

    r48342 r52562  
     1$scheme-name: "coffee";
    12$base-color: #59524c;
    23$highlight-color: #c7a589;
  • trunk/src/wp-admin/css/colors/ectoplasm/colors.scss

    r31471 r52562  
     1$scheme-name: "ectoplasm";
    12$base-color: #523f6d;
    23$icon-color: #ece6f6;
  • trunk/src/wp-admin/css/colors/light/colors.scss

    r50125 r52562  
     1$scheme-name: "light";
    12$base-color: #e5e5e5;
    23$icon-color: #999;
  • trunk/src/wp-admin/css/colors/midnight/colors.scss

    r31471 r52562  
     1$scheme-name: "midnight";
    12$base-color: #363b3f;
    23$highlight-color: #e14d43;
  • trunk/src/wp-admin/css/colors/modern/colors.scss

    r48862 r52562  
     1$scheme-name: "modern";
    12$base-color: #1e1e1e;
    23$highlight-color: #3858e9;
  • trunk/src/wp-admin/css/colors/ocean/colors.scss

    r48342 r52562  
     1$scheme-name: "ocean";
    12$base-color: #738e96;
    23$icon-color: #f2fcff;
  • trunk/src/wp-admin/css/colors/sunrise/colors.scss

    r31471 r52562  
     1$scheme-name: "sunrise";
    12$base-color: #cf4944;
    23$highlight-color: #dd823b;
  • trunk/src/wp-admin/css/dashboard.css

    r52442 r52562  
    116116    overflow: auto;
    117117    margin: 16px 0;
    118     background: #3858e9 url(../images/about-texture.png) center repeat;
     118    background: #2271b1 url(../images/about-texture.png) center repeat;
    119119    background-size: 500px 500px;
    120120    background-blend-mode: overlay;
    121     color: #fff;
    122121    font-size: 14px;
    123122    line-height: 1.3;
     
    149148    font-weight: 400;
    150149    line-height: 1.4;
    151     color: #fff;
    152 }
    153 
    154 .welcome-panel a {
    155     color: #fff;
    156150}
    157151
     
    159153    font-size: inherit;
    160154    line-height: inherit;
     155}
     156
     157.welcome-panel-header {
     158    color: #fff;
     159}
     160
     161.welcome-panel-header a {
     162    color: #fff;
     163}
     164
     165.welcome-panel-header a:focus,
     166.welcome-panel-header a:hover {
     167    color: #f5e6ab;
     168    text-decoration: none;
     169}
     170
     171.welcome-panel-header a:focus,
     172.welcome-panel .welcome-panel-close:focus {
     173    outline-color: currentColor;
     174    outline-offset: 1px;
     175    box-shadow: none;
    161176}
    162177
     
    184199    content: '\f335';
    185200    font-size: 24px;
     201    color: #fff;
     202}
     203
     204.welcome-panel .welcome-panel-close {
    186205    color: #fff;
    187206}
     
    231250    gap: 32px;
    232251    align-self: flex-end;
    233     background: #3858e9;
     252    background: #fff;
    234253}
    235254
     
    237256    height: 60px;
    238257    width: 60px;
    239     background-color: #1d35b4;
     258    background-color: #1d2327;
    240259    background-position: center;
    241260    background-size: 24px 24px;
Note: See TracChangeset for help on using the changeset viewer.