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

Production release May 2024 [EXPLORE] #13

Merged
konstantina.galouni merged 11 commits from develop into master 2024-05-23 18:23:47 +02:00
Conversation 0 Commits 11 Files Changed 12 +178 -18
12 changed files with 178 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
less/_import.less vendored
View File

@ -65,3 +65,5 @@
// Extend
@import "stepper";
@import "banner";

100
less/banner.less Normal file
View File

@ -0,0 +1,100 @@
@banner-background: @ciel-color;
@banner-background-gradient: none;
@banner-footer-background: #000000;
@banner-tab-gutter: 60px;
@banner-tab-margin-vertical: @global-small-margin;
@banner-tab-divider: @global-border-width solid @global-border;
@banner-tab-divider-height: @global-line-height;
@banner-tab-item-color: @global-inverse-color;
@banner-tab-item-hover-color: @global-secondary-background;
@banner-tab-item-hover-decoration: none;
@banner-tab-item-active-color: @banner-tab-item-hover-color;
@banner-tab-item-active-indicator: @global-background;
@banner-tab-button-background: @global-secondary-background;
@banner-tab-button-border-radius: 0;
.uk-banner:extend(.uk-section) {
background: @banner-background;
position: relative;
& .uk-banner-footer:extend(.uk-light all) {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: fade(@banner-footer-background, 50%);
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
-webkit-backdrop-filter: blur(30px) opacity(10%) brightness(90%);
backdrop-filter: blur(30px) opacity(10%) brightness(90%);
}
& .uk-button {
height: 100%;
background: @banner-tab-button-background;
border-radius: @banner-tab-button-border-radius;
&:hover {
background: fade(@banner-tab-button-background, 80%);
}
}
}
& ul.uk-banner-tab:extend(.uk-flex):extend(.uk-margin-top) {
list-style: none;
margin: @banner-tab-margin-vertical 0;
& > li {
&:not(:first-child) {
margin-left: @banner-tab-gutter;
position: relative;
&::before {
content: '';
position: absolute;
left: -1 * (@banner-tab-gutter/2);
transform: translateX(-100%);
border-left: @banner-tab-divider;
height: @banner-tab-divider-height;
}
}
a:extend(.uk-text-truncate) {
text-transform: uppercase;
text-decoration: none;
color: @banner-tab-item-color;
}
&:hover a {
color: @banner-tab-item-hover-color;
text-decoration: @banner-tab-item-hover-decoration;
}
&.uk-active a {
color: @banner-tab-item-active-color;
font-weight: @text-bold-weight;
position: relative;
&:after {
content: '';
position: absolute;
bottom: -@banner-tab-margin-vertical;
left: 50%;
transform: translate(-50%, 50%);
width: 0;
height: 0;
border-left: 2*@banner-tab-margin-vertical solid transparent;
border-right: 2*@banner-tab-margin-vertical solid transparent;
border-bottom: @banner-tab-margin-vertical solid @banner-tab-item-active-indicator;
}
}
}
}
}
.uk-banner.dark {
background: @background-secondary-background;
}

4
less/base.less
View File

@ -37,10 +37,6 @@
@inverse-base-link-hover-color: @global-inverse-color;
.hook-base-misc() {
body {
overflow-y: scroll;
}
@media (min-width: @breakpoint-medium) {

3
less/color.less
View File

@ -45,6 +45,9 @@
@funder-color: #3C9F94;
@ri-color: #D023AE;
@organization-color: #E28B6C;
@publisher-color: #8B6CE2;
@journal-color: #6CE295;
@researcher-color: none;
@country-color: none;
@datasource-color: none;
/* Connect */

18
less/icon.less
View File

@ -3,6 +3,7 @@
@icon-button-xsmall-size: 24px;
@icon-bg-background: @global-background;
@icon-bg-size: @icon-button-size;
@icon-bg-size-small: @icon-button-size*0.5;
@icon-bg-size-medium: @icon-button-size*1.5;
@icon-bg-size-large: @icon-button-size*2;
@ -80,6 +81,23 @@
}
/* Default circle element for SVGs */
.uk-icon-bg {
border-radius: 100px;
width: @icon-bg-size;
height: @icon-bg-size;
display: flex;
align-items: center;
justify-content: center;
background-color: @icon-bg-background;
}
.uk-icon-bg-small {
width: @icon-bg-size-small;
height: @icon-bg-size-small;
}
/**/
/* Default circle element for SVGs with shadow*/
.uk-icon-bg-shadow {
border-radius: 100px;
width: @icon-button-size;

10
less/label.less
View File

@ -67,8 +67,12 @@
}
.uk-label-secondary {
background-color: @label-secondary-background;
color: @label-secondary-color;
border-color: @label-secondary-border;
background-color: @label-secondary-border;
color: @global-inverse-color;
border-color: @label-secondary-background;
.uk-close {
color: @global-inverse-color;
}
}
}

6
less/mixin.less
View File

@ -1,12 +1,12 @@
.set-blur-background(@color: @base-body-background, @opacity: 80%) {
.set-blur-background(@color: @base-body-background, @opacity: 80%, @blur: saturate(180%) blur(20px)) {
&.uk-blur-background, .uk-blur-background {
background: fade(@color, 99%);
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
&.uk-blur-background, .uk-blur-background {
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: @blur;
backdrop-filter: @blur;
background: fade(@color, @opacity) !important;
}
}

6
less/modal.less
View File

@ -46,9 +46,13 @@
& > .uk-dropdown {
z-index: @modal-z-index + 1;
}
& > .uk-drop {
z-index: @modal-z-index + 1;
}
}
.uk-modal, .uk-dropdown {
.uk-modal, .uk-dropdown, .uk-drop {
.uk-button, uk-icon-button {
box-shadow: none !important;

10
less/progress.less
View File

@ -15,9 +15,11 @@
@progress-circle-background-open-access: conic-gradient(@progress-bar-background-open-access calc(var(--percentage) * 1%), @progress-background-open-access 0);
@progress-semicircle-size: 120px;
@progress-semicircle-size-small: 80px;
@progress-semicircle-color: @global-primary-background;
@progress-semicircle-text-font-weight: @text-bold-weight;
@progress-semicircle-text-font-size: @global-large-font-size;
@progress-semicircle-text-font-size-small: @global-font-size;
@progress-semicircle-background: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background calc(var(--percentage) * 1% / 2), @progress-background calc(var(--percentage) * 1% / 2 + 0.1%));
@progress-semicircle-background-open-access: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background-open-access calc(var(--percentage) * 1% / 2), @progress-background-open-access calc(var(--percentage) * 1% / 2 + 0.1%));
@ -110,6 +112,14 @@
}
}
}
.uk-progress-semicircle-small[percentage] {
width: @progress-semicircle-size-small;
&::after {
font-size: @progress-semicircle-text-font-size-small;
}
}
}
@inverse-progress-background: @inverse-global-color;

30
less/subnav.less
View File

@ -1,10 +1,14 @@
@subnav-item-font-size: @global-small-font-size;
@subnav-item-font-size-small: @global-xsmall-font-size;
@subnav-item-line-height: 17px;
@subnav-item-font-weight: 400;
@subnav-item-max-width: @width-medium-width;
/* Pills */
@subnav-pill-item-padding-vertical: 10px;
@subnav-pill-item-padding-horizontal: 20px;
@subnav-pill-item-padding-vertical-small: (@subnav-pill-item-padding-vertical / 2);
@subnav-pill-item-padding-horizontal-small: (@subnav-pill-item-padding-horizontal / 2);
@subnav-pill-item-border-radius: 60px;
@subnav-pill-item-background: transparent;
@subnav-pill-item-color: @global-primary-background;
@ -21,7 +25,9 @@
/* Pills alt*/
@subnav-pill-alt-item-padding-vertical: 10px;
@subnav-pill-alt-item-padding-horizontal: 20px;
@subnav-pill-alt-item-border-radius: 24px;
@subnav-pill-alt-item-padding-vertical-small: (@subnav-pill-alt-item-padding-vertical / 2);
@subnav-pill-alt-item-padding-horizontal-small: (@subnav-pill-alt-item-padding-horizontal / 2);
@subnav-pill-alt-item-border-radius: @global-xlarge-border-radius;
@subnav-pill-alt-item-color: @global-color;
@subnav-pill-alt-item-hover-color: @global-secondary-background;
@subnav-pill-alt-item-active-font-weight: 600;
@ -34,6 +40,9 @@
font-size: @subnav-item-font-size;
font-weight: @subnav-item-font-weight;
line-height: @subnav-item-line-height;
max-width: @subnav-item-max-width;
& > *:extend(.uk-text-truncate) {}
}
.hook-subnav-pill-item() {
@ -72,13 +81,20 @@
background-image: @subnav-pill-alt-item-active-background-gradient;
}
}
}
/* Inverse */
@inverse-subnav-pill-alt-box-shadow: @inverse-global-large-box-shadow;
.uk-subnav.uk-subnav-pill.uk-subnav-small {
.hook-inverse-misc() {
.uk-subnav.uk-subnav-pill-alt {
box-shadow: @inverse-subnav-pill-alt-box-shadow;
& > * > * {
font-size: @subnav-item-font-size-small;
padding: @subnav-pill-item-padding-vertical-small @subnav-pill-item-padding-horizontal-small;
}
}
.uk-subnav.uk-subnav-pill-alt.uk-subnav-small {
& > * > * {
font-size: @subnav-item-font-size-small;
padding: @subnav-pill-alt-item-padding-vertical-small @subnav-pill-alt-item-padding-horizontal-small;
}
}
}

6
less/utility.less
View File

@ -1,6 +1,8 @@
@dropcap-font-size: @global-line-height * 3;
@border-rounded-border-radius: @global-border-radius;
@border-rounded-small-border-radius: @global-small-border-radius;
@border-rounded-xlarge-border-radius: @global-xlarge-border-radius;
@border-width: @global-border-width;
@border-color: @global-border;
@ -49,6 +51,10 @@
.uk-border-rounded-small {
border-radius: @border-rounded-small-border-radius;
}
.uk-border-rounded-xlarge {
border-radius: @border-rounded-xlarge-border-radius;
}
}
/* Inverse */

1
less/variables.less
View File

@ -36,6 +36,7 @@
@global-border: @muted-color;
@global-border-radius: 6px;
@global-small-border-radius: 4px;
@global-xlarge-border-radius: 4 * @global-border-radius;
/* Shadows*/
@global-default-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);