WordPress/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss
desrosj c58be3c57e 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.
Built from https://develop.svn.wordpress.org/trunk@49864


git-svn-id: http://core.svn.wordpress.org/trunk@49583 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-12-22 15:02:05 +00:00

109 lines
2.7 KiB
SCSS

/* OS dark theme preference */
@media only screen {
.is-dark-theme.is-dark-theme {
--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;
/* Block: Table */
--table--stripes-border-color: rgba(240, 240, 240, 0.15);
--table--stripes-background-color: rgba(240, 240, 240, 0.15);
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
background: #000;
color: #fff;
text-decoration: none;
}
img {
filter: brightness(.85) contrast(1.1);
}
}
.respect-color-scheme-preference.is-dark-theme body {
background-color: var(--global--color-background);
}
#dark-mode-toggler {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--global--font-size-xs);
padding: 0.5em;
min-height: 44px; // A11y requirement for minimum clickable area.
min-width: max-content;
border: 2px solid currentColor;
box-shadow: none;
background: var(--button--color-text);
color: var(--button--color-background);
z-index: 9998;
.no-js & {
display: none;
}
&.fixed-bottom {
position: fixed;
bottom: 5px;
right: 5px;
transition: bottom 0.5s;
&.hide:not(:focus) {
bottom: -80px;
}
}
&.relative {
position: absolute;
height: 44px;
top: calc(2.4 * var(--global--spacing-vertical) - 44px);
right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
.admin-bar & {
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
@media only screen and (max-width: 782px) {
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px);
}
@media only screen and (max-width: 481px) {
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px);
}
}
~ nav {
body:not(.primary-navigation-open) & {
@media only screen and (max-width: 481px) {
top: calc(44px + 44px);
}
}
}
}
.primary-navigation-open & {
display: none;
}
&:hover,
&:focus {
color: var(--button--color-background-active);
border: 2px solid var(--button--color-text-active);
background-color: var(--button--color-text-active);
}
.is-IE & {
display: none;
}
}
}