MaDgIK
/
openaire-assets
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add new css rules for landing and new gradient patterns

This commit is contained in:
Alex Martzios 2023-02-13 15:49:36 +02:00
parent 43aa38eacd
commit eb70ad415d
2 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
less/general.less
View File

@ -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;

40
less/landing.less
View File

@ -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;