← All changes
|
includes/widgets/Interactive_Gradient_Mesh/style.css
+20
-2
51.1.76
→
51.1.83
View file →
| @@ -153,8 +153,17 @@ | ||
| 153 | 153 | margin: 0 auto; |
| 154 | 154 | display: flex; |
| 155 | 155 | flex-direction: column; |
| 156 | 156 | gap: 10px; |
| 157 | + | |
| 158 | + /* The copy is white and the mesh can be any colour the user picks, including | |
| 159 | + very pale ones. This scrim sits only behind the text, fades out well before | |
| 160 | + the edges, and keeps the wording readable on any mesh. */ | |
| 161 | + padding: 26px 22px; | |
| 162 | + background: radial-gradient(ellipse at center, | |
| 163 | + rgba(0, 0, 0, 0.34) 0%, | |
| 164 | + rgba(0, 0, 0, 0.20) 55%, | |
| 165 | + rgba(0, 0, 0, 0) 78%); | |
| 157 | 166 | } |
| 158 | 167 | |
| 159 | 168 | .king-addons-gradient-mesh__template { |
| 160 | 169 | width: 100%; |
| @@ -167,13 +176,22 @@ | ||
| 167 | 176 | .king-addons-gradient-mesh--align-right .king-addons-gradient-mesh__content { |
| 168 | 177 | margin-right: 0; |
| 169 | 178 | } |
| 170 | 179 | |
| 180 | +/* The mesh defaults to pale colours while the copy is white, so without this the | |
| 181 | + heading and eyebrow are close to invisible. A soft shadow restores legibility | |
| 182 | + over any mesh, and leaves the colours themselves to the widget's controls. */ | |
| 183 | +.king-addons-gradient-mesh__subtitle, | |
| 184 | +.king-addons-gradient-mesh__title, | |
| 185 | +.king-addons-gradient-mesh__text { | |
| 186 | + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45); | |
| 187 | +} | |
| 188 | + | |
| 171 | 189 | .king-addons-gradient-mesh__subtitle { |
| 172 | 190 | font-size: 14px; |
| 173 | 191 | letter-spacing: 0.16em; |
| 174 | 192 | text-transform: uppercase; |
| 175 | - color: rgba(255, 255, 255, 0.75); | |
| 193 | + color: rgba(255, 255, 255, 0.95); | |
| 176 | 194 | } |
| 177 | 195 | |
| 178 | 196 | .king-addons-gradient-mesh__title { |
| 179 | 197 | margin: 0; |
| @@ -182,9 +200,9 @@ | ||
| 182 | 200 | color: #ffffff; |
| 183 | 201 | } |
| 184 | 202 | |
| 185 | 203 | .king-addons-gradient-mesh__text { |
| 186 | - color: rgba(255, 255, 255, 0.78); | |
| 204 | + color: rgba(255, 255, 255, 0.94); | |
| 187 | 205 | font-size: 16px; |
| 188 | 206 | line-height: 1.6; |
| 189 | 207 | } |
| 190 | 208 | |