From eb70ad415dab13916591c15fb510a1a5dafdd6dd Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Mon, 13 Feb 2023 15:49:36 +0200
Subject: [PATCH] add new css rules for landing and new gradient patterns

---
 less/general.less | 11 +++++++++++
 less/landing.less | 40 +++++++++++++++++++++++++++++-----------
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/less/general.less b/less/general.less
index 793ced9..f2ad901 100644
--- a/less/general.less
+++ b/less/general.less
@@ -24,6 +24,9 @@
 @general-number-card-border: @global-primary-gradient;
 @general-number-card-height: 100px;
 
+@usage-counts-icon-gradient: linear-gradient(127deg, @usage-counts-orange-color 0%, @usage-counts-blue-color 100%);
+@usage-counts-number-gradient: linear-gradient(122deg, @primary-light-color 0%, @primary-dark-color 100%);
+
 main {
   min-height: calc(100vh - var(--header-height));
 }
@@ -53,6 +56,14 @@ main {
   white-space: nowrap !important;
 }
 
+/* UsageCounts gradient color */
+.text-usage-counts:extend(.uk-text-background) {
+	background-image: @usage-counts-icon-gradient;
+}
+.metrics-number:extend(.uk-text-background) {
+	background-image: @usage-counts-number-gradient;
+}
+
 /* Number */
 .number {
   line-height: 1.25;
diff --git a/less/landing.less b/less/landing.less
index 58e49ef..77642ba 100644
--- a/less/landing.less
+++ b/less/landing.less
@@ -45,11 +45,18 @@
 @landing-download-from-border-width: @global-border-width;
 @landing-download-from-border: @global-border;
 @landing-download-from-border-radius: @global-border-radius;
+@landing-download-from-background-color: @ciel-color;
 
 @landing-card-tab-border-radius: @global-border-radius;
 @landing-card-tab-border-width: 5px;
 
-@landing-action-bar-border-radius: 4px;
+@landing-action-bar-padding: 10px 30px;
+@landing-action-bar-border-width: @global-border-width;
+@landing-action-bar-border-radius: @global-small-border-radius;
+@landing-action-bar-divider-width: @global-border-width;
+
+@landing-metrics-grip-gap: 80px;
+@landing-metrics-card-width: 380px;
 
 .landing {
 	#landing-center-content {
@@ -174,9 +181,9 @@
   }
 
 	.landing-action-bar {
-		padding: 10px 30px;
+		padding: @landing-action-bar-padding;
 		border-radius: @landing-action-bar-border-radius;
-		border: @landing-portal-color solid 1px;
+		border: @landing-portal-color solid @landing-action-bar-border-width;
 		.landing-action-button-orcid {
 			icon {
 				color: @landing-action-button-orcid-color;
@@ -192,9 +199,10 @@
 
 	.landing-action-bar-divider {
 		background: @disable-color;
-		width: 1px;
+		width: @landing-action-bar-divider-width;
 	}
 
+	// TODO: when we get there
 	.landing-action-bar-mobile {
 		position: fixed;
 		bottom: 0;
@@ -203,32 +211,42 @@
 		z-index: @global-z-index - 20;
 		& > div {
 			padding: 10px 20px;
-			border-top: 1px solid lightgrey;
+			border-top: @landing-action-bar-border-width solid lightgrey;
 		}
 	}
+	// ----------------------
 
 	.download-drop {
 		width: unset;
 		.download-drop-item {
 			padding: 10px 20px;
 			margin: 0 4px;
-			border-radius: 6px;
+			border-radius: @landing-download-from-border-radius;
 			&:hover {
-				background: #E9F2FD;
+				background: @landing-download-from-background-color;
 			}
 		}
 	}
 
 	.landing-metrics-overview {
-		grid-gap: 80px;
+		grid-gap: @landing-metrics-grip-gap;
 	}
-
-	.metrics-background {
+	.landing-metrics-card {
+		min-width: @landing-metrics-card-width;
 		background-image: url("../metrics-bg.svg");
-    background-repeat: no-repeat;
+		background-repeat: no-repeat;
 		background-size: cover;
 	}
 
+	// To be moved? 
+	.open-access {
+		color: @open-access-color;
+	}
+	.bip-icon {
+		color: @bip-color;
+	}
+
+
 	// rules for overriding styles of altmetrics embedded library
 	.altmetric-embed {
 		position: relative !important;