Change from css to less

angular.json

@@ -46,13 +46,14 @@
               "src/robots.txt"
             ],
             "styles": [
-              "src/styles.css",
+              "src/styles.less",
               "src/material.scss"
             ],
             "scripts": [
-              "src/assets/openaire-theme/js/uikit.min.js",
+              "node_modules/uikit/dist/js/uikit.min.js",
-              "src/assets/openaire-theme/js/uikit-icons.min.js",
+              "node_modules/uikit/dist/js/uikit-icons.min.js",
-              "node_modules/jquery/dist/jquery.js"
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/less/dist/less.min.js"
             ]
           },
           "configurations": {
@@ -170,7 +171,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.css"
+              "src/styles.less"
             ],
             "scripts": [],
             "assets": [

package.json

@@ -43,6 +43,7 @@
     "rxjs": "^6.5.1",
     "ts-md5": "^1.2.0",
     "tslib": "^2.0.0",
+    "uikit": "^3.12.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
@@ -51,11 +52,11 @@
     "@angular/compiler-cli": "~11.2.14",
     "@angular/language-service": "~11.2.14",
     "@nguniversal/builders": "^11.2.1",
-    "@types/express": "^4.17.0",
     "@types/compression": "^1.7.0",
-    "@types/node": "^12.11.1",
+    "@types/express": "^4.17.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.8.0",
     "jasmine-spec-reporter": "~5.0.0",

src/app/app.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="loading">
   <loading [full]="true"></loading>
 </div>
-<div *ngIf="!loading">
+<div *ngIf="!loading" [class.stakeholderPage]="isFrontPage">
   <div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
        [class.sidebar_mini]="!open && hasSidebar && (!hasAdminMenu || hasAdminMenu && adminMenuItems?.length > 0)">
     <navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"

src/app/develop/develop.component.ts

@@ -20,14 +20,14 @@ import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties"
 				<div class="uk-section uk-container uk-container-large">
 					<div class="uk-grid uk-grid-large uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
 						<div class="uk-text-center uk-margin-large-top">
-							<div class="uk-icon-bg-shadow uk-icon-bg-shadow-large uk-margin-auto uk-text-background">
+							<div class="uk-icon-bg-shadow uk-icon-bg-shadow-large uk-margin-auto">
-								<icon name="description" [flex]="true" ratio="2.5" type="outlined" visuallyHidden="For {{openaireEntities.RESULTS}}"></icon>
+								<icon name="description" customClass="uk-text-background" [flex]="true" ratio="2.5" type="outlined" visuallyHidden="For {{openaireEntities.RESULTS}}"></icon>
 							</div>
 							<h3>For {{openaireEntities.RESULTS | lowercase}}</h3>
 							<div class="uk-margin-bottom">
 								For {{openaireEntities.RESULTS | lowercase}} ({{openaireEntities.PUBLICATIONS | lowercase}}, {{openaireEntities.DATASETS | lowercase}}, {{openaireEntities.SOFTWARE | lowercase}} and {{openaireEntities.OTHER | lowercase}}) you can use the Selective Access APIs by adding the funder parameter.
 							</div>
-							<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
+							<a class="uk-display-inline-block uk-button uk-button-text"
 									href="https://graph.openaire.eu/develop/api.html" target="_blank">
 								<span class="uk-flex uk-flex-middle">
 									<span>Selective Access APIs</span>
@@ -38,21 +38,21 @@ import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties"
 							<img src="assets/apis.svg" alt="">
 						</div>
 						<div class="uk-text-center uk-margin-large-top">
-							<div class="uk-icon-bg-shadow uk-icon-bg-shadow-large uk-margin-auto uk-text-background">
+							<div class="uk-icon-bg-shadow uk-icon-bg-shadow-large uk-margin-auto">
-								<icon name="content_paste" [flex]="true" ratio="2.5" type="outlined" visuallyHidden="For {{openaireEntities.PROJECTS}}"></icon>
+								<icon name="content_paste" customClass="uk-text-background" [flex]="true" ratio="2.5" type="outlined" visuallyHidden="For {{openaireEntities.PROJECTS}}"></icon>
 							</div>
 							<h3>For {{openaireEntities.PROJECTS | lowercase}}</h3>
 							<div class="uk-margin-bottom">
 								For {{openaireEntities.PROJECTS | lowercase}} you can use the Selective Access APIs and the Bulk Access APIs.
 							</div>
 							<div class="uk-flex uk-flex-column uk-flex-center uk-flex-middle">
-								<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-bottom"
+								<a class="uk-display-inline-block uk-button uk-button-text uk-margin-bottom"
 									href="https://graph.openaire.eu/develop/api.html" target="_blank">
 									<span class="uk-flex uk-flex-middle">
 										<span>Selective Access APIs</span>
 									</span>
 								</a>
-								<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
+								<a class="uk-display-inline-block uk-button uk-button-text"
 									href="https://graph.openaire.eu/develop/bulk-projects.html" target="_blank">
 									<span class="uk-flex uk-flex-middle">
 										<span>Bulk Access APIs</span>
@@ -66,7 +66,7 @@ import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties"
 					<div class="uk-grid uk-grid-large uk-child-width-1-2@m uk-child-width-1-1" uk-grid>
 						<div>
 							<div>Request examples for {{openaireEntities.RESULTS | lowercase}}:</div>
-							<ul class="uk-list uk-list-large uk-list-disc">
+							<ul class="uk-list uk-list-large uk-list-bullet uk-list-primary">
 								<li>
 									<span class="uk-text-bold">Access “{{openaireEntities.PUBLICATIONS}}”</span><br>
 									<span class="uk-text-bold uk-margin-small-right">GET</span>
@@ -96,7 +96,7 @@ import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties"
 						</div>
 						<div>
 							<div>Request examples for {{openaireEntities.PROJECTS | lowercase}}:</div>
-							<ul class="uk-list uk-list-large uk-list-disc">
+							<ul class="uk-list uk-list-large uk-list-bullet uk-list-primary">
 							<li>
 								<span class="uk-text-bold">For the “Selective Access”</span><br>
 								<span class="uk-text-break">https://api.openaire.eu/search/projects?funder={{stakeholder.index_shortName}}</span>

src/app/general/edit-stakeholder/edit-stakeholder.component.ts

@@ -49,7 +49,7 @@ declare var UIkit;
 					<div class="uk-width-1-1">
 						<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
             <div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-grid uk-grid-column-large" uk-grid>
-              <div class="uk-margin-small-top uk-width-auto@l uk-width-1-1">
+              <div class="uk-margin-top uk-width-auto@l uk-width-1-1">
                 <div class="uk-grid uk-grid-column-large uk-flex-middle" uk-grid>
                   <div class="uk-width-auto@l uk-width-1-1 uk-flex uk-flex-center">
                     <button class="uk-button uk-button-primary uk-flex uk-flex-middle uk-flex-wrap"
@@ -102,7 +102,7 @@ declare var UIkit;
 					</ng-container>
         </div>
       </form>
-      <div #notify notify-form class="uk-width-1-1 uk-margin-large-top uk-margin-medium-bottom"></div>
+      <div #notify [class.uk-hidden]="!stakeholderFb" notify-form class="uk-width-1-1 uk-margin-large-top uk-margin-medium-bottom"></div>
   `,
   styleUrls: ['edit-stakeholder.component.css']
 })

src/app/methodology/methodology.component.ts

@@ -34,7 +34,7 @@ import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields
                   <dt class="uk-width-1-5@m uk-width-1-1 uk-text-primary">{{openaireEntities.RESULTS}}</dt>
                   <dd class="uk-width-expand">
                     <div>There are currently four different types of {{openaireEntities.RESULTS | lowercase}} in the OpenAIRE Research <br> Graph:</div>
-                    <ul class="uk-list uk-list-disc">
+                    <ul class="uk-list uk-list-bullet uk-list-primary">
                       <li>{{openaireEntities.PUBLICATIONS}}</li>
                       <li>{{openaireEntities.DATASETS}}</li>
                       <li>{{openaireEntities.SOFTWARE}}</li>

src/app/monitor/monitor.component.html

@@ -192,7 +192,7 @@
                     </div>
                     <div *ngIf="indicator.description || indicator.additionalDescription"
                          class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom">
-                      <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
+                      <a class="uk-display-inline-block uk-button uk-button-text"
                          (click)="toggleDescriptionOverlay($event, j)">
 												<span class="uk-flex uk-flex-middle">
 													<icon name="analytics" type="outlined" [flex]="true"></icon>

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit ed7e66852a64babc4e48573ed52b6ba114a2ea84
+Subproject commit 4ed89bac13a6f5fc0b8f2deecf486d6926d87a81

src/app/topic/indicators.component.css

@@ -50,28 +50,6 @@
   color: currentColor;
 }
 
-
+.section:hover .tools a:hover {
-/* New section*/
+  text-decoration: none;
-.new-section {
-  border: #707070 dashed 1px;
-  border-radius: 2px;
-  background-color: white;
-  min-height: 200px;
-  position: relative;
-  box-shadow: 0 2px 6px #00000038;
-}
-
-.new-section .tools {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.new-section .tools .md-btn .material-icons {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0;
 }

src/app/topic/indicators.component.html

@@ -7,10 +7,10 @@
           <div class="tools">
             <div class="actions uk-flex uk-flex-middle">
               <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
-                 title="Create a new section">
+                 uk-tooltip="Create a new section">
                 <icon name="add" [flex]="true"></icon>
               </a>
-              <a [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
+              <a [attr.uk-tooltip]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
                  (click)="deleteSectionOpen(number, i, 'number', 'delete')">
                 <icon name="close" [flex]="true"></icon>
               </a>
@@ -461,8 +461,8 @@
 <ng-template #new_section let-type="type">
   <div class="section">
     <div class="uk-flex uk-flex-center" (click)="createSection(-1, type)">
-      <button class="uk-button uk-button-primary uk-flex uk-flex-middle uk-text-uppercase">
+      <button class="uk-button uk-button-primary uk-flex uk-flex-middle">
-        <icon name="add" [ratio]="1.5" [flex]="true"></icon>
+        <icon name="add" [flex]="true"></icon>
         <span class="uk-margin-small-left">New section</span>
       </button>
     </div>

src/app/topic/topic.component.html

@@ -1,7 +1,7 @@
 <aside *ngIf="stakeholder" id="sidebar_main">
   <div id="sidebar_content">
     <div class="menu_section uk-margin-top">
-      <ul class="uk-list uk-nav-parent-icon uk-nav" uk-nav>
+      <ul class="uk-list uk-nav uk-nav-default" uk-nav>
         <li>
           <a [routerLink]="'/admin/' + stakeholder.alias">
             <div class="uk-flex uk-flex-middle uk-flex-center">
@@ -16,7 +16,7 @@
     </div>
     <div class="menu_section uk-margin-large-top">
       <div *ngIf="stakeholder.topics[topicIndex]" class="active" [style]="'--index: ' + topicIndex + '; --size: ' + (stakeholder.topics[topicIndex].icon?'40px':0)"></div>
-      <ul class="uk-list uk-nav-parent-icon uk-nav" uk-nav>
+      <ul class="uk-list uk-nav uk-nav-default" uk-nav>
         <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
           <li class="uk-visible-toggle" [class.uk-active]="topicIndex == i">
             <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit 2b7e2d4cc0de56fc6a5868e15c5209b4e27c058d
+Subproject commit f454570d5ce2f1b6fa17b84a5d2d0c65b30f96ff

src/assets/dashboard-theme

@@ -1 +1 @@
-Subproject commit 5d7edb030d589492011316208ee45a1d2c54e764
+Subproject commit 8c3756677b172aea716453685e1cc88e3bb514be

src/assets/monitor-dashboard-custom.css

@@ -1,289 +0,0 @@
-.stakeholderPage {
-  /* Structure */
-  --structure-page-content-background-color: #F3F3F3;
-  --structure-page-content-background-color-rgb: 243, 243, 243;
-
-  /* Navbar */
-  --navbar-background-image: url("~src/assets/banner.jpg");
-  --navbar-color: var(--muted-color);
-  --navbar-color-hover: var(--light-color);
-  --navbar-color-active: var(--light-color);
-  --navbar-decoration-active: underline;
-
-  /* Login */
-  --login-background-color: var(--light-color);
-  --login-background-color-hover: var(--light-color);
-  --login-color: var(--primary-color);
-  --login-color-hover: var(--secondary-color);
-
-  /* Dashboard */
-  --dashboard-primary-color: var(--monitor-color);
-  --dashboard-primary-color-rgb: var(--monitor-color-rgb);
-  --dashboard-primary-image: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
-  --dashboard-primary-inverse-color: var(--light-color);
-
-  /* Backgrounds */
-  --background-primary-rgb: var(--monitor-color-rgb);
-
-  /* Buttons */
-  --button-primary-background: var(--monitor-color);
-  --button-primary-background-image: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
-  --button-secondary-background: var(--light-color);
-  --button-secondary-color: var(--monitor-color);
-  --button-secondary-border-color: var(--monitor-color);
-  --button-secondary-background-hover: var(--secondary-color);
-  --button-secondary-background-image-hover: none;
-  --button-secondary-color-hover: var(--light-color);
-  --button-secondary-border-color-hover: transparent;
-
-  /* Fonts */
-  --text-primary-color: var(--monitor-color);
-  --text-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
-
-  /** Label */
-  --label-secondary: var(--monitor-color);
-
-  /* List */
-  --list-disc-color: var(--monitor-color);
-
-  /* Pills */
-  --pill-alt-background-active-image: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
-
-  /* Search */
-  --search-form-background: var(--structure-page-content-background-color);
-}
-
-.stakeholderPage #filters_icon .start {
-  stop-color: var(--monitor-light-color)
-}
-
-.stakeholderPage #filters_icon .end {
-  stop-color: var(--monitor-dark-color)
-}
-
-/*TODO check to change in theme*/
-
-iframe.uk-height-medium {
-  height: 320px;
-}
-
-#print_toggle {
-  top: 320px !important;
-}
-
-/*}*/
-/*!*Stakeholder Specific*!*/
-/*.publicationsSearchForm {*/
-/*  background-image: none;*/
-/*}*/
-
-/*.stakeholderPage #page_content {*/
-/*  background-image: url("~src/assets/monitor-shapes-bg.svg");*/
-/*  background-size: contain;*/
-/*  background-repeat: no-repeat;*/
-/*  background-position: bottom;*/
-/*  background-attachment: fixed;*/
-/*  min-height: calc(70vh - var(--header-height));*/
-/*}*/
-
-/*!*General*!*/
-/*.stakeholderPage {*/
-/*  background: #F9FBFC !important;*/
-/*}*/
-
-/*#style_switcher .uk-offcanvas-bar {*/
-/*  box-sizing: border-box;*/
-/*  padding: 16px;*/
-/*}*/
-
-/*#style_switcher_toggle {*/
-/*  top: 320px !important;*/
-/*  position: fixed;*/
-/*  height: 36px;*/
-/*  !*background: #fff;*!*/
-/*  background-color: rgb(255, 255, 255);*/
-/*  border-radius: 4px 0 0 4px;*/
-/*  cursor: pointer;*/
-/*  padding: 0 8px;*/
-/*  box-shadow: -2px 2px 5px rgba(0, 0, 0, .26);*/
-/*  box-sizing: border-box;*/
-/*  !*z-index: 981;*!*/
-/*}*/
-
-#filters_switcher_toggle {
-  top: 400px !important;
-}
-
-/*!*Sidebar*!*/
-/*!*Style*!*/
-/*!*#sidebar_main .menu_section > ul li.uk-active > a {*!*/
-/*!*    font-size: var(--sidebar-font-size);*!*/
-/*!*    color: rgba(0,0,0,.7);*!*/
-/*!*}*!*/
-/*!*Sidebar Header logo *!*/
-/*#sidebar_main .sidebar_main_header .portal-logo {*/
-/*  background: url("~src/assets/common-assets/logo-large-monitor.png") no-repeat;*/
-/*  background-size: contain;*/
-/*}*/
-
-/*.sidebar_mini #sidebar_main .sidebar_main_header .portal-logo {*/
-/*  background: url("~src/assets/common-assets/logo-small-monitor.png") no-repeat;*/
-/*  background-size: contain;*/
-/*}*/
-
-/*!*Sidebar Rotation*!*/
-
-/*.stakeholderPage #sidebar_main .menu_section > ul > li.uk-active {*/
-/*  width: 150px;*/
-/*  height: 100%;*/
-/*  transition: 0.70s;*/
-/*  -webkit-transition: 0.70s;*/
-/*  -moz-transition: 0.70s;*/
-/*  -ms-transition: 0.70s;*/
-/*  -o-transition: 0.70s;*/
-/*  -webkit-transform: rotate(-90deg);*/
-/*  -moz-transform: rotate(-90deg);*/
-/*  -o-transform: rotate(-90deg);*/
-/*  -ms-transform: rotate(-90deg);*/
-/*  transform: rotate(-90deg);*/
-/*  margin: 63px auto 63px auto;*/
-/*}*/
-
-/*.stakeholderPage #sidebar_main .menu_section > ul > li {*/
-/*  transition: 0.70s;*/
-/*  -webkit-transition: 0.70s;*/
-/*  -moz-transition: 0.70s;*/
-/*  -ms-transition: 0.70s;*/
-/*  -o-transition: 0.70s;*/
-/*  !*display: block;*!*/
-/*  !*text-align: center;*!*/
-/*  !*margin-right: auto;*!*/
-/*  !*margin-left: auto;*!*/
-/*}*/
-
-/*.stakeholderPage.sidebar_mini #sidebar_main .menu_section > ul > li.uk-active {*/
-/*  -webkit-transform: rotate(0deg);*/
-/*  -moz-transform: rotate(0deg);*/
-/*  -o-transform: rotate(0deg);*/
-/*  -ms-transform: rotate(0deg);*/
-/*  transform: rotate(0deg);*/
-/*  width: inherit;*/
-/*  height: inherit;*/
-/*  margin: 4px 0 0;*/
-/*}*/
-
-
-/*.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {*/
-/*  border-color: var(--monitor-portal-color);*/
-/*}*/
-
-/*!* Section Tools*!*/
-
-/*.dashboard .section {*/
-/*  padding-top: 10px;*/
-/*  padding-bottom: 10px;*/
-/*  padding-right: 10px;*/
-/*  border: rgba(0, 0, 0, 0) solid 1px;*/
-/*  position: relative;*/
-/*}*/
-
-/*.dashboard .section .tools {*/
-/*  position: absolute;*/
-/*  top: 0;*/
-/*  left: 50%;*/
-/*  transform: translate(-50%, -100%);*/
-/*  width: 50px;*/
-/*  max-width: 50px;*/
-/*  background: var(--secondary-color);*/
-/*  color: var(--contrast-color);*/
-/*  -webkit-clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);*/
-/*  clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);*/
-/*  display: none;*/
-/*  padding-left: 10px;*/
-/*}*/
-
-/*.dashboard .section {*/
-/*  border: transparent solid 1px;*/
-/*}*/
-
-/*.dashboard .section:hover {*/
-/*  border: var(--secondary-color) solid 1px;*/
-/*}*/
-
-/*.dashboard .section:hover .tools {*/
-/*  display: block;*/
-/*}*/
-
-/*.dashboard .section:hover .tools a {*/
-/*  color: currentColor;*/
-/*}*/
-
-
-/*!* New section*!*/
-/*.dashboard .new-section {*/
-/*  border: #707070 dashed 1px;*/
-/*  border-radius: 2px;*/
-/*  background-color: white;*/
-/*  min-height: 200px;*/
-/*  position: relative;*/
-/*  box-shadow: 0 2px 6px #00000038;*/
-/*}*/
-
-/*.dashboard .new-section .tools {*/
-/*  position: absolute;*/
-/*  top: 50%;*/
-/*  left: 50%;*/
-/*  transform: translate(-50%, -50%);*/
-/*}*/
-
-/*.dashboard .new-section .tools .md-btn .material-icons {*/
-/*  position: absolute;*/
-/*  top: 50%;*/
-/*  left: 50%;*/
-/*  transform: translate(-50%, -50%);*/
-/*  margin: 0;*/
-/*}*/
-
-/*!*Search *!*/
-/*#searchFormPanel {*/
-/*  margin-top: 30px;*/
-/*  height: 250px;*/
-/*}*/
-
-/*.visibility {*/
-/*  border-right: 1px solid rgba(var(--secondary-color-rgb), 0.5);*/
-/*  border-bottom: 1px solid rgba(var(--secondary-color-rgb), 0.5);*/
-/*  padding: 10px 8px;*/
-/*  margin-right: 4px;*/
-/*  color: rgba(var(--text-color-rgb), 0.5);*/
-/*}*/
-
-/*.visibility.small {*/
-/*  padding: 3px 2px;*/
-/*}*/
-
-/*.more {*/
-/*  position: absolute;*/
-/*  transform: translate(-50%, -50%);*/
-/*  right: -30px;*/
-/*  top: 50%;*/
-/*}*/
-
-/*.descriptionIcon {*/
-/*  position: absolute;*/
-/*  bottom: 3px;*/
-/*  left: 3px;*/
-/*}*/
-
-/*.uk-modal-container .uk-modal-dialog {*/
-/*  width: 900px;*/
-/*}*/
-
-/*.stakeholderPage .selectedFilterLabel {*/
-/*  background-color: #E6EEF2;*/
-/*  border-color: #E6EEF2;*/
-/*}*/
-
-/*.landing .uk-dropdown, new-search-page .uk-dropdown, search-all .uk-dropdown {*/
-/*  padding: 25px;*/
-/*}*/

src/assets/monitor-dashboard-custom.less

@@ -0,0 +1,72 @@
+.stakeholderPage {
+  /* Import OpenAIRE theme*/
+  @import (multiple) "~src/assets/openaire-theme/less/_import";
+
+  /** Global */
+  @global-primary-gradient: linear-gradient(110deg, @monitor-light-color 0%, @monitor-dark-color 100%);
+
+  /** Background*/
+  @background-primary-background: @monitor-color;
+
+  /** Buttons */
+  @button-primary-background: @monitor-color;
+  @button-secondary-border: @monitor-color;
+  @button-secondary-color: @monitor-color;
+  @button-secondary-hover-background: @global-secondary-background;
+  @button-secondary-hover-background-gradient: none;
+
+  /** Label */
+  @label-secondary-color: @monitor-color;
+  @label-secondary-border: @monitor-color;
+
+  /** List */
+  @list-primary-color: @monitor-color;
+
+  /* Navbar */
+  @navbar-background-image: url("banner.jpg");
+  @navbar-nav-item-color: @global-muted-background;
+  @navbar-nav-item-hover-color: @global-inverse-color;
+  @navbar-nav-item-active-color: @global-inverse-color;
+  @navbar-nav-item-active-text-decoration: underline;
+
+  /** Text */
+  @text-primary-color: @monitor-color;
+  @text-background-color: @monitor-color;
+
+  & #filters_icon .start {
+    stop-color: @monitor-light-color;
+  }
+
+  &  #filters_icon .end {
+    stop-color: @monitor-dark-color;
+  }
+}
+
+.stakeholderPage {
+  /* Structure */
+  --structure-page-content-background-color: #F3F3F3;
+  --structure-page-content-background-color-rgb: 243, 243, 243;
+
+  /* Login */
+  --login-background-color: var(--light-color);
+  --login-background-color-hover: var(--light-color);
+  --login-color: var(--primary-color);
+  --login-color-hover: var(--secondary-color);
+
+  /* Dashboard */
+  --dashboard-primary-color: var(--monitor-color);
+  --dashboard-primary-color-rgb: var(--monitor-color-rgb);
+  --dashboard-primary-image: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
+  --dashboard-primary-inverse-color: var(--light-color);
+
+  /* Search */
+  --search-form-background: var(--structure-page-content-background-color);
+}
+
+#print_toggle {
+  top: 320px !important;
+}
+
+#filters_switcher_toggle {
+  top: 400px !important;
+}

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit bd15bab85dde4018155a631d9cf6ecdfe98ebe9a
+Subproject commit 5b29aadb4a96cabece70fd76c03a4e7ca0351602

src/styles.css

@@ -1,7 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-@import "assets/openaire-theme/css/import.css";
-@import "assets/common-assets/library.css";
-/*@import "assets/common-assets/common/custom.css";*/
-@import "assets/dashboard-theme/main.css";
-@import "assets/monitor-dashboard-custom.css";
-@import "assets/print.css";

src/styles.less

@@ -0,0 +1,15 @@
+/* You can add global styles to this file, and also import other style files */
+
+/* Import OpenAIRE theme*/
+@import "~src/assets/openaire-theme/less/_import";
+
+//@import "assets/openaire-theme/css/import.css";
+@import "assets/common-assets/library.css";
+@import "assets/dashboard-theme/main.css";
+@import "assets/monitor-dashboard-custom";
+@import "assets/print.css";
+
+/* Deprecated */
+@import "assets/openaire-theme/css/structure/variables.css";
+@import "assets/openaire-theme/css/structure/offcanvas.css";
+@import "assets/openaire-theme/css/openaire.css";