2024-01-09 11:15:27 +01:00
|
|
|
@import (reference) "~src/assets/extend-theme/less/_import-variables.less";
|
2024-03-19 11:57:09 +01:00
|
|
|
@import (reference) "~src/assets/openaire-theme/less/mixin.less";
|
2024-01-09 11:15:27 +01:00
|
|
|
|
|
|
|
@training-color: #A8B9FF;
|
|
|
|
@webinar-color: #E0C44F;
|
|
|
|
|
2024-03-19 11:57:09 +01:00
|
|
|
.graphics {
|
|
|
|
grid-gap: 40px;
|
|
|
|
|
|
|
|
.graphic {
|
|
|
|
max-width: 213px;
|
|
|
|
|
|
|
|
&.graphic1 {
|
|
|
|
transform: translateY(60%);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.graphic2 {
|
|
|
|
transform: translateY(45%);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.graphic3 {
|
|
|
|
transform: translateY(25%);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.graphic4 {
|
|
|
|
transform: translateY(45%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.card {
|
|
|
|
height: 325px;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: center;
|
|
|
|
|
|
|
|
&.webinar {
|
|
|
|
background-image: url("~/src/assets/irish-assets/resources/resources-green.png");
|
|
|
|
}
|
|
|
|
|
|
|
|
&.training {
|
|
|
|
background-image: url("~/src/assets/irish-assets/resources/resources-pink-blue.png");
|
|
|
|
}
|
|
|
|
|
|
|
|
.info {
|
|
|
|
height: 50%;
|
|
|
|
.set-blur-background(@dark-color, 50%, brightness(0.5) blur(20px));
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
.info {
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2024-01-09 11:15:27 +01:00
|
|
|
.uk-label.training {
|
|
|
|
background-color: @training-color;
|
|
|
|
border-color: @training-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
.uk-label.webinar {
|
|
|
|
background-color: @webinar-color;
|
|
|
|
border-color: @webinar-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
.uk-label.funder {
|
|
|
|
background-color: @funder-color;
|
|
|
|
border-color: @funder-color;
|
|
|
|
color: @global-inverse-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
.uk-label.organization {
|
|
|
|
background-color: @organization-color;
|
|
|
|
border-color: @organization-color;
|
|
|
|
color: @global-inverse-color;
|
|
|
|
}
|