Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6aa3dd9

Browse files
N6REJN6REJ
committed
Adjust featured plan background color mixing for better contrast across templates
1 parent 44e5c54 commit 6aa3dd9

File tree

14 files changed

+29
-51
lines changed

14 files changed

+29
-51
lines changed

‎css/1207.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--bears-column-background: #ffffff;
3232
--bears-header-background: #ffffff;
3333
--bears-features-background-odd: var(--bears-column-background);
34-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 72%, rgba(0, 0, 0, 0.28));
34+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 80%, rgba(0, 0, 0, 0.20));
3535

3636
/* Colors - Text */
3737
--bears-title-color: #595959;
@@ -109,6 +109,7 @@
109109
.template-1207 .bears_pricing_tables .plan-title {
110110
background-color: #ebebeb;
111111
padding: 1em 1em 0;
112+
width: 100%;
112113
}
113114

114115
.template-1207 .bears_pricing_tables .plan.featured .plan-title {

‎css/1214.css‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
--bears-column-background: #ffffff;
3333
--bears-header-background: #ffffff;
3434
--bears-features-background-odd: var(--bears-column-background);
35-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 72%, rgba(0, 0, 0, 0.28));
35+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 80%, rgba(0, 0, 0, 0.20));
3636

3737
/* Colors - Text */
3838
--bears-title-color: #ffffff;
@@ -177,18 +177,6 @@
177177
border-top: var(--bears-border-width) var(--bears-border-style) var(--bears-border-color);
178178
}
179179

180-
.template-1214 .plan-features li:nth-child(even) {
181-
background: rgba(0, 0, 0, 0.08);
182-
}
183-
184-
.template-1214 .plan.featured .plan-features li:nth-child(odd) {
185-
background: var(--bears-column-featured-background);
186-
}
187-
188-
.template-1214 .plan.featured .plan-features li:nth-child(even) {
189-
background: #2c425b;
190-
}
191-
192180
.template-1214 .bears_pricing_tables .plan-select {
193181
padding: 10px 10px 0;
194182
margin-top: auto;

‎css/1223.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--bears-column-background: #190806;
3232
--bears-header-background: #CCCCCC;
3333
--bears-features-background-odd: #ffffff;
34-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 82%, rgba(0, 0, 0, 0.18));
34+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 90%, rgba(0, 0, 0, 0.10));
3535

3636
/* Colors - Text */
3737
--bears-title-color: #190806;

‎css/1240.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--bears-column-background: #091b27;
3232
--bears-header-background: #0d293c;
3333
--bears-features-background-odd: #fff;
34-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 72%, rgba(0, 0, 0, 0.28));
34+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 90%, rgba(0, 0, 0, 0.10));
3535

3636
/* Colors - Text */
3737
--bears-title-color: #fff;

‎css/1255.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--bears-column-background: #191919;
3232
--bears-header-background: #262626;
3333
--bears-features-background-odd: #E6E6E6;
34-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 72%, rgba(0, 0, 0, 0.28));
34+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 94%, rgba(0, 0, 0, 0.06));
3535

3636
/* Colors - Text */
3737
--bears-title-color: #fff;
@@ -48,7 +48,7 @@
4848
--bears-featured-price-color: #fff;
4949
--bears-featured-features-text-color: #fff;
5050
--bears-featured-features-background-odd: var(--bears-column-featured-background);
51-
--bears-featured-features-background-even: color-mix(in srgb, var(--bears-featured-features-background-odd) 75%, rgba(255, 255, 255, 0.25));
51+
--bears-featured-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 90%, rgba(0, 0, 0, 0.10));
5252

5353
/* Colors - Buttons */
5454
--bears-button-background-color: #191919;

‎css/1265.css‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -226,23 +226,16 @@
226226
transition: background-color var(--bears-transition-speed) ease;
227227
}
228228

229-
/* Ensure feature list items maintain the hover effect */
230-
.template-1265 .bears_pricing_tables:hover .plan .plan-features li:nth-child(odd),
231-
.template-1265 .bears_pricing_tables:hover .plan .plan-features li:nth-child(even) {
232-
background-color: rgba(0, 0, 0, 0.9);
233-
}
234-
235229
/* Ensure the hover effect works for featured plans too */
236230
.template-1265 .bears_pricing_tables:hover .plan.featured header,
237231
.template-1265 .bears_pricing_tables:hover .plan.featured .features,
238232
.template-1265 .bears_pricing_tables:hover .plan.featured .plan-select {
239233
background-color: rgba(0, 0, 0, 0.9);
240234
}
241235

242-
.template-1265 .bears_pricing_tables:hover .plan.featured .plan-features li:nth-child(odd),
243-
.template-1265 .bears_pricing_tables:hover .plan.featured .plan-features li:nth-child(even) {
244-
background-color: rgba(0, 0, 0, 0.9);
245-
}
236+
.template-1265 .bears_pricing_tables .plan.featured .plan-features li:nth-child(even) {
237+
background: var(--bears-features-background-even);
238+
}
246239

247240
/* Scale the price-left and price-right icons on hover */
248241
.template-1265 .bears_pricing_tables:hover .price-left,

‎css/1276.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--bears-column-background: #e6e6e6;
3232
--bears-header-background: #191919;
3333
--bears-features-background-odd: #fff;
34-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 72%, rgba(0, 0, 0, 0.28));
34+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 83%, rgba(0, 0, 0, 0.17));
3535

3636
/* Colors - Text */
3737
--bears-title-color: #fff;
@@ -43,12 +43,12 @@
4343

4444
/* Colors - Featured Elements */
4545
--bears-column-featured-background: #e6e6e6;
46-
--bears-header-featured-background: #222f3d;
46+
--bears-header-featured-background: color-mix(in srgb, #222F3D 98%, rgba(255, 255, 255, 0.02));
4747
--bears-featured-title-color: #fff;
4848
--bears-featured-price-color: #fff;
4949
--bears-featured-features-text-color: var(--bears-features-text-color);
5050
--bears-featured-features-background-odd: #fff;
51-
--bears-featured-features-background-even: color-mix(in srgb, var(--bears-featured-features-background-odd) 70%, rgba(255, 255, 255, 0.30));
51+
--bears-featured-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 83%, rgba(0, 0, 0, 0.17));
5252

5353
/* Colors - Buttons */
5454
--bears-button-background-color: #191919;

‎css/1299.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--bears-column-background: #333333;
3232
--bears-header-background: #333333;
3333
--bears-features-background-odd: #E6E6E6;
34-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 85%, rgba(0, 0, 0, 0.15));
34+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 92%, rgba(0, 0, 0, 0.08));
3535

3636
/* Colors - Text */
3737
--bears-title-color: #fff;
@@ -48,7 +48,7 @@
4848
--bears-featured-price-color: #fff;
4949
--bears-featured-features-text-color: var(--bears-features-text-color);
5050
--bears-featured-features-background-odd: #fff;
51-
--bears-featured-features-background-even: color-mix(in srgb, var(--bears-featured-features-background-odd) 70%, rgba(255, 255, 255, 0.30));
51+
--bears-featured-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 92%, rgba(0, 0, 0, 0.08));
5252

5353
/* Colors - Buttons */
5454
--bears-button-background-color: #191919;
@@ -116,7 +116,9 @@
116116
display: flex;
117117
align-items: center;
118118
justify-content: center;
119-
}
119+
width: 100%;
120+
box-sizing: border-box;
121+
}
120122

121123
.template-1299 .bears_pricing_tables .featured .plan-title {
122124
background-color: #4D2909;

‎css/1404.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--bears-column-background: #5f3047;
3232
--bears-header-background: #5f3047;
3333
--bears-features-background-odd: var(--bears-column-background);
34-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 72%, rgba(0, 0, 0, 0.28));
34+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 80%, rgba(0, 0, 0, 0.20));
3535

3636
/* Colors - Text */
3737
--bears-title-color: #ffffff;
@@ -150,7 +150,7 @@
150150
z-index: 0;
151151
background: rgba(0, 0, 0, 0.3);
152152
/* Using clip-path to create a triangle that spans the full width */
153-
clip-path: polygon(0 0, 100% 0, 0 100%);
153+
clip-path: polygon(0 0, 100% 3px, 0 100%);
154154
}
155155

156156
/* Price section styling */

‎css/1464.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--bears-column-background: #1a1a1a;
3232
--bears-header-background: #156dab;
3333
--bears-features-background-odd: var(--bears-column-background);
34-
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 72%, rgba(0, 0, 0, 0.28));
34+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 80%, rgba(0, 0, 0, 0.20));
3535

3636
/* Colors - Text */
3737
--bears-title-color: #fff;

0 commit comments

Comments
 (0)