MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

change for gradient color in text

This commit is contained in:
Alex Martzios 2022-02-16 11:23:52 +02:00
parent 52b88066d9
commit c5934683b0
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/home/home.component.html
View File

@ -70,12 +70,12 @@
<div class="uk-width-3-4@m uk-flex uk-flex-center uk-flex-middle grid-gap uk-child-width-1-5@m uk-child-width-1-2">
<div *ngIf="publicationsSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
<icon gradient="monitor-gradient" degrees="110" ratio="3" [svg]="((publicationsSize.number|number) + publicationsSize.size) | textAsSvg"></icon>
<icon gradient="monitor-gradient" degrees="110" ratio="2.5" [svg]="((publicationsSize.number|number) + publicationsSize.size) | textAsSvg"></icon>
</a>
<div class="uk-margin-small uk-text-large">Publications</div>
</div>
<div *ngIf="datasetsSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove uk-text-primary uk-h1">
<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
<span class="uk-text-bold number">{{datasetsSize.number|number}}</span>{{datasetsSize.size}}
</a>
@ -83,23 +83,23 @@
<div class="uk-margin-small uk-text-large">Datasets</div>
</div>
<div *ngIf="softwareSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove uk-text-primary uk-h1">
<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
<span class="uk-text-bold number">{{softwareSize.number|number}}</span>{{softwareSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large">Software</div>
</div>
<!-- <div *ngIf="otherSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove uk-text-primary uk-h1">
<div *ngIf="otherSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
<span class="uk-text-bold number">{{otherSize.number|number}}</span>{{otherSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large">Other</div>
</div> -->
</div>
<div *ngIf="fundersSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove uk-text-primary uk-h1">
<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
<span class="uk-text-bold number">{{fundersSize.number|number}}</span>{{fundersSize.size}}
</a>
@ -123,8 +123,8 @@
</div>
<div class="uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="">
<div class="uk-text-primary uk-h2">
Tick
<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Global outlook
@ -134,8 +134,8 @@
</div>
</div>
<div class="">
<div class="uk-text-primary uk-h2">
Tick
<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Minimum effort to join
@ -145,8 +145,8 @@
</div>
</div>
<div class="">
<div class="uk-text-primary uk-h2">
Tick
<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Transparent methodology
@ -156,8 +156,8 @@
</div>
</div>
<div class="">
<div class="uk-text-primary uk-h2">
Tick
<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Customised to your needs

5
src/assets/monitor-custom.css
View File

@ -85,3 +85,8 @@ main {
stop-color: var(--monitor-gradient-end);
}
.custom-gradient-text {
background: linear-gradient(110deg, var(--monitor-gradient-start), var(--monitor-gradient-end));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}