WordPress.org
Get WordPress

Make WordPress Core

Changeset 51025


Ignore:
Timestamp:
05/26/2021 01:52:26 AM (4 years ago)
Author:
ryelle
Message:

Site Health, Privacy: Combine shared CSS for Site Health & Privacy Settings

The styles for the Privacy settings page were based on the Site Health section. These were duplicated into edit.css in #49264. This change merges the selectors from Site Health into the Privacy section, to reduce that duplicate code.

Props xkon, notlaura, clorith.
See #52429.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/edit.css

    r50571 r51025  
    702702/**
    703703* Privacy Settings section
     704*
     705* Note: This section includes selectors from
     706* Site Health where duplicate styling is used.
    704707*/
    705708
    706709/* General */
    707710.privacy-settings #wpcontent,
    708 .privacy-settings.auto-fold #wpcontent {
     711.privacy-settings.auto-fold #wpcontent,
     712.site-health #wpcontent,
     713.site-health.auto-fold #wpcontent {
    709714    padding-left: 0;
    710715}
    711716
    712 .privacy-settings-header h1 {
     717/* Emulates .wrap h1 styling */
     718.privacy-settings-header h1,
     719.health-check-header h1 {
    713720    display: inline-block;
    714721    font-weight: 600;
    … …  
    720727
    721728/* Header */
    722 .privacy-settings-header {
     729.privacy-settings-header,
     730.health-check-header {
    723731    text-align: center;
    724732    margin: 0 0 1rem;
    … …  
    727735}
    728736
    729 .privacy-settings-title-section {
     737.privacy-settings-title-section,
     738.health-check-title-section {
    730739    display: flex;
    731740    align-items: center;
    732741    justify-content: center;
    733742    clear: both;
     743    padding-top: 8px;
    734744}
    735745
    … …  
    753763}
    754764
    755 .privacy-settings-tab:nth-child(1) {
     765.privacy-settings-tab:nth-child(1),
     766.health-check-tab:nth-child(1) {
    756767    -ms-grid-column: 1; /* IE 11 */
    757768}
    758769
    759 .privacy-settings-tab:nth-child(2) {
     770.privacy-settings-tab:nth-child(2),
     771.health-check-tab:nth-child(2) {
    760772    -ms-grid-column: 2; /* IE 11 */
    761773}
    762774
    763 .privacy-settings-tab:focus {
     775.privacy-settings-tab:focus,
     776.health-check-tab:focus {
    764777    color: #1d2327;
    765778    outline: 1px solid #787c82;
    … …  
    767780}
    768781
    769 .privacy-settings-tab.active {
     782.privacy-settings-tab.active,
     783.health-check-tab.active {
    770784    box-shadow: inset 0 -3px #3582c4;
    771785    font-weight: 600;
    … …  
    773787
    774788/* Body */
    775 .privacy-settings-body {
     789.privacy-settings-body,
     790.health-check-body {
    776791    max-width: 800px;
    777792    margin: 0 auto;
    … …  
    788803
    789804/* Accordions */
    790 .privacy-settings-accordion {
     805.privacy-settings-accordion,
     806.health-check-accordion {
    791807    border: 1px solid #c3c4c7;
    792808}
    793809
    794 .privacy-settings-accordion-heading {
     810.privacy-settings-accordion-heading,
     811.health-check-accordion-heading {
    795812    margin: 0;
    796813    border-top: 1px solid #c3c4c7;
    … …  
    801818}
    802819
    803 .privacy-settings-accordion-heading:first-child {
     820.privacy-settings-accordion-heading:first-child,
     821.health-check-accordion-heading:first-child {
    804822    border-top: none;
    805823}
    806824
    807 .privacy-settings-accordion-trigger {
     825.privacy-settings-accordion-trigger,
     826.health-check-accordion-trigger {
    808827    background: #fff;
    809828    border: 0;
    … …  
    820839    align-items: center;
    821840    justify-content: space-between;
     841    -webkit-user-select: auto;
     842    user-select: auto;
    822843}
    823844
    824845.privacy-settings-accordion-trigger:hover,
    825 .privacy-settings-accordion-trigger:active {
     846.privacy-settings-accordion-trigger:active,
     847.health-check-accordion-trigger:hover,
     848.health-check-accordion-trigger:active {
    826849    background: #f6f7f7;
    827850}
    828851
    829 .privacy-settings-accordion-trigger:focus {
     852.privacy-settings-accordion-trigger:focus,
     853.health-check-accordion-trigger:focus {
    830854    color: #1d2327;
    831855    border: none;
    … …  
    836860}
    837861
    838 .privacy-settings-accordion-trigger .title {
     862.privacy-settings-accordion-trigger .title,
     863.health-check-accordion-trigger .title {
    839864    pointer-events: none;
    840865    font-weight: 600;
    … …  
    843868
    844869.privacy-settings-accordion-trigger .icon,
    845 .privacy-settings-view-read .icon {
     870.privacy-settings-view-read .icon,
     871.health-check-accordion-trigger .icon,
     872.site-health-view-passed .icon {
    846873    border: solid #50575e;
    847874    border-width: 0 2px 2px 0;
    … …  
    855882}
    856883
    857 .privacy-settings-accordion-trigger .badge {
     884.privacy-settings-accordion-trigger .badge,
     885.health-check-accordion-trigger .badge {
    858886    padding: 0.1rem 0.5rem 0.15rem;
    859887    color: #2c3338;
    860888    font-weight: 600;
     889}
     890
     891.privacy-settings-accordion-trigger .badge {
    861892    margin-left: 0.5rem;
    862893}
    863894
    864 .privacy-settings-accordion-trigger .badge.blue {
     895.privacy-settings-accordion-trigger .badge.blue,
     896.health-check-accordion-trigger .badge.blue {
    865897    border: 1px solid #72aee6;
    866898}
    867899
    868 .privacy-settings-accordion-trigger .badge.orange {
     900.privacy-settings-accordion-trigger .badge.orange,
     901.health-check-accordion-trigger .badge.orange {
    869902    border: 1px solid #dba617;
    870903}
    871904
    872 .privacy-settings-accordion-trigger .badge.red {
     905.privacy-settings-accordion-trigger .badge.red,
     906.health-check-accordion-trigger .badge.red {
    873907    border: 1px solid #e65054;
    874908}
    875909
    876 .privacy-settings-accordion-trigger .badge.green {
     910.privacy-settings-accordion-trigger .badge.green,
     911.health-check-accordion-trigger .badge.green {
    877912    border: 1px solid #00ba37;
    878913}
    879914
    880 .privacy-settings-accordion-trigger .badge.purple {
     915.privacy-settings-accordion-trigger .badge.purple,
     916.health-check-accordion-trigger .badge.purple {
    881917    border: 1px solid #2271b1;
    882918}
    883919
    884 .privacy-settings-accordion-trigger .badge.gray {
     920.privacy-settings-accordion-trigger .badge.gray,
     921.health-check-accordion-trigger .badge.gray {
    885922    border: 1px solid #c3c4c7;
    886923}
    887924
    888925.privacy-settings-accordion-trigger[aria-expanded="true"] .icon,
    889 .privacy-settings-view-passed[aria-expanded="true"] .icon {
     926.privacy-settings-view-passed[aria-expanded="true"] .icon,
     927.health-check-accordion-trigger[aria-expanded="true"] .icon,
     928.site-health-view-passed[aria-expanded="true"] .icon {
    890929    transform: translateY(-30%) rotate(-135deg)
    891930}
    892931
    893 .privacy-settings-accordion-panel {
     932.privacy-settings-accordion-panel,
     933.health-check-accordion-panel {
    894934    margin: 0;
    895935    padding: 1em 1.5em;
    … …  
    897937}
    898938
    899 .privacy-settings-accordion-panel[hidden] {
     939.privacy-settings-accordion-panel[hidden],
     940.health-check-accordion-panel[hidden] {
    900941    display: none;
    901942}
    902943
    903 .privacy-settings-accordion-panel a .dashicons {
     944.privacy-settings-accordion-panel a .dashicons,
     945.health-check-accordion-panel a .dashicons {
    904946    text-decoration: none;
    905947}
    … …  
    946988@media screen and (max-width: 782px) {
    947989
    948     .privacy-settings-body {
     990    .privacy-settings-body,
     991    .health-check-body {
    949992        margin: 0 12px;
    950993        width: auto;
    951994    }
    952995
    953     .privacy-settings .notice {
     996    .privacy-settings .notice,
     997    .site-health .notice {
    954998        margin: 5px 10px 15px;
    955999    }
    9561000
    957     .privacy-settings .update-nag {
     1001    .privacy-settings .update-nag,
     1002    .site-health .update-nag {
    9581003        margin-right: 10px;
    9591004        margin-left: 10px;
    … …  
    9721017@media only screen and (max-width: 1004px) {
    9731018
    974     .privacy-settings-body {
     1019    .privacy-settings-body,
     1020    .health-check-body {
    9751021        margin: 0 22px;
    9761022        width: auto;

  • trunk/src/wp-admin/css/site-health.css

    r50845 r51025  
    1 .site-health #wpcontent,
    2 .site-health.auto-fold #wpcontent {
    3     padding-left: 0;
    4 }
    5 
    6 /* Emulates .wrap h1 styling */
    7 .health-check-header h1 {
    8     display: inline-block;
    9     font-weight: 600;
    10     margin: 0 0.8rem 1rem;
    11     font-size: 23px;
    12     padding: 9px 0 4px 0;
    13     line-height: 1.3;
    14 }
     1/* Note: Any Site Health selectors that use
     2duplicate styling from the Privacy settings screen
     3are styled in the Privacy section of edit.css */
    154
    165.health-check-body h2 {
    … …  
    2312}
    2413
    25 .health-check-header {
     14.health-check-widget-title-section {
    2615    text-align: center;
    27     margin: 0 0 1rem;
    28     background: #fff;
    29     border-bottom: 1px solid #dcdcde;
    30 }
    31 
    32 .health-check-title-section {
    33     clear: both;
    34     text-align: center;
    35     padding-top: 8px;
    36 }
    37 
    38 .site-health .health-check-title-section {
    39     display: flex;
    40     align-items: center;
    41     justify-content: center;
    4216}
    4317
    … …  
    187161}
    188162
    189 .health-check-tab:nth-child(1) {
    190     -ms-grid-column: 1; /* IE 11 */
    191 }
    192 
    193 .health-check-tab:nth-child(2) {
    194     -ms-grid-column: 2; /* IE 11 */
    195 }
    196 
    197 .health-check-tab:focus {
    198     color: #1d2327;
    199     outline: 1px solid #787c82;
    200     box-shadow: none;
    201 }
    202 
    203 .health-check-tab.active {
    204     box-shadow: inset 0 -3px #3582c4;
    205     font-weight: 600;
    206 }
    207163.health-check-offscreen-nav .health-check-tab.active {
    208164    box-shadow: inset 3px 0 #3582c4;
    … …  
    322278}
    323279
    324 .health-check-accordion {
    325     border: 1px solid #c3c4c7;
    326 }
    327 
    328 .health-check-accordion-heading {
    329     margin: 0;
    330     border-top: 1px solid #c3c4c7;
    331     font-size: inherit;
    332     line-height: inherit;
    333     font-weight: 600;
    334     color: inherit;
    335 }
    336 
    337 .health-check-accordion-heading:first-child {
    338     border-top: none;
    339 }
    340 
    341 .health-check-accordion-trigger {
    342     background: #fff;
    343     border: 0;
    344     color: #2c3338;
    345     cursor: pointer;
    346     display: flex;
    347     font-weight: 400;
    348     margin: 0;
    349     padding: 1em 3.5em 1em 1.5em;
    350     min-height: 46px;
    351     position: relative;
    352     text-align: left;
    353     width: 100%;
    354     align-items: center;
    355     justify-content: space-between;
    356     -webkit-user-select: auto;
    357     user-select: auto;
    358 }
    359 
    360280.wp-core-ui .button.site-health-view-passed {
    361281    position: relative;
    … …  
    364284}
    365285
    366 .health-check-accordion-trigger:hover,
    367 .health-check-accordion-trigger:active {
    368     background: #f6f7f7;
    369 }
    370 
    371 .health-check-accordion-trigger:focus {
    372     color: #1d2327;
    373     border: none;
    374     box-shadow: none;
    375     outline-offset: -1px;
    376     outline: 2px solid #2271b1;
    377     background-color: #f6f7f7;
    378 }
    379 
    380 .health-check-accordion-trigger .title {
    381     pointer-events: none;
    382     font-weight: 600;
    383     flex-grow: 1;
    384 }
    385 
    386 .health-check-accordion-trigger .icon,
    387 .site-health-view-passed .icon {
    388     border: solid #50575e;
    389     border-width: 0 2px 2px 0;
    390     height: 0.5rem;
    391     pointer-events: none;
    392     position: absolute;
    393     right: 1.5em;
    394     top: 50%;
    395     transform: translateY(-70%) rotate(45deg);
    396     width: 0.5rem;
    397 }
    398 
    399 .health-check-accordion-trigger .badge {
    400     padding: 0.1rem 0.5rem 0.15rem;
    401     color: #2c3338;
    402     font-weight: 600;
    403     margin-left: 0.5rem;
    404 }
    405 
    406 .health-check-accordion-trigger .badge.blue {
    407     border: 1px solid #72aee6;
    408 }
    409 
    410 .health-check-accordion-trigger .badge.orange {
    411     border: 1px solid #dba617;
    412 }
    413 
    414 .health-check-accordion-trigger .badge.red {
    415     border: 1px solid #e65054;
    416 }
    417 
    418 .health-check-accordion-trigger .badge.green {
    419     border: 1px solid #00ba37;
    420 }
    421 
    422 .health-check-accordion-trigger .badge.purple {
    423     border: 1px solid #2271b1;
    424 }
    425 
    426 .health-check-accordion-trigger .badge.gray {
    427     border: 1px solid #c3c4c7;
    428 }
    429 
    430 .health-check-accordion-trigger[aria-expanded="true"] .icon,
    431 .site-health-view-passed[aria-expanded="true"] .icon {
    432     transform: translateY(-30%) rotate(-135deg)
    433 }
    434 
    435 .health-check-accordion-panel {
    436     margin: 0;
    437     padding: 1em 1.5em;
    438     background: #fff;
    439 }
    440 
    441 .health-check-accordion-panel[hidden] {
    442     display: none;
    443 }
    444 
    445 .health-check-accordion-panel a .dashicons {
    446     text-decoration: none;
    447 }
    448286
    449287/* Better position for the WordPress admin notices and update nag. */
    … …  
    487325
    488326@media screen and (max-width: 782px) {
    489     .health-check-body {
    490         margin: 0 12px;
    491         width: auto;
    492     }
    493 
    494     .site-health .notice {
    495         margin: 5px 10px 15px;
    496     }
    497 
    498     .site-health .update-nag {
    499         margin-right: 10px;
    500         margin-left: 10px;
    501     }
    502327
    503328    .site-health-issues-wrapper .health-check-accordion-trigger {
    … …  
    532357}
    533358
    534 /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */
    535 @media only screen and (max-width: 1004px) {
    536     .health-check-body {
    537         margin: 0 22px;
    538         width: auto;
    539     }
    540 }

  • trunk/src/wp-admin/includes/dashboard.php

    r50833 r51025  
    18921892    $issues_total = $issue_counts['recommended'] + $issue_counts['critical'];
    18931893    ?>
    1894     <div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
     1894    <div class="health-check-widget-title-section site-health-progress-wrapper loading hide-if-no-js">
    18951895        <div class="site-health-progress">
    18961896            <svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
Note: See TracChangeset for help on using the changeset viewer.