templates: Use SVG icons for apps page and shortcuts

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2019-05-06 16:09:50 -07:00 committed by James Valleroy
parent a931bf3fc5
commit b6325073c5
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
3 changed files with 13 additions and 8 deletions

View File

@ -42,7 +42,7 @@
{% if 'fa-' in item.icon %}
<span class="fa {{ item.icon }}"></span>
{% else %}
<img src="{% static 'theme/icons/' %}{{ item.icon }}.png"/>
<img src="{% static 'theme/icons/' %}{{ item.icon }}.svg"/>
{% endif %}
</div>
<div class="card-description">{{ item.short_description}}</div>
@ -68,7 +68,7 @@
{% if 'fa-' in item.icon %}
<span class="fa {{ item.icon }}"></span>
{% else %}
<img src="{% static 'theme/icons/' %}{{ item.icon }}.png"/>
<img src="{% static 'theme/icons/' %}{{ item.icon }}.svg"/>
{% endif %}
</div>
<div class="card-description">{{ item.short_description}}</div>

View File

@ -83,7 +83,7 @@
{% if "custom" in shortcut.icon %}
<img src="{{ shortcut.icon }}"/>
{% else %}
<img src="{% static 'theme/icons/' %}{{ shortcut.icon }}.png"/>
<img src="{% static 'theme/icons/' %}{{ shortcut.icon }}.svg"/>
{% endif %}
</div>
<div class="card-description">

View File

@ -290,12 +290,12 @@ footer {
/* Enabled app icons */
.apps-page .card-list-primary .card-icon img {
transition: filter 0.3s;
filter: contrast(0.2) sepia(1) hue-rotate(171deg) contrast(2);
transition: filter 0.3s;
filter: contrast(0.2) sepia(1) hue-rotate(171deg) contrast(2);
}
.apps-page .card-list-primary .card:hover .card-icon img {
filter: none;
filter: none;
}
/* Disabled app icons */
@ -378,7 +378,7 @@ a.menu_link_active {
/* 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-repeat: no-repeat;
background-size: 150% 25%;
@ -386,12 +386,17 @@ a.menu_link_active {
/* Disabled apps - grey glow */
.card-list-secondary .card-icon {
background: radial-gradient(farthest-side at bottom,#f0f0f0, white);
background: radial-gradient(farthest-side at bottom, #f0f0f0, white);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 150% 25%;
}
.card-icon img {
width: 128px;
height: 128px;
}
.card-icon span {
width: 100px;
height: 100px;