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-border: @global-primary-gradient;
@general-number-card-height: 100px; @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 { main {
min-height: calc(100vh - var(--header-height)); min-height: calc(100vh - var(--header-height));
} }
@ -53,6 +56,14 @@ main {
white-space: nowrap !important; 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 */
.number { .number {
line-height: 1.25; line-height: 1.25;

38
less/landing.less
View File

@ -45,11 +45,18 @@
@landing-download-from-border-width: @global-border-width; @landing-download-from-border-width: @global-border-width;
@landing-download-from-border: @global-border; @landing-download-from-border: @global-border;
@landing-download-from-border-radius: @global-border-radius; @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-radius: @global-border-radius;
@landing-card-tab-border-width: 5px; @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 {
#landing-center-content { #landing-center-content {
@ -174,9 +181,9 @@
} }
.landing-action-bar { .landing-action-bar {
padding: 10px 30px; padding: @landing-action-bar-padding;
border-radius: @landing-action-bar-border-radius; 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 { .landing-action-button-orcid {
icon { icon {
color: @landing-action-button-orcid-color; color: @landing-action-button-orcid-color;
@ -192,9 +199,10 @@
.landing-action-bar-divider { .landing-action-bar-divider {
background: @disable-color; background: @disable-color;
width: 1px; width: @landing-action-bar-divider-width;
} }
// TODO: when we get there
.landing-action-bar-mobile { .landing-action-bar-mobile {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -203,32 +211,42 @@
z-index: @global-z-index - 20; z-index: @global-z-index - 20;
& > div { & > div {
padding: 10px 20px; padding: 10px 20px;
border-top: 1px solid lightgrey; border-top: @landing-action-bar-border-width solid lightgrey;
} }
} }
// ----------------------
.download-drop { .download-drop {
width: unset; width: unset;
.download-drop-item { .download-drop-item {
padding: 10px 20px; padding: 10px 20px;
margin: 0 4px; margin: 0 4px;
border-radius: 6px; border-radius: @landing-download-from-border-radius;
&:hover { &:hover {
background: #E9F2FD; background: @landing-download-from-background-color;
} }
} }
} }
.landing-metrics-overview { .landing-metrics-overview {
grid-gap: 80px; grid-gap: @landing-metrics-grip-gap;
} }
.landing-metrics-card {
.metrics-background { min-width: @landing-metrics-card-width;
background-image: url("../metrics-bg.svg"); background-image: url("../metrics-bg.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; 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 // rules for overriding styles of altmetrics embedded library
.altmetric-embed { .altmetric-embed {
position: relative !important; position: relative !important;