Skip to content

Commit e1b351c

Browse files
committed
🐛 fix: fix: use fixed hex colors and opaque backgrounds for cross-DE consistency
Replace all Adwaita named color variables (@success_color, @accent_color, @warning_color, @error_color) with fixed hex equivalents from the GNOME Adwaita palette in gradient tints, badges and icon colors. KDE Plasma overrides these named variables with Breeze theme values that are far more saturated, producing overly tinted card backgrounds. Remove gradient tints entirely from kernel group cards, purpose cards, and recommendation cards. Use plain @card_bg_color as background with only a colored left border as the visual type indicator. This eliminates the color bleed issue on Plasma while preserving the visual hierarchy on GNOME. Fixed hex colors used: - #2ec27e (success/green) - #3584e4 (accent/blue) - #e5a50a (warning/yellow) - #c01c28 (error/red) - #9141ac (purple/xanmod)
1 parent 8481f52 commit e1b351c

3 files changed

Lines changed: 60 additions & 45 deletions

File tree

usr/share/big-driver-manager/assets/css/style.css

Lines changed: 60 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,14 @@ searchentry:focus-visible, expander:focus-visible {
7474
/* --- Alert card (inline recommendations) -------------------------- */
7575
.alert-card {
7676
padding: 16px; border-radius: 8px;
77-
border: 1px solid alpha(@warning_color, 0.3);
78-
border-left: 4px solid @warning_color;
79-
background: alpha(@warning_color, 0.06);
77+
border: 1px solid alpha(#e5a50a, 0.25);
78+
border-left: 4px solid #e5a50a;
79+
background: alpha(#e5a50a, 0.04);
8080
}
8181
.alert-card.info {
82-
border-color: alpha(@accent_color, 0.3);
83-
border-left: 4px solid @accent_color;
84-
background: alpha(@accent_color, 0.06);
82+
border-color: alpha(#3584e4, 0.25);
83+
border-left: 4px solid #3584e4;
84+
background: alpha(#3584e4, 0.04);
8585
}
8686

8787
/* --- In-use pill -------------------------------------------------- */
@@ -90,40 +90,50 @@ searchentry:focus-visible, expander:focus-visible {
9090
padding: 2px 8px;
9191
}
9292
.badge-box.success {
93-
background: alpha(@success_color, 0.12);
93+
background: alpha(#2ec27e, 0.10);
9494
}
9595

9696
.badge-box.warning {
97-
background: alpha(@warning_color, 0.12);
97+
background: alpha(#e5a50a, 0.10);
9898
}
9999

100100
.badge-box.accent {
101-
background: alpha(@accent_color, 0.12);
101+
background: alpha(#3584e4, 0.10);
102102
}
103103

104104
.badge-box.purple {
105-
background: alpha(#9141ac, 0.14);
105+
background: alpha(#9141ac, 0.12);
106106
}
107107

108108
.badge-box.danger {
109-
background: alpha(@error_color, 0.12);
109+
background: alpha(#c01c28, 0.10);
110110
}
111111

112112
.badge {
113113
font-size: 0.8em;
114114
font-weight: 600;
115115
}
116-
.badge-box.success .badge { color: @success_color; }
117-
.badge-box.warning .badge { color: @warning_color; }
118-
.badge-box.accent .badge { color: @accent_color; }
116+
.badge-box.success .badge {
117+
color: #2ec27e;
118+
}
119+
120+
.badge-box.warning .badge {
121+
color: #e5a50a;
122+
}
123+
124+
.badge-box.accent .badge {
125+
color: #3584e4;
126+
}
119127
.badge-box.purple .badge { color: #c061cb; }
120-
.badge-box.danger .badge { color: @error_color; }
128+
.badge-box.danger .badge {
129+
color: #c01c28;
130+
}
121131

122132
/* --- Active pill -------------------------------------------------- */
123133
.active-pill {
124134
padding: 2px 8px;
125135
border-radius: 4px;
126-
background: linear-gradient(135deg, alpha(@success_color, 0.22), alpha(@success_color, 0.08));
136+
background: linear-gradient(135deg, alpha(#2ec27e, 0.16), alpha(#2ec27e, 0.06));
127137
}
128138

129139
/* --- Active button (green suggested-action override) -------------- */
@@ -135,24 +145,24 @@ searchentry:focus-visible, expander:focus-visible {
135145

136146
/* --- Purpose section cards ---------------------------------------- */
137147
.purpose-card-gaming {
138-
background: linear-gradient(160deg, alpha(@accent_color, 0.04), @card_bg_color);
139-
border-left: 3px solid alpha(@accent_color, 0.30);
148+
background: @card_bg_color;
149+
border-left: 3px solid alpha(#3584e4, 0.35);
140150
}
141151
.purpose-card-video {
142-
background: linear-gradient(160deg, alpha(@success_color, 0.04), @card_bg_color);
143-
border-left: 3px solid alpha(@success_color, 0.30);
152+
background: @card_bg_color;
153+
border-left: 3px solid alpha(#2ec27e, 0.35);
144154
}
145155
.purpose-card-compute {
146-
background: linear-gradient(160deg, alpha(@warning_color, 0.04), @card_bg_color);
147-
border-left: 3px solid alpha(@warning_color, 0.30);
156+
background: @card_bg_color;
157+
border-left: 3px solid alpha(#e5a50a, 0.35);
148158
}
149159
.purpose-card-nvidia {
150-
background: linear-gradient(160deg, alpha(#76b900, 0.04), @card_bg_color);
151-
border-left: 3px solid alpha(#76b900, 0.30);
160+
background: @card_bg_color;
161+
border-left: 3px solid alpha(#76b900, 0.35);
152162
}
153163
.purpose-card-mesa {
154-
background: linear-gradient(160deg, alpha(@accent_color, 0.03), @card_bg_color);
155-
border-left: 3px solid alpha(@accent_color, 0.22);
164+
background: @card_bg_color;
165+
border-left: 3px solid alpha(#3584e4, 0.28);
156166
}
157167

158168
/* Package row inside purpose card */
@@ -168,14 +178,14 @@ searchentry:focus-visible, expander:focus-visible {
168178
/* --- Recommendations card ----------------------------------------- */
169179
.purpose-card-recommend {
170180
padding: 0;
171-
background: linear-gradient(160deg, alpha(@accent_color, 0.04), alpha(@warning_color, 0.02), @card_bg_color);
172-
border-left: 3px solid alpha(@accent_color, 0.30);
181+
background: @card_bg_color;
182+
border-left: 3px solid alpha(#3584e4, 0.35);
173183
}
174184

175185
.purpose-card-suggest {
176186
padding: 0;
177-
background: linear-gradient(160deg, alpha(@accent_color, 0.03), @card_bg_color);
178-
border-left: 3px solid alpha(@accent_color, 0.20);
187+
background: @card_bg_color;
188+
border-left: 3px solid alpha(#3584e4, 0.25);
179189
}
180190

181191
/* --- Kernel page -------------------------------------------------- */
@@ -208,9 +218,9 @@ searchentry:focus-visible, expander:focus-visible {
208218
.in-use-pill {
209219
padding: 3px 12px;
210220
border-radius: 99px;
211-
background: linear-gradient(135deg, alpha(@success_color, 0.14), alpha(@success_color, 0.06));
212-
border: 1px solid alpha(@success_color, 0.18);
213-
color: @success_color;
221+
background: linear-gradient(135deg, alpha(#2ec27e, 0.12), alpha(#2ec27e, 0.05));
222+
border: 1px solid alpha(#2ec27e, 0.14);
223+
color: #2ec27e;
214224
font-weight: 700;
215225
font-size: 0.85em;
216226
}
@@ -219,34 +229,34 @@ searchentry:focus-visible, expander:focus-visible {
219229
.kernel-installed-card {
220230
padding: 0;
221231
border-radius: 14px;
222-
background: linear-gradient(160deg, alpha(@success_color, 0.03), @card_bg_color);
223-
border-left: 3px solid alpha(@success_color, 0.22);
232+
background: @card_bg_color;
233+
border-left: 3px solid alpha(#2ec27e, 0.35);
224234
}
225235

226236
/* Available group cards — by type */
227237
.kernel-group-lts {
228238
padding: 0;
229239
border-radius: 14px;
230-
background: linear-gradient(160deg, alpha(@success_color, 0.02), @card_bg_color);
231-
border-left: 3px solid alpha(@success_color, 0.20);
240+
background: @card_bg_color;
241+
border-left: 3px solid alpha(#2ec27e, 0.30);
232242
}
233243
.kernel-group-standard {
234244
padding: 0;
235245
border-radius: 14px;
236-
background: linear-gradient(160deg, alpha(@accent_color, 0.02), @card_bg_color);
237-
border-left: 3px solid alpha(@accent_color, 0.18);
246+
background: @card_bg_color;
247+
border-left: 3px solid alpha(#3584e4, 0.28);
238248
}
239249
.kernel-group-xanmod {
240250
padding: 0;
241251
border-radius: 14px;
242-
background: linear-gradient(160deg, alpha(#9141ac, 0.03), @card_bg_color);
243-
border-left: 3px solid alpha(#9141ac, 0.22);
252+
background: @card_bg_color;
253+
border-left: 3px solid alpha(#9141ac, 0.30);
244254
}
245255
.kernel-group-rt {
246256
padding: 0;
247257
border-radius: 14px;
248-
background: linear-gradient(160deg, alpha(@warning_color, 0.03), @card_bg_color);
249-
border-left: 3px solid alpha(@warning_color, 0.22);
258+
background: @card_bg_color;
259+
border-left: 3px solid alpha(#e5a50a, 0.30);
250260
}
251261

252262
/* Group header inside kernel group cards */
@@ -266,8 +276,13 @@ searchentry:focus-visible, expander:focus-visible {
266276
}
267277

268278
/* --- Success / error icons ---------------------------------------- */
269-
.success-icon { color: @success_color; }
270-
.error-icon { color: @error_color; }
279+
.success-icon {
280+
color: #2ec27e;
281+
}
282+
283+
.error-icon {
284+
color: #c01c28;
285+
}
271286

272287
/* --- Misc helpers ------------------------------------------------- */
273288
.dim-label { opacity: 0.75; }
Binary file not shown.
Binary file not shown.

0 commit comments

Comments
 (0)