WordPress.org
Get WordPress

Make WordPress Core

Changeset 49864


Ignore:
Timestamp:
12/22/2020 03:00:49 PM (6 years ago)
Author:
desrosj
Message:

Twenty Twenty-One: Improve striped table styling in Dark Mode.

This change improves the display of table blocks with the “Stripes” style selected.

Previously, the text was not visible in striped rows when using Dark Mode.

Props ryelle, poena, melchoyce, celendesign, audrasjb.
Fixes #52129.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

    r49800 r49864  
    27912791}
    27922792
     2793table thead,
     2794table tfoot,
     2795.wp-block-table thead,
     2796.wp-block-table tfoot {
     2797        text-align: center;
     2798}
     2799
    27932800table th {
    27942801        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    … …  
    28192826}
    28202827
     2828table.is-style-stripes .has-background {
     2829        color: #28303d;
     2830}
     2831
    28212832table.is-style-stripes .has-background thead tr {
    28222833        color: #28303d;
    … …  
    28272838}
    28282839
    2829 table.is-style-stripes .has-background tbody tr:nth-child(even) {
     2840table.is-style-stripes .has-background tbody tr {
    28302841        color: #28303d;
    28312842}
    … …  
    28352846}
    28362847
     2848.wp-block-table.is-style-stripes .has-background {
     2849        color: #28303d;
     2850}
     2851
    28372852.wp-block-table.is-style-stripes .has-background thead tr {
    28382853        color: #28303d;
    … …  
    28432858}
    28442859
    2845 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     2860.wp-block-table.is-style-stripes .has-background tbody tr {
    28462861        color: #28303d;
    28472862}
    … …  
    28682883.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    28692884        background-color: #f0f0f0;
     2885}
     2886
     2887table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     2888        background-color: rgba(255, 255, 255, 0.9);
     2889}
     2890
     2891.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     2892        background-color: rgba(255, 255, 255, 0.9);
    28702893}
    28712894

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

    r49825 r49864  
    49864986}
    49874987
     4988table thead,
     4989table tfoot,
     4990.wp-block-table thead,
     4991.wp-block-table tfoot {
     4992        text-align: center;
     4993}
     4994
    49884995table th {
    49894996        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    … …  
    50145021}
    50155022
     5023table figcaption {
     5024        color: #28303d;
     5025        font-size: 1rem;
     5026}
     5027
     5028.wp-block-table figcaption {
     5029        color: #28303d;
     5030        font-size: 1rem;
     5031}
     5032
    50165033table.is-style-regular .has-background {
    50175034        color: #28303d;
    50185035}
    50195036
     5037table.is-style-stripes .has-background {
     5038        color: #28303d;
     5039}
     5040
    50205041table.is-style-stripes .has-background thead tr {
    50215042        color: #28303d;
    … …  
    50265047}
    50275048
    5028 table.is-style-stripes .has-background tbody tr:nth-child(even) {
     5049table.is-style-stripes .has-background tbody tr {
    50295050        color: #28303d;
    50305051}
    … …  
    50345055}
    50355056
     5057.wp-block-table.is-style-stripes .has-background {
     5058        color: #28303d;
     5059}
     5060
    50365061.wp-block-table.is-style-stripes .has-background thead tr {
    50375062        color: #28303d;
    … …  
    50425067}
    50435068
    5044 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     5069.wp-block-table.is-style-stripes .has-background tbody tr {
    50455070        color: #28303d;
    50465071}
    … …  
    50675092.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    50685093        background-color: #f0f0f0;
     5094}
     5095
     5096table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     5097        background-color: rgba(255, 255, 255, 0.9);
     5098}
     5099
     5100.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     5101        background-color: rgba(255, 255, 255, 0.9);
    50695102}
    50705103

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css

    r49726 r49864  
    1212                --button--color-background-active: var(--global--color-background);
    1313                --global--color-border: #9ea1a7;
     14
     15                /* Block: Table */
     16                --table--stripes-border-color: rgba(240, 240, 240, 0.15);
     17                --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    1418        }
    1519

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css

    r49726 r49864  
    1212                --button--color-background-active: var(--global--color-background);
    1313                --global--color-border: #9ea1a7;
     14
     15                /* Block: Table */
     16                --table--stripes-border-color: rgba(240, 240, 240, 0.15);
     17                --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    1418        }
    1519

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

    r49795 r49864  
    20312031}
    20322032
     2033table thead,
     2034table tfoot,
     2035.wp-block-table thead,
     2036.wp-block-table tfoot {
     2037        text-align: center;
     2038}
     2039
    20332040table th,
    20342041.wp-block-table th {
    … …  
    20442051
    20452052table.is-style-regular .has-background,
     2053table.is-style-stripes .has-background,
    20462054table.is-style-stripes .has-background thead tr,
    20472055table.is-style-stripes .has-background tfoot tr,
    2048 table.is-style-stripes .has-background tbody tr:nth-child(even),
     2056table.is-style-stripes .has-background tbody tr,
    20492057.wp-block-table.is-style-regular .has-background,
     2058.wp-block-table.is-style-stripes .has-background,
    20502059.wp-block-table.is-style-stripes .has-background thead tr,
    20512060.wp-block-table.is-style-stripes .has-background tfoot tr,
    2052 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     2061.wp-block-table.is-style-stripes .has-background tbody tr {
    20532062        color: var(--table--has-background-text-color);
    20542063}
    … …  
    20692078.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    20702079        background-color: var(--table--stripes-background-color);
     2080}
     2081
     2082table.is-style-stripes .has-background tbody tr:nth-child(odd),
     2083.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     2084        background-color: var(--global--color-white-90);
    20712085}
    20722086

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss

    r49574 r49864  
    11table,
    22.wp-block-table {
     3
     4        thead,
     5        tfoot {
     6                text-align: center;
     7        }
    38
    49        th {
    … …  
    1217
    1318        &.is-style-regular .has-background,
     19        &.is-style-stripes .has-background,
    1420        &.is-style-stripes .has-background thead tr,
    1521        &.is-style-stripes .has-background tfoot tr,
    16         &.is-style-stripes .has-background tbody tr:nth-child(even) {
     22        &.is-style-stripes .has-background tbody tr {
    1723                color: var(--table--has-background-text-color);
    1824        }
    … …  
    2834                tbody tr:nth-child(odd) {
    2935                        background-color: var(--table--stripes-background-color);
     36                }
     37
     38                .has-background tbody tr:nth-child(odd) {
     39                        background-color: var(--global--color-white-90);
    3040                }
    3141        }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss

    r49574 r49864  
    44        min-width: 240px;
    55        border-collapse: collapse;
     6
     7        thead,
     8        tfoot {
     9                text-align: center;
     10        }
    611
    712        th {
    … …  
    1520        }
    1621
     22        figcaption {
     23                color: var(--global--color-primary);
     24                font-size: var(--global--font-size-xs);
     25        }
     26
    1727        &.is-style-regular .has-background,
     28        &.is-style-stripes .has-background,
    1829        &.is-style-stripes .has-background thead tr,
    1930        &.is-style-stripes .has-background tfoot tr,
    20         &.is-style-stripes .has-background tbody tr:nth-child(even) {
     31        &.is-style-stripes .has-background tbody tr {
    2132                color: var(--table--has-background-text-color);
    2233        }
    … …  
    3243                tbody tr:nth-child(odd) {
    3344                        background-color: var(--table--stripes-background-color);
     45                }
     46
     47                .has-background tbody tr:nth-child(odd) {
     48                        background-color: var(--global--color-white-90);
    3449                }
    3550        }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

    r49726 r49864  
    1212                --button--color-background-active: var(--global--color-background);
    1313                --global--color-border: #9ea1a7;
     14
     15                /* Block: Table */
     16                --table--stripes-border-color: rgba(240, 240, 240, 0.15);
     17                --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    1418
    1519                .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),

  • trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php

    r49826 r49864  
    7575
    7676                        if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) {
    77                                 $theme_css .= '--table--stripes-border-color: var(--global--color-dark-gray);';
    78                                 $theme_css .= '--table--stripes-background-color: var(--global--color-dark-gray);';
     77                                $theme_css .= '--table--stripes-border-color: rgba(240, 240, 240, 0.15);';
     78                                $theme_css .= '--table--stripes-background-color: rgba(240, 240, 240, 0.15);';
    7979                        }
    8080                }

  • trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php

    r49826 r49864  
    6666                        wp_add_inline_style(
    6767                                'twenty-twenty-one-custom-color-overrides',
    68                                 '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; }'
     68                                '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; --table--stripes-border-color: rgba(240, 240, 240, 0.15); --table--stripes-background-color: rgba(240, 240, 240, 0.15); }'
    6969                        );
    7070                }

  • trunk/src/wp-content/themes/twentytwentyone/style-rtl.css

    r49825 r49864  
    35093509}
    35103510
     3511table thead,
     3512table tfoot,
     3513.wp-block-table thead,
     3514.wp-block-table tfoot {
     3515        text-align: center;
     3516}
     3517
    35113518table th,
    35123519.wp-block-table th {
    … …  
    35223529}
    35233530
     3531table figcaption,
     3532.wp-block-table figcaption {
     3533        color: var(--global--color-primary);
     3534        font-size: var(--global--font-size-xs);
     3535}
     3536
    35243537table.is-style-regular .has-background,
     3538table.is-style-stripes .has-background,
    35253539table.is-style-stripes .has-background thead tr,
    35263540table.is-style-stripes .has-background tfoot tr,
    3527 table.is-style-stripes .has-background tbody tr:nth-child(even),
     3541table.is-style-stripes .has-background tbody tr,
    35283542.wp-block-table.is-style-regular .has-background,
     3543.wp-block-table.is-style-stripes .has-background,
    35293544.wp-block-table.is-style-stripes .has-background thead tr,
    35303545.wp-block-table.is-style-stripes .has-background tfoot tr,
    3531 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     3546.wp-block-table.is-style-stripes .has-background tbody tr {
    35323547        color: var(--table--has-background-text-color);
    35333548}
    … …  
    35483563.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    35493564        background-color: var(--table--stripes-background-color);
     3565}
     3566
     3567table.is-style-stripes .has-background tbody tr:nth-child(odd),
     3568.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     3569        background-color: var(--global--color-white-90);
    35503570}
    35513571

  • trunk/src/wp-content/themes/twentytwentyone/style.css

    r49825 r49864  
    35193519}
    35203520
     3521table thead,
     3522table tfoot,
     3523.wp-block-table thead,
     3524.wp-block-table tfoot {
     3525        text-align: center;
     3526}
     3527
    35213528table th,
    35223529.wp-block-table th {
    … …  
    35323539}
    35333540
     3541table figcaption,
     3542.wp-block-table figcaption {
     3543        color: var(--global--color-primary);
     3544        font-size: var(--global--font-size-xs);
     3545}
     3546
    35343547table.is-style-regular .has-background,
     3548table.is-style-stripes .has-background,
    35353549table.is-style-stripes .has-background thead tr,
    35363550table.is-style-stripes .has-background tfoot tr,
    3537 table.is-style-stripes .has-background tbody tr:nth-child(even),
     3551table.is-style-stripes .has-background tbody tr,
    35383552.wp-block-table.is-style-regular .has-background,
     3553.wp-block-table.is-style-stripes .has-background,
    35393554.wp-block-table.is-style-stripes .has-background thead tr,
    35403555.wp-block-table.is-style-stripes .has-background tfoot tr,
    3541 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     3556.wp-block-table.is-style-stripes .has-background tbody tr {
    35423557        color: var(--table--has-background-text-color);
    35433558}
    … …  
    35583573.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    35593574        background-color: var(--table--stripes-background-color);
     3575}
     3576
     3577table.is-style-stripes .has-background tbody tr:nth-child(odd),
     3578.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     3579        background-color: var(--global--color-white-90);
    35603580}
    35613581
Note: See TracChangeset for help on using the changeset viewer.