mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-19 19:11:32 +02:00
c58be3c57e
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
109 lines
2.7 KiB
SCSS
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;
|
|
}
|
|
}
|
|
}
|