fix: invert shopping list icons to black in light mode
White PNG icons were invisible on light backgrounds. Added semantic --shopping-icon-filter variable (invert(1) in light, none in dark) applied to card and picker icons.
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "homepage",
|
"name": "homepage",
|
||||||
"version": "1.13.2",
|
"version": "1.13.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -149,6 +149,9 @@
|
|||||||
--text-xl: 1.5rem;
|
--text-xl: 1.5rem;
|
||||||
--text-2xl: 2rem;
|
--text-2xl: 2rem;
|
||||||
--text-3xl: 3rem;
|
--text-3xl: 3rem;
|
||||||
|
|
||||||
|
/* Shopping icon filter — white PNGs need invert in light mode */
|
||||||
|
--shopping-icon-filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -212,6 +215,8 @@
|
|||||||
--color-link: var(--nord8);
|
--color-link: var(--nord8);
|
||||||
--color-link-visited: #c89fb6;
|
--color-link-visited: #c89fb6;
|
||||||
--color-link-hover: var(--nord7);
|
--color-link-hover: var(--nord7);
|
||||||
|
|
||||||
|
--shopping-icon-filter: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -261,6 +266,8 @@
|
|||||||
--color-link: var(--nord8);
|
--color-link: var(--nord8);
|
||||||
--color-link-visited: #c89fb6;
|
--color-link-visited: #c89fb6;
|
||||||
--color-link-hover: var(--nord7);
|
--color-link-hover: var(--nord7);
|
||||||
|
|
||||||
|
--shopping-icon-filter: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
|
|||||||
@@ -811,6 +811,7 @@
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
filter: var(--shopping-icon-filter, none);
|
||||||
}
|
}
|
||||||
.item-card.checked .card-icon {
|
.item-card.checked .card-icon {
|
||||||
filter: grayscale(0.6);
|
filter: grayscale(0.6);
|
||||||
@@ -1016,6 +1017,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
filter: var(--shopping-icon-filter, none);
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-actions {
|
.edit-actions {
|
||||||
|
|||||||
Reference in New Issue
Block a user