| Server IP : 167.99.224.18 / Your IP : 216.73.216.136 Web Server : Apache/2.4.41 (Ubuntu) System : Linux wordpress-ubuntu-s-1vcpu-1gb-nyc1-01 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 User : root ( 0) PHP Version : 8.0.25 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/html/wp-content/themes/twentytwentyone/assets/sass/07-utilities/ |
Upload File : |
// Gutenberg text color options
.has-black-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-black, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-black);
}
.has-gray-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-gray, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-gray);
}
.has-dark-gray-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-dark-gray, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-dark-gray);
}
.has-green-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-green, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-green);
}
.has-blue-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-blue, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-blue);
}
.has-purple-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-purple, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-purple);
}
.has-red-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-red, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-red);
}
.has-orange-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-orange, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-orange);
}
.has-yellow-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-yellow, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-yellow);
}
.has-white-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-white, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-white);
}
// Gutenberg background-color options
.has-background {
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
color: currentColor;
}
}
.has-black-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-black, #000000);
background-color: var(--local--color-background);
}
background-color: var(--global--color-black);
}
.has-dark-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-dark-gray, #000000);
background-color: var(--local--color-background);
}
background-color: var(--global--color-dark-gray);
}
.has-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-gray, #000000);
background-color: var(--local--color-background);
}
background-color: var(--global--color-gray);
}
.has-light-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-light-gray, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-light-gray);
}
.has-green-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-green, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-green);
}
.has-blue-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-blue, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-blue);
}
.has-purple-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-purple, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-purple);
}
.has-red-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-red, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-red);
}
.has-orange-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-orange, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-orange);
}
.has-yellow-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-yellow, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-yellow);
}
.has-white-background-color[class] {
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-background: var(--global--color-white, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-white);
}
.has-background:not(.has-text-color) {
&.has-black-background-color[class],
&.has-gray-background-color[class],
&.has-dark-gray-background-color[class] {
color: var(--global--color-white);
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-background, #FFFFFF);
// Reverse the local foreground color in darkmode
.is-dark-theme & {
--local--color-primary: var(--global--color-primary, #000000);
}
color: var(--local--color-primary, var(--global--color-primary));
}
}
&.has-green-background-color[class],
&.has-blue-background-color[class],
&.has-purple-background-color[class],
&.has-red-background-color[class],
&.has-orange-background-color[class],
&.has-yellow-background-color[class],
&.has-white-background-color[class] {
color: var(--global--color-dark-gray);
// Localize CSS-variables to limit relationship scope
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-primary, #000000);
// Reverse the local foreground color in darkmode
.is-dark-theme & {
--local--color-primary: var(--global--color-background, #FFFFFF);
}
color: var(--local--color-primary, var(--global--color-primary));
}
}
}
// Custom gradients
.has-purple-to-yellow-gradient-background {
background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
}
.has-yellow-to-purple-gradient-background {
background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
}
.has-green-to-yellow-gradient-background {
background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
}
.has-yellow-to-green-gradient-background {
background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
}
.has-red-to-yellow-gradient-background {
background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
}
.has-yellow-to-red-gradient-background {
background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
}
.has-purple-to-red-gradient-background {
background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
}
.has-red-to-purple-gradient-background {
background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
}