[Usage Counts | Trunk]: Add fragments on home page to make slides bookmarkable. Add iframe for reports. Add footer

src/app/about/about.component.html

@@ -47,8 +47,8 @@
     </div>
     <div class="uk-section uk-margin-large-top workflows">
       <h2 class="uk-text-bold">Architecture & Workflows</h2>
-      <div class="uk-flex uk-grid uk-grid-collapse uk-child-width-1-2@l uk-margin-large-top" uk-grid>
+      <div class="uk-flex uk-grid uk-child-width-1-2@l uk-margin-large-top" uk-grid>
-        <img src="assets/usage-statistics-assets/about/3.png" class="uk-margin-medium-top uk-width-3-5@l">
+        <img src="assets/usage-statistics-assets/about/3.png" class="uk-margin-medium-top uk-width-3-5@l uk-height-max-medium">
         <div>
           <h3 class="uk-text-bold portal-color">Architecture functionalities</h3>
           <div class="uk-margin-large-left">

src/app/about/about.component.ts

@@ -11,17 +11,11 @@ import {Title} from '@angular/platform-browser';
 export class AboutComponent implements OnInit{
   faqs: any[] = faqs;
   
-  constructor(private route: ActivatedRoute,
+  constructor(private title: Title) {
-              private title: Title) {
   }
   
   ngOnInit() {
     this.title.setTitle('OpenAIRE - UsageCounts | About');
-    this.route.params.subscribe(params => {
-      if(params && params['section']) {
-        this.goTo(params['section']);
-      }
-    });
   }
   
   goTo(id: string) {

src/app/analytics/analytics.component.html

@@ -1,6 +1,4 @@
-<!--class="uk-margin-left uk-margin-right"-->
+<div *ngIf="countryFb" class="uk-section uk-section-small uk-container countries uk-text-center uk-text-bold">
-<div>
-  <div *ngIf="countryFb" class="uk-section uk-section-small uk-container countries uk-text-center uk-text-bold">
     <h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
     <div class="uk-container uk-container-small">
       <div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom">
@@ -108,4 +106,3 @@
       </div>
     </div>
   </div>
-</div>

src/app/app.component.html

@@ -1,10 +1,13 @@
-<navbar *ngIf= "showMenu" portal="usage-counts" [onlyTop]="false" [userMenu]="false" [showLogo]="!isHome.value"
+<navbar *ngIf= "showMenu" portal="usage-counts" [onlyTop]="false" [userMenu]="false" [showLogo]="!isHome"
         [user]="user" [userMenuItems]=userMenuItems [menuItems]=menuItems [properties]=properties></navbar>
 <div class="custom-main-content">
-    <main [class.full-height]="isHome.value">
+    <main [class.full-height]="isHome">
         <router-outlet></router-outlet>
     </main>
 </div>
+<bottom *ngIf="!isHome" class="footer"
+        [showSocialButtons]="true" [showMenuItems]="true" [showOpenaire]="true"
+        [darkBackground]="false" [centered]="true"></bottom>
 <cookie-law position="bottom">
     OpenAIRE uses cookies in order to function properly.<br>
     Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing experience possible.

src/app/app.component.ts

@@ -1,10 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
-import {ActivatedRoute, NavigationStart, Router} from '@angular/router';
 import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
 import {User} from './openaireLibrary/login/utils/helper.class';
 import {properties} from '../environments/environment';
-import {BehaviorSubject} from 'rxjs';
+import {LayoutService} from './services/layout.service';
 
 @Component({
   selector: 'app',
@@ -20,23 +19,16 @@ export class AppComponent implements OnInit {
   properties: EnvProperties = properties;
   showMenu: boolean = false;
   user: User;
-  isHome: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+  isHome: boolean;
   
-  constructor(private route: ActivatedRoute,
+  constructor(private layoutService: LayoutService) {}
-              private router: Router) {
-    this.router.events.subscribe(event => {
-      if (event instanceof NavigationStart) {
-        let path = event.url.split('?')[0];
-        this.isHome.next(path === '/');
-      }
-    })
-  }
   
   ngOnInit() {
     this.logInUrl = this.properties.loginUrl;
     this.logOutUrl = this.properties.logoutUrl;
     this.showMenu = true;
-    this.isHome.asObservable().subscribe(isHome => {
+    this.layoutService.isHome.subscribe(isHome => {
+      this.isHome = isHome
       this.buildMenu(isHome);
     });
   }
@@ -47,7 +39,7 @@ export class AppComponent implements OnInit {
         rootItem: new MenuItem("resources", "Resources", "", "/resources", false, [], null, {}),
         items: [
           new MenuItem("provide", "OpenAIRE Provide", "", "/resources", false, [], null, {}),
-          new MenuItem("apis", "APIs and Reports", "", "/resources/apis", false, [], null, {})
+          new MenuItem("apis", "APIs and Reports", "", "/resources", false, [], null, {}, null, 'apis')
         ]
       },
       {
@@ -61,9 +53,9 @@ export class AppComponent implements OnInit {
       {
         rootItem: new MenuItem("about", "About", "", "/about", false, [], null, {}),
         items: [
-          new MenuItem("architecture", "Architecture", "", "/about/architecture", false, [], null, {}),
+          new MenuItem("architecture", "Architecture", "", "/about", false, [], null, {}, null, 'architecture'),
 /*
-          new MenuItem("faqs", "FAQs", "", "/about/faqs", false, [], null, {})
+          new MenuItem("faqs", "FAQs", "", "/about", false, [], null, {}, null, 'faqs')
 */
         ]
       }

src/app/app.module.ts

@@ -8,18 +8,20 @@ import {SafeHtmlPipeModule} from "./openaireLibrary/utils/pipes/safeHTMLPipe.mod
 import {AppComponent} from "./app.component";
 import {NgModule} from "@angular/core";
 import {EnvironmentSpecificService} from "./openaireLibrary/utils/properties/environment-specific.service";
+import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module';
 
 @NgModule({
-    imports: [
+  imports: [
-        AppRoutingModule,
+    AppRoutingModule,
-        BrowserModule,
+    BrowserModule,
-        BrowserAnimationsModule,
+    BrowserAnimationsModule,
-        HttpClientModule,
+    HttpClientModule,
-        NavigationBarModule,
+    NavigationBarModule,
-        CookieLawModule,
+    CookieLawModule,
-        SafeHtmlPipeModule,
+    SafeHtmlPipeModule,
-        BrowserAnimationsModule
+    BrowserAnimationsModule,
-    ],
+    BottomModule
+  ],
     declarations: [
         AppComponent,
     ],

src/app/app.routing.ts

@@ -1,19 +1,18 @@
-import { NgModule} from '@angular/core';
+import {NgModule} from '@angular/core';
 import {Routes, RouterModule, PreloadAllModules} from '@angular/router';
 
 const appRoutes: Routes = [
   {
     path: '',
-    loadChildren: './home/home.module#HomeModule'
+    loadChildren: './home/home.module#HomeModule',
+    data: {
+      isHome: true
+    }
   },
   {
     path: 'resources',
     loadChildren: './resources/resources.module#ResourcesModule'
   },
-  {
-    path: 'resources/:section',
-    loadChildren: './resources/resources.module#ResourcesModule'
-  },
   {
     path: 'analytics',
     loadChildren: './analytics/analytics.module#AnalyticsModule'
@@ -27,16 +26,20 @@ const appRoutes: Routes = [
     loadChildren: './about/about.module#AboutModule'
   },
   {
-    path: 'about/:section',
+    path: 'sushilite/:id',
-    loadChildren: './about/about.module#AboutModule'
+    loadChildren: './sushilite/sushilite.module#SushiliteModule'
   }
- ];
+];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(appRoutes, {
+  imports: [RouterModule.forRoot(appRoutes, {
     preloadingStrategy: PreloadAllModules,
-    scrollPositionRestoration: "top"
+    anchorScrolling: 'enabled',
-  }) ],
+    onSameUrlNavigation: 'reload',
-  exports: [ RouterModule ]
+    scrollPositionRestoration: 'enabled',
+    scrollOffset: [0, 100]
+  })],
+  exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {
+}

src/app/home/home.component.css

@@ -4,7 +4,7 @@
     background-image: url("/assets/usage-statistics-assets/home/1.svg");
     background-size: cover;
     background-repeat: no-repeat;
-    background-position: 0 -100px;
+    background-position: 20px -100px;
   }
 }
 
@@ -16,43 +16,22 @@
   padding: 25px 0 0 25px;
 }
 
-/*.first > object {
+@media only screen and (min-width: 960px) {
-  top: -100px;
-  width: 1100px;
-  position: absolute;
-}
-
-@media only screen and (min-width: 1200px) {
-  .first:before {
-    top: -100px;
-    width: 1100px;
-    height: 703px;
-    position: absolute;
-    z-index: 1;
-    background: transparent;
-  }
-}*/
-
-@media only screen and (min-width: 1200px) {
   .third .first-column {
     background-image: url("/assets/usage-statistics-assets/home/3.1.svg"), url("/assets/usage-statistics-assets/home/3.2.svg");
     background-repeat: no-repeat;
     background-size: contain, auto;
     background-position: top left, bottom center;
     font-size: 14px;
-    padding: 40px 0 40px 50px;
+    padding: 60px 0 40px 50px;
     position: relative;
   }
 
-  .third .first-column > .divider {
+  .third {
     background-image: url("/assets/usage-statistics-assets/home/3.3.svg");
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: auto;
-    position: absolute;
+    background-position: 30% 0;
-    height: 100%;
-    bottom: -10%;
-    right: calc(-12vw - 30px);
-    width: 100%;
   }
 
   .third .second-column {
@@ -70,9 +49,7 @@
     background-size: auto;
     background-repeat: no-repeat;
     background-position: top left;
-    padding-top: 10px;
+    padding: 10px 30px 0 20px;
-    padding-left: 40px;
-    padding-right: 90px;
   }
 
   .third .third-column > div {
@@ -80,6 +57,12 @@
   }
 }
 
+@media only screen and (min-width: 1200px) {
+  .third .third-column {
+    padding: 10px 90px 0 40px;
+  }
+}
+
 
 .features {
   background-image: url("/assets/usage-statistics-assets/home/4.svg");

src/app/home/home.component.html

@@ -29,7 +29,7 @@
         standard SUSHI-Lite APIs.
       </div>
     </div>
-    <div class="uk-grid uk-child-width-1-2@m uk-margin-medium-top uk-padding" uk-grid>
+    <div class="uk-grid uk-child-width-1-2@m uk-margin-top uk-padding" uk-grid uk-height-match="target: li">
       <div>
         <h4 class="uk-text-bold">Providers</h4>
         <ul class="light-blue-triangle uk-margin-top">
@@ -64,7 +64,6 @@
       </div>
       <div>
         <div class="first-column">
-          <div class="divider"></div>
           <h5 class="uk-text-primary">Repository managers, publishers</h5>
           <div class="uk-margin-top">
             Register in OpenAIRE (via PROVIDE), share usage activity from your repository and receive cleaned and combined
@@ -109,7 +108,8 @@
     </div>
   </div>
 </ng-template>
-<fp-slider class="uk-visible@m" [initSlide]="initSlide" topBar="top-bar-background" logoURL="/assets/common-assets/logo-small-usage-counts.png">
+<fp-slider #slider class="uk-visible@m" [hasFooter]="true" [initSlide]="initSlide"
+           footerClass="footer" topBar="top-bar-background" logoURL="/assets/common-assets/logo-small-usage-counts.png">
   <slide>
     <ng-container *ngTemplateOutlet="first"></ng-container>
   </slide>

src/app/home/home.component.ts

@@ -1,6 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {Title} from '@angular/platform-browser';
+import {FullPageSliderComponent} from '../openaireLibrary/utils/full-page-slider/full-page-slider.component';
 
 @Component({
   selector: 'home',
@@ -10,15 +11,29 @@ import {Title} from '@angular/platform-browser';
 export class HomeComponent implements OnInit{
   
   public initSlide: number = 1;
+  public fragments: string[] = ['', 'why', 'who', 'features'];
+  @ViewChild("slider")
+  public slider: FullPageSliderComponent;
   
   constructor(private route: ActivatedRoute,
+              private router: Router,
               private title: Title) {}
   
   ngOnInit() {
     this.title.setTitle('OpenAIRE - UsageCounts');
-    this.route.queryParams.subscribe(params => {
+    this.route.fragment.subscribe(name => {
-      if(params['slide']) {
+      if(name) {
-        this.initSlide = params['slide'];
+        let slide = this.fragments.findIndex(fragment => fragment === name) + 1;
+        if(slide > 0) {
+          this.initSlide = slide;
+        }
+      }
+    });
+    this.slider.stateAsObservable.subscribe(state => {
+      if(state == 1) {
+        this.router.navigate(['/']);
+      } else {
+        this.router.navigate(['/'], {fragment: this.fragments[state - 1]});
       }
     });
   }

src/app/home/home.module.ts

@@ -3,14 +3,16 @@ import {HomeComponent} from './home.component';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {FullPageSliderModule} from '../openaireLibrary/utils/full-page-slider/full-page-slider.module';
+import {BottomModule} from '../openaireLibrary/sharedComponents/bottom.module';
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule.forChild([{
-      path: '', component: HomeComponent
+      path: '', component: HomeComponent,
     }]),
     FullPageSliderModule,
+    BottomModule,
   ],
   declarations: [HomeComponent],
   exports: [HomeComponent]

src/app/resources/resources.component.html

@@ -65,40 +65,42 @@
           CoP Release 4.</a>
       </p>
       <ul class="portal-circle">
-        <li><span class="uk-text-primary">AR-1 - Article Report 1.</span> This report enables you to view the number of successful article download requests by
+        <li><a class="uk-link" [routerLink]="'/sushilite/AR1'">AR-1 - Article Report 1.</a>
+          This report enables you to view the number of successful article download requests by
           month and repository. There are filtering options to limit the results to a selected journal or repository. It
           can provide results for an individual month or over a number of months and can be output in JSON format.
         </li>
-        <li><span class="uk-text-primary">IR-1 - Item Report 1.</span> This report enables you to view the number of successful item download requests by
+        <li><a class="uk-link" [routerLink]="'/sushilite/IR1'">IR-1 - Item Report 1.</a>
+          This report enables you to view the number of successful item download requests by
           month and repository identifier. There are filtering options to limit the results to a selected item or
           repository
           identifier or item data type. It can provide results for an individual month or over a number of months and
           can be output in JSON format.
         </li>
-        <li><span class="uk-text-primary">JR-1 - Journal Report 1.</span> This report enables you to view the number of
+        <li><a class="uk-link" [routerLink]="'/sushilite/JR1'">JR-1 - Journal Report 1.</a>
+          This report enables you to view the number of
           successful full-text article requests by month and journal. There are filtering options to limit the results
           to a selected journal or item data type. It can provide results for an individual month or over a number of
           months and can be output in JSON format.
         </li>
-        <li><span class="uk-text-primary">RR-1 - Repository Report 1.</span> This report enables you to view the
+        <li><a class="uk-link" [routerLink]="'/sushilite/RR1'">RR-1 - Repository Report 1.</a>
+          This report enables you to view the
           number of successful item downloads for all repositories participating in the usage statistics service. There
           are filtering options to limit the results to a repository identifier or selected item type. It can provide
           results for an individual month or over a number of months and can be output in JSON format.
         </li>
-        <li><span class="uk-text-primary">BR-1 - Book Report 1.</span> This report enables you to view the number of successful book title requests by month and title.
+        <li><a class="uk-link" [routerLink]="'/sushilite/BR1'">BR-1 - Book Report 1.</a>
+          This report enables you to view the number of successful book title requests by month and title.
           There are filtering options to limit the results to a repository identifier or selected item identifier. It
           can provide results for an individual month or over a number of months and can be output in JSON format.
         </li>
-        <li><span class="uk-text-primary">BR-2 - Book Report 2.</span> This report enables you to download the number of successful book section requests by month
+        <li><a class="uk-link" [routerLink]="'/sushilite/BR2'">BR-2 - Book Report 2.</a>
+          This report enables you to download the number of successful book section requests by month
           and title. There are filtering options to limit the results to a repository identifier or selected item
           identifier. It can provide results for an individual month or over a number of months and can be output in
           JSON format.
         </li>
       </ul>
-      <div class="uk-margin-top">
-        <span class="uk-text-bold">To download a report please visit - </span>
-        <a class="uk-link" href="http://services.openaire.eu/usagestats/sushilite/" target="_blank">http://services.openaire.eu/usagestats/sushilite/</a>
-      </div>
     </div>
   </div>
   <div class="uk-container uk-section">

src/app/resources/resources.component.ts

@@ -9,17 +9,11 @@ import {ActivatedRoute} from '@angular/router';
 })
 export class ResourcesComponent implements OnInit{
 
-  constructor(private title: Title,
+  constructor(private title: Title) {
-              private route: ActivatedRoute) {
   }
   
   ngOnInit() {
     this.title.setTitle('OpenAIRE - UsageCounts | Resources');
-    this.route.params.subscribe(params => {
-      if(params && params['section']) {
-        this.goTo(params['section']);
-      }
-    });
   }
   
   goTo(id: string) {

src/app/services/layout.service.ts

@@ -0,0 +1,33 @@
+import {Injectable} from '@angular/core';
+import {ActivationStart, Router} from '@angular/router';
+import {BehaviorSubject, Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LayoutService {
+  
+  private isHomeSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  
+  constructor(private router: Router) {
+    this.router.events.subscribe(event => {
+      if (event instanceof ActivationStart) {
+        let data = event.snapshot.data;
+        if (data['isHome'] == undefined ||
+          data['isHome'] === false) {
+          this.setIsHome(false);
+        } else {
+          this.setIsHome(true);
+        }
+      }
+    });
+  }
+  
+  public setIsHome(isHome: boolean) {
+    this.isHomeSubject.next(isHome);
+  }
+  
+  public get isHome(): Observable<boolean> {
+    return this.isHomeSubject.asObservable();
+  }
+}

src/app/sushilite/sushilite.component.css

@@ -0,0 +1,9 @@
+.card {
+  background: #FFFFFF 0 0 no-repeat padding-box;
+  box-shadow: 0 3px 6px #00000029;
+  border-radius: 4px;
+  text-align: center;
+  position: relative;
+  padding: 30px 40px;
+  height: calc(100vh - 300px);
+}

src/app/sushilite/sushilite.component.html

@@ -0,0 +1,6 @@
+<div class="uk-container uk-section uk-section-small">
+  <h2 class="uk-text-bold uk-text-primary">{{reportTitle}}</h2>
+  <div class="card">
+    <i-frame [url]="url" [height]="100" [unit]="'%'"></i-frame>
+  </div>
+</div>

src/app/sushilite/sushilite.component.ts

@@ -0,0 +1,34 @@
+import {Component, HostListener, OnInit} from '@angular/core';
+import {Title} from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
+import {properties} from '../../environments/environment';
+
+@Component({
+  selector: 'sushilite',
+  templateUrl: 'sushilite.component.html',
+  styleUrls: ['sushilite.component.css'],
+})
+export class SushiliteComponent implements OnInit{
+
+  public url: string;
+  public reportTitle: string;
+  public screenHeight: number;
+  
+  constructor(private title: Title,
+              private route: ActivatedRoute) {
+    this.getScreenSize();
+  }
+  
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.reportTitle = params['id'] + ' Report';
+      this.title.setTitle('OpenAIRE - UsageCounts | ' + this.reportTitle);
+      this.url = properties.sushiliteURL + params['id'];
+    });
+  }
+  
+  @HostListener('window:resize', ['$event'])
+  getScreenSize(event?) {
+    this.screenHeight = window.innerHeight - 100;
+  }
+}

src/app/sushilite/sushilite.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+
+import {SushiliteComponent} from "./sushilite.component";
+import {IFrameModule} from '../openaireLibrary/utils/iframe.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{
+      path: '', component: SushiliteComponent
+    }]),
+    IFrameModule
+  ],
+  declarations: [SushiliteComponent],
+  exports: [SushiliteComponent]
+})
+export class SushiliteModule {
+
+}

src/assets/usage-statistics-assets/home/3.3.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="383.074" height="414.36" viewBox="0 0 383.074 414.36">
+<svg xmlns="http://www.w3.org/2000/svg" width="303.074" height="414.36" viewBox="50 0 303.074 414.36">
   <path id="Path_17201" data-name="Path 17201" d="M362.8,324.149l-68.082-60.833L224.75,200.794,103.874,92.822,70.062,62.581,0,0" transform="matrix(0.174, 0.985, -0.985, 0.174, 319.65, 0.393)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1" opacity="0.5"/>
 </svg>

src/environments/environment.beta.ts

@@ -12,5 +12,6 @@ export let properties: EnvProperties = {
   cacheUrl: "https://demo.openaire.eu/cache/get?url=",
   adminToolsAPIURL: "https://beta.services.openaire.eu/uoa-admin-tools/",
   reCaptchaSiteKey: "6LezhVIUAAAAAOb4nHDd87sckLhMXFDcHuKyS76P",
-  admins: ["rcd-helpdesk@openaire.eu"]
+  admins: ["rcd-helpdesk@openaire.eu"],
+  sushiliteURL: 'http://services.openaire.eu/usagestats/sushilite/'
 };

src/environments/environment.prod.ts

@@ -12,5 +12,6 @@ export let properties: EnvProperties = {
   cacheUrl:"https://explore.openaire.eu/cache/get?url=",
   adminToolsAPIURL:"https://services.openaire.eu/uoa-admin-tools/",
   reCaptchaSiteKey: "6LezhVIUAAAAAOb4nHDd87sckLhMXFDcHuKyS76P",
-  admins: ["rcd-helpdesk@openaire.eu"]
+  admins: ["rcd-helpdesk@openaire.eu"],
+  sushiliteURL: 'http://services.openaire.eu/usagestats/sushilite/'
 };

src/environments/environment.ts

@@ -17,5 +17,6 @@ export let properties: EnvProperties = {
   cacheUrl: "http://mpagasas.di.uoa.gr:3200/get?url=",
   adminToolsAPIURL: 'http://duffy.di.uoa.gr:8080/uoa-admin-tools/',
   reCaptchaSiteKey: '6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu',
-  admins: ['kostis30fylloy@gmail.com']
+  admins: ['kostis30fylloy@gmail.com'],
+  sushiliteURL: 'http://scoobydoo.di.uoa.gr/static/sushilite/'
 };

src/styles.css

@@ -154,3 +154,83 @@ contact .uk-text-danger {
   color: #B50000 !important;
   font-size: 12px;
 }
+
+.footer,
+.footer .uk-section-primary {
+  background-color: #ffffff;
+  color: #000000 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 400!important;
+}
+
+.footer svg .stroke_line {
+  stroke: #000000 !important;
+}
+
+.footer svg .fill_text {
+  fill: #000000 !important;
+}
+
+.footer .uk-h6:not(.ignoreFooter),
+.footer .uk-h5:not(.ignoreFooter),
+.footer .uk-h4:not(.ignoreFooter),
+.footer .uk-h3:not(.ignoreFooter),
+.footer .uk-h2:not(.ignoreFooter),
+.footer .uk-h1:not(.ignoreFooter) {
+  color: #000000 !important;
+}
+
+.footer .uk-link:not(.ignoreFooter),
+.footer a:not(.uk-button):not(.uk-button-text):not(.ignoreFooter) {
+  color: #000000 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 14px !important;
+}
+
+.footer .uk-icon-button {
+  border-color: rgba(0, 0, 0, 0.5);
+}
+
+.footer .uk-totop {
+  background-color: #ffffff;
+}
+
+.footer .uk-totop svg {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.footer .uk-totop:hover svg {
+  color: black;
+}
+
+.footer .uk-link:not(.ignoreFooter):hover,
+.footer a:not(.uk-button):not(.uk-button-text):not(.ignoreFooter):hover {
+  color: #000000 !important;
+}
+
+
+.footer .uk-label:not(.ignoreFooter) a {
+  border-color: #000000;
+  border-bottom: 1px solid;
+}
+
+.footer .uk-label:not(.ignoreFooter) a:hover {
+  border-color: rgba(0, 0, 0, 0.5);
+}
+
+
+.footer .uk-button:not(.ignoreFooter) {
+  background-color: #ffffff !important;
+  color: black !important;
+  border-color: #ffffff !important;
+  border-style: solid !important;
+  border-width: 1px !important;
+}
+
+.footer .uk-button:not(.ignoreFooter):hover {
+  background-color: #eeeeee !important;
+  /*color: var(--portal-main-color) !important;*/
+  color: black !important;
+  border-color: #eeeeee !important;
+}