nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-04-08 09:41:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

apps: Style disable app icons according to design

Browse Source 
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
This commit is contained in:
Sunil Mohan Adapa 2019-05-07 15:37:44 -07:00
parent dd58b4fd39
commit 4aae99d695
No known key found for this signature in database
GPG Key ID: 43EA1CFF0AA7C5F2
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
static/themes/default/css/plinth.css
View File

@ -288,23 +288,26 @@ footer {
justify-content: left;
}
.apps-page .card-icon img {
/* Enabled app icons */
.apps-page .card-list-primary .card-icon img {
transition: filter 0.3s;
/* --- .installed ---*/
filter: contrast(0.2) sepia(1) hue-rotate(171deg) contrast(2);
/* TODO #1309: uninstalled state */
/* --- .uninstalled ---*/
/* filter: grayscale(1) opacity(0.5); */
/* --- .uninstalled:hover ---*/
/* filter: grayscale(1) opacity(1); */
}
.apps-page .card:hover .card-icon img {
.apps-page .card-list-primary .card:hover .card-icon img {
filter: none;
}
/* Disabled app icons */
.apps-page .card-list-secondary .card-icon img {
transition: filter 0.3s;
filter: grayscale(1) opacity(0.5);
}
.apps-page .card-list-secondary .card:hover .card-icon img {
filter: grayscale(1) opacity(1);
}
a.menu_link {
text-decoration: none;
}
@ -356,11 +359,20 @@ a.menu_link_active {
font-size: 12px;
}
.card-icon {
background: radial-gradient(farthest-side at bottom,#eefff0, white);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 150% 25%;
/* Enable apps - green glow */
.card-list-primary .card-icon {
background: radial-gradient(farthest-side at bottom,#eefff0, white);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 150% 25%;
}
/* Disabled apps - grey glow */
.card-list-secondary .card-icon {
background: radial-gradient(farthest-side at bottom,#f0f0f0, white);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 150% 25%;
}
.card-icon span {