Make WordPress Core


Ignore:
Timestamp:
12/22/2020 03:00:49 PM (3 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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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    }
Note: See TracChangeset for help on using the changeset viewer.