nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-05-27 10:44:33 +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

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

@ -288,23 +288,26 @@ footer {
justify-content: left; justify-content: left;
} }
.apps-page .card-icon img { /* Enabled app icons */
.apps-page .card-list-primary .card-icon img {
transition: filter 0.3s; transition: filter 0.3s;
/* --- .installed ---*/
filter: contrast(0.2) sepia(1) hue-rotate(171deg) contrast(2); 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; 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 { a.menu_link {
text-decoration: none; text-decoration: none;
} }
@ -356,13 +359,22 @@ a.menu_link_active {
font-size: 12px; font-size: 12px;
} }
.card-icon { /* Enable apps - green glow */
.card-list-primary .card-icon {
background: radial-gradient(farthest-side at bottom,#eefff0, white); background: radial-gradient(farthest-side at bottom,#eefff0, white);
background-position: 50% 100%; background-position: 50% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 150% 25%; 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 { .card-icon span {
width: 100px; width: 100px;
height: 100px; height: 100px;