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

Compare commits

merge into: MaDgIK:angular-16
Branches Tags
MaDgIK:master
MaDgIK:develop
MaDgIK:angular-16
MaDgIK:explore-redesign
...
pull from: MaDgIK:master
Branches Tags
MaDgIK:master
MaDgIK:develop
MaDgIK:angular-16
MaDgIK:explore-redesign

40 Commits
angular-16 ... master

Author SHA1 Message Date
Konstantina Galouni 56f08f2c2e Merge pull request 'Production release May 2024 [EXPLORE]' (#13) from develop into master 
Reviewed-on: #13
 2024-05-23 18:23:46 +02:00
Konstantinos Triantafyllou 99e7fe14bc Fix color of banner tabs. 2024-05-22 21:40:02 +03:00
Konstantinos Triantafyllou fdbb44cd21 [develop]: Add colors for publisher and journals 2024-05-22 11:30:30 +03:00
Alex Martzios 9b68a23c71 [develop | DONE | ADDED] add new css rules for banner customization 2024-05-21 12:37:21 +03:00
Alex Martzios 3158f9ec0c [develop | DONE | ADDED] create banner.less for openaire theme 2024-05-21 12:12:20 +03:00
Konstantina Galouni fe10d2e919 [develop | DONE | CHANGED]: Updated color of selected search filter labels (not purple, but portal color). 
1. newSearchPage.component.html: Replaced class "uk-label-search-filter" with "uk-label-secondary" on selected search filter labels.
2. color.less: Removed color variable @search-filter-color: #B41FD0;
3. label.less: Removed custom color variables and class "uk-label-search-filter" | Updated class "uk-label-secondary".
4. explore-custom.less: Override @uk-label-secondary: @explore-color;
 2024-04-30 13:08:54 +03:00
Alex Martzios 860bd52a5f [develop | DONE | ADDED] modal.less : increase z-index for .uk-drop class as well 2024-04-15 12:08:15 +03:00
Alex Martzios 886854fcba [develop | DONE | ADDED] add color variable for search-filter pills, add specific class for search filters pills 2024-04-11 16:33:15 +03:00
Alex Martzios 9171ec2a63 [develop | DONE | ADDED] add new 'small' progress-semicircle size and icon-background (without shadow) 2024-04-08 19:09:26 +03:00
Konstantinos Triantafyllou 43ed7e2679 [develop]: Remove scroll-y on body. Add max-width and truncate in subnav items. 2024-04-05 20:11:12 +03:00
Alex Martzios 1daea183e7 [develop | DONE | ADDED] add .uk-subnav-small class for smaller subnav items as a new option 2024-04-05 16:17:11 +03:00
Alex Martzios 954a1fe8af [develop | DONE | ADDED] add variable for xlarge border-radius and new blur options 2024-03-19 12:53:35 +02:00
Konstantina Galouni e721fef203 Merge pull request 'Production release February 2024 [CONNECT]' (#12) from develop into master 
Reviewed-on: #12
 2024-03-04 17:43:27 +01:00
Konstantinos Triantafyllou 37639eab68 [develop]: Dropdowns in modal-container have higher z-index. 2024-02-14 15:42:28 +02:00
Konstantina Galouni 99ab54cdd7 Merge pull request 'Production release February 2024' (#11) from develop into master 
Reviewed-on: #11
 2024-02-08 18:02:13 +01:00
Konstantinos Triantafyllou 419d7e200b [develop]: Add rule for link with button 2024-02-08 17:47:24 +02:00
Konstantina Galouni d87a7b1316 Merge pull request 'Production release January 2024' (#10) from develop into master 
Reviewed-on: #10
 2024-02-01 20:05:37 +01:00
Konstantinos Triantafyllou 52eca9abe8 [develop | ADDED]: Add missing colors for country and datasource (default: none) 2024-01-24 10:37:18 +02:00
Konstantinos Triantafyllou 8667e43d57 Merge pull request 'Production release December 2023' (#9) from develop into master 
Reviewed-on: #9
 2023-12-21 13:48:56 +01:00
argirok df6a0527e9 update OA routes colors 2023-12-21 11:39:31 +02:00
Konstantina Galouni f77eefe72c Merge pull request 'Production release (for EOSC EXPLORE) December 2023' (#8) from develop into master 
Reviewed-on: #8
 2023-12-12 11:45:26 +01:00
Konstantinos Triantafyllou 821f1e658b [develop]: Change mangins and paddings variables to be multiplied by 8. 2023-12-12 10:14:34 +02:00
Konstantinos Triantafyllou 2e308b3366 [develop]: Remove word break from tooltip. 2023-12-08 15:34:32 +02:00
Konstantinos Triantafyllou c9e01c8a90 [develop]: Add oa routes colors. Fix progress semicircle in light mode. 2023-12-07 17:00:01 +02:00
Konstantinos Triantafyllou 074205f9dc [develop]: Add progress semi-circle and open access modifier for all types. 2023-12-06 12:40:39 +02:00
Konstantinos Triantafyllou b64262cb3b [develop]: Table change color of an active row to match with card hover. 2023-12-01 19:29:42 +02:00
Konstantinos Triantafyllou bdc26845e4 [develop]: Input: add variables for placeholder position in order to fix advanced search-input. 2023-12-01 17:01:24 +02:00
Konstantinos Triantafyllou e29cf995f6 [develop]: Change @card-defaut-border-m to @card-default-border-width-m 2023-12-01 12:24:29 +02:00
Konstantinos Triantafyllou 49cf2a74e2 [develop]: Improve variables for buttons and cards. Add uk-border-small-radius. 2023-11-30 23:01:14 +02:00
Konstantinos Triantafyllou 5b2ec5ad3c Merge pull request 'Production release November 2023' (#7) from develop into master 
Reviewed-on: #7
 2023-11-28 09:52:44 +01:00
Konstantinos Triantafyllou 7aa9e57719 [develop]: Change color of links and button links to be global 2023-11-21 17:45:13 +02:00
Konstantinos Triantafyllou 928dfa11bd [develop | DONE]: 1. Add placeholder.less. 2. Buttons: Active status by default like hover. 3. Add variable for logo height. 2023-11-14 16:07:20 +02:00
Konstantinos Triantafyllou 9218026420 Merge pull request 'Angular & UIkit Upgrade' (#6) from develop into master 
Reviewed-on: #6
 2023-11-06 10:04:48 +01:00
Konstantinos Triantafyllou 5e8c1addb1 Merge pull request 'Update to Angular 16' (#5) from angular-16 into develop 
Reviewed-on: #5
 2023-10-30 11:02:19 +01:00
Konstantinos Triantafyllou ac458b5a6d Merge pull request 'Connect Admin release 30th August 2023' (#4) from develop into master 
Reviewed-on: #4
 2023-08-30 12:49:33 +02:00
Konstantinos Triantafyllou a0797a5ecc Merge remote-tracking branch 'origin/develop' 2023-07-12 12:59:08 +03:00
Konstantina Galouni 64c5ed3d45 Merge remote-tracking branch 'origin/develop' 2023-06-23 16:24:04 +03:00
Konstantina Galouni 636b79a7d9 Merge remote-tracking branch 'origin/develop' 2023-06-23 16:20:10 +03:00
Konstantinos Triantafyllou a5b03a914c Merge pull request 'Connect release 25th May 2023' (#2) from develop into master 
Reviewed-on: #2
 2023-05-25 16:11:28 +02:00
Konstantinos Triantafyllou c47077df60 Merge pull request 'Monitor release 16th May 2023' (#1) from develop into master 
Reviewed-on: #1
 2023-05-16 16:25:56 +02:00
19 changed files with 447 additions and 95 deletions
Show Stats Expand all files Collapse all files

3
less/_import.less vendored
View File

@ -27,6 +27,7 @@
@import "close";
@import "totop";
@import "alert";
@import "placeholder";
@import "badge";
@import "label";
@import "search";
@ -64,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) {

96
less/button.less
View File

@ -5,6 +5,9 @@
@button-border-width: @global-border-width;
@button-text-transform: uppercase;
@button-border-radius: 500px;
@button-shadow: @global-medium-box-shadow;
@button-hover-shadow: @global-small-box-shadow;
@button-active-shadow: @button-hover-shadow;
/* Default */
@button-default-background: @global-background;
@ -12,72 +15,72 @@
@button-default-box-shadow: @global-medium-box-shadow;
@button-default-border: transparent;
@button-default-hover-background: @global-background;
@button-default-hover-color: @global-secondary-background;
@button-default-hover-box-shadow: @global-small-box-shadow;
@button-default-hover-color: @button-shadow;
@button-default-hover-box-shadow: @button-hover-shadow;
@button-default-hover-border: transparent;
@button-default-active-background: @global-background;
@button-default-active-color: @global-secondary-background;
@button-default-active-box-shadow: @global-small-box-shadow;
@button-default-active-border: transparent;
@button-default-active-background: @button-default-hover-background;
@button-default-active-color: @button-default-hover-color;
@button-default-active-box-shadow: @button-active-shadow;
@button-default-active-border: @button-default-hover-border;
/* Primary */
@button-primary-background: @global-primary-background;
@button-primary-background-gradient: @global-primary-gradient;
@button-primary-color: @global-inverse-color;
@button-primary-box-shadow: @global-medium-box-shadow;
@button-primary-box-shadow: @button-shadow;
@button-primary-border: transparent;
@button-primary-hover-background: @global-secondary-background;
@button-primary-hover-background-gradient: none;
@button-primary-hover-color: @global-inverse-color;
@button-primary-hover-box-shadow: @global-small-box-shadow;
@button-primary-hover-box-shadow: @button-hover-shadow;
@button-primary-hover-border: transparent;
@button-primary-active-background: @global-secondary-background;
@button-primary-active-background-gradient: none;
@button-primary-active-color: @global-inverse-color;
@button-primary-active-box-shadow: @global-small-box-shadow;
@button-primary-active-border: transparent;
@button-primary-active-background: @button-primary-hover-background;
@button-primary-active-background-gradient: @button-primary-hover-background-gradient;
@button-primary-active-color: @button-primary-hover-color;
@button-primary-active-box-shadow: @button-active-shadow;
@button-primary-active-border: @button-primary-hover-border;
/* Secondary */
@button-secondary-background: @global-background;
@button-secondary-background-gradient: none;
@button-secondary-color: @global-primary-background;
@button-secondary-box-shadow: @global-medium-box-shadow;
@button-secondary-box-shadow: @button-shadow;
@button-secondary-border: @global-primary-background;
@button-secondary-hover-background: @global-primary-background;
@button-secondary-hover-background-gradient: @global-primary-gradient;
@button-secondary-hover-color: @global-inverse-color;
@button-secondary-hover-box-shadow: @global-small-box-shadow;
@button-secondary-hover-box-shadow: @button-hover-shadow;
@button-secondary-hover-border: transparent;
@button-secondary-active-background: @global-primary-background;
@button-secondary-active-background-gradient: @global-primary-gradient;
@button-secondary-active-color: @global-inverse-color;
@button-secondary-active-box-shadow: @global-small-box-shadow;
@button-secondary-active-border: transparent;
@button-secondary-active-background: @button-secondary-hover-background;
@button-secondary-active-background-gradient: @button-secondary-hover-background-gradient;
@button-secondary-active-color: @button-secondary-hover-color;
@button-secondary-active-box-shadow: @button-active-shadow;
@button-secondary-active-border: @button-secondary-hover-border;
/* Danger */
@button-danger-background: @global-danger-background;
@button-danger-background-gradient: none;
@button-danger-color: @global-inverse-color;
@button-danger-box-shadow: @global-medium-box-shadow;
@button-danger-box-shadow: @button-shadow;
@button-danger-border: @global-danger-background;
@button-danger-hover-background: @global-background;
@button-danger-hover-background-gradient: none;
@button-danger-hover-color: @global-danger-background;
@button-danger-hover-box-shadow: @global-small-box-shadow;
@button-danger-hover-box-shadow: @button-hover-shadow;
@button-danger-hover-border: @global-danger-background;
@button-danger-active-background: @global-background;
@button-danger-active-background-gradient: none;
@button-danger-active-color: @global-danger-background;
@button-danger-active-box-shadow: @global-small-box-shadow;
@button-danger-active-border: @global-danger-background;
@button-danger-active-background: @button-danger-hover-background;
@button-danger-active-background-gradient: @button-danger-hover-background-gradient;
@button-danger-active-color: @button-danger-hover-color;
@button-danger-active-box-shadow: @button-active-shadow;
@button-danger-active-border: @button-danger-hover-border;
/* Text */
@button-text-color: @global-primary-background;
@button-text-hover-color: @button-text-color;
/* Link */
@button-link-color: @global-primary-background;
@button-link-hover-color: @global-secondary-background;
@button-link-color: @openaire-primary-color;
@button-link-hover-color: @openaire-secondary-color;
/* Disabled */
@button-disabled-box-shadow: none;
@ -201,60 +204,71 @@
background-image: none;
}
.hook-button-misc() {
a:hover {
& .uk-button-default:extend(.uk-button-default:hover){};
& .uk-button-primary:extend(.uk-button-primary:hover){};
& .uk-button-secondary:extend(.uk-button-secondary:hover){};
}
}
/* Inverse */
@inverse-button-box-shadow: @inverse-global-medium-box-shadow;
@inverse-button-hover-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-active-box-shadow: @inverse-button-hover-box-shadow;
/* Default */
@inverse-button-default-background: @global-background;
@inverse-button-default-color: @global-color;
@inverse-button-default-box-shadow: @inverse-global-medium-box-shadow;
@inverse-button-default-box-shadow: @inverse-button-box-shadow;
@inverse-button-default-border: transparent;
@inverse-button-default-hover-background: @global-background;
@inverse-button-default-hover-color: @global-secondary-background;
@inverse-button-default-hover-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-default-hover-box-shadow: @inverse-button-hover-box-shadow;
@inverse-button-default-hover-border: transparent;
@inverse-button-default-active-background: @global-background;
@inverse-button-default-active-color: @global-secondary-background;
@inverse-button-default-active-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-default-active-box-shadow: @inverse-button-active-box-shadow;
@inverse-button-default-active-border: transparent;
/* Primary */
@inverse-button-primary-background: @button-primary-background;
@inverse-button-primary-background-gradient: @button-primary-background-gradient;
@inverse-button-primary-color: @button-primary-color;
@inverse-button-primary-box-shadow: @inverse-global-medium-box-shadow;;
@inverse-button-primary-box-shadow: @inverse-button-box-shadow;
@inverse-button-primary-border: @button-primary-border;
@inverse-button-primary-hover-background: @button-primary-hover-background;
@inverse-button-primary-hover-background-gradient: @button-primary-hover-background-gradient;
@inverse-button-primary-hover-color: @button-primary-hover-color;
@inverse-button-primary-hover-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-primary-hover-box-shadow: @inverse-button-hover-box-shadow;
@inverse-button-primary-hover-border: @button-primary-hover-border;
@inverse-button-primary-active-background: @button-primary-active-background;
@inverse-button-primary-active-background-gradient: @button-primary-active-background-gradient;
@inverse-button-primary-active-color: @button-primary-active-color;
@inverse-button-primary-active-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-primary-active-box-shadow: @inverse-button-active-box-shadow;
@inverse-button-primary-active-border: @button-primary-active-border;
/* Secondary */
@inverse-button-secondary-background: @global-background;
@inverse-button-secondary-background-gradient: none;
@inverse-button-secondary-color: @button-secondary-color;
@inverse-button-secondary-box-shadow: @inverse-global-medium-box-shadow;
@inverse-button-secondary-box-shadow: @inverse-button-box-shadow;
@inverse-button-secondary-border: @button-secondary-border;
@inverse-button-secondary-hover-background: @button-secondary-hover-background;
@inverse-button-secondary-hover-background-gradient: @button-secondary-hover-background-gradient;
@inverse-button-secondary-hover-color: @button-secondary-hover-color;
@inverse-button-secondary-hover-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-secondary-hover-box-shadow: @inverse-button-hover-box-shadow;
@inverse-button-secondary-hover-border: @button-secondary-hover-border;
@inverse-button-secondary-active-background: @button-secondary-active-background;
@inverse-button-secondary-active-background-gradient: @button-secondary-active-background-gradient;
@inverse-button-secondary-active-color: @button-secondary-active-color;
@inverse-button-secondary-active-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-secondary-active-box-shadow: @inverse-button-active-box-shadow;
@inverse-button-secondary-active-border: transparent;
/* Danger */
@inverse-button-danger-box-shadow: @inverse-global-medium-box-shadow;
@inverse-button-danger-hover-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-danger-active-box-shadow: @inverse-global-small-box-shadow;
@inverse-button-danger-box-shadow: @inverse-button-box-shadow;
@inverse-button-danger-hover-box-shadow: @button-secondary-hover-background;
@inverse-button-danger-active-box-shadow: @inverse-button-active-box-shadow;
/* Text */
@inverse-button-text-color: @global-inverse-color;

29
less/card.less
View File

@ -1,34 +1,38 @@
@card-background-hover: @ciel-color;
@card-hover-background: @ciel-color;
@card-box-shadow-m: @global-large-box-shadow;
@card-hover-box-shadow: @global-small-box-shadow;
@card-body-padding-horizontal: @global-small-gutter;
@card-body-padding-vertical: @global-small-gutter;
@card-border-radius: @global-border-radius;
@card-default-background: @global-inverse-color;
@card-default-box-shadow-m: @global-large-box-shadow;
@card-default-box-shadow-m: @card-box-shadow-m;
@card-default-border-width: @global-border-width;
@card-default-border: @global-border;
@card-default-border-m: none;
@card-default-border-width-m: 0;
@card-default-hover-border: transparent;
@card-default-hover-background: @card-default-background;
@card-default-hover-box-shadow: @global-small-box-shadow;
@card-default-hover-box-shadow: @card-hover-box-shadow;
@card-default-header-border-width: @global-border-width;
@card-default-header-border: @global-border;
@card-default-footer-border-width: @global-border-width;
@card-default-footer-border: @global-border;
@card-default-footer-border: @card-default-border;
@card-primary-background: @global-primary-background;
@card-primary-background-gradient: @global-primary-gradient;
@card-primary-box-shadow-m: @global-large-box-shadow;
@card-primary-box-shadow-m: @card-box-shadow-m;
@card-primary-hover-background: @card-primary-background;
@card-primary-hover-box-shadow: @global-small-box-shadow;
@card-primary-hover-box-shadow: @card-hover-box-shadow;
@card-primary-hover-background-gradient: @global-primary-gradient;
@card-secondary-background: @global-secondary-background;
@card-secondary-box-shadow-m: @global-large-box-shadow;
@card-secondary-box-shadow-m: @card-box-shadow-m;
@card-secondary-color: @global-color;
@card-secondary-color-mode: light;
@card-secondary-hover-background: @card-secondary-background;
@card-secondary-hover-box-shadow: @global-small-box-shadow;
@card-secondary-hover-box-shadow: @card-hover-box-shadow;
@card-disabled-box-shadow: none;
@card-disabled-border: @global-border;
@ -49,10 +53,6 @@
opacity: @card-disabled-opacity;
}
}
&:not(.uk-card-default, .uk-card-primary, .uk-card-secondary):hover {
background-color: @card-background-hover;
}
}
.hook-card-header() {
@ -69,6 +69,7 @@
.hook-card-default-hover() {
box-shadow: @card-default-hover-box-shadow;
border-color: @card-default-hover-border;
}
.hook-card-default-header() {
@ -102,7 +103,7 @@
}
.uk-card-default {
border: @card-default-border-m;
border-width: @card-default-border-width-m;
box-shadow: @card-default-box-shadow-m;
}

21
less/color.less
View File

@ -1,5 +1,8 @@
@primary-color: #211F7E;
@primary-light-color: #4687E6;
@openaire-primary-color: #211F7E;
@openaire-secondary-color: #4687E6;
@primary-color: @openaire-primary-color;
@primary-light-color: @openaire-secondary-color;
@primary-dark-color: #1F2379;
@secondary-color: #3086ED;
@ -42,6 +45,11 @@
@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 */
@connect-color: #FECA1D;
@connect-light-color: #FECA1D;
@ -65,4 +73,13 @@
@youtube-color: #FF0312;
/* Access */
@open-access-color:#F68212;
@restricted-access-color: #920192;
@embargo-access-color: #003E92;
@closed-access-color: #E34950;
@close-access-color: #848484;
/* Access Routes */
@green-oa-color: #26580fda;
@gold-oa-color: #f2cd08ff;
@hybrid-oa-color: #fe9800ff;
@bronze-oa-color: #b45f05ff;
@diamond-oa-color: #842bd7ff;

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/input.less
View File

@ -5,6 +5,8 @@
--input-placeholder-color: @global-meta-color;
--input-placeholder-weight: 400;
--input-placeholder-padding-horizontal: 5px;
--input-placeholder-top: 0px;
--input-placeholder-transform: translateY(-50%);
--input-hint-color: @global-meta-color;
--input-color: @global-emphasis-color;
--input-border-radius: @global-border-radius;
@ -61,7 +63,7 @@
background: var(--input-background);
border-radius: var(--input-border-radius);
position: relative;
padding: var(--input-padding-vertical) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
padding: calc(var(--input-padding-vertical) + var(--input-placeholder-top)) 0 calc(var(--input-padding-vertical) - var(--input-placeholder-top)) var(--input-padding-horizontal);
cursor: pointer;
color: var(--input-color);
@ -264,8 +266,8 @@
&.active > .input-box > .placeholder > label,
&.focused > .input-box > .placeholder > label,
&.hint > .input-box > .placeholder > label {
transform: translateY(-50%);
top: calc(var(--input-border-width) * -1);
transform: var(--input-placeholder-transform);
top: calc(var(--input-placeholder-top) + var(--input-border-width) * -1);
font-size: 12px;
line-height: 18px;
}
@ -305,6 +307,8 @@
--input-placeholder-weight: 700;
--input-placeholder-color: @global-color;
--input-border-radius: 54px;
--input-placeholder-top: 10px;
--input-placeholder-transform: none;
--input-padding-horizontal: 30px;
--input-padding-vertical: var(--search-input-icon-padding-vertical);
--input-background-hover: @global-muted-background;

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

12
less/modal.less
View File

@ -42,7 +42,17 @@
}
.hook-modal-misc() {
.uk-modal, uk-dropdown {
#modal-container {
& > .uk-dropdown {
z-index: @modal-z-index + 1;
}
& > .uk-drop {
z-index: @modal-z-index + 1;
}
}
.uk-modal, .uk-dropdown, .uk-drop {
.uk-button, uk-icon-button {
box-shadow: none !important;

3
less/navbar.less
View File

@ -6,6 +6,7 @@
@navbar-nav-item-font-size: @global-small-font-size;
@navbar-nav-item-font-weight: 600;
@navbar-nav-item-height: @global-header-height;
@navbar-nav-logo-height: @navbar-nav-item-height - 20px;
@navbar-nav-logo-max-width: @width-xsmall-width;
@navbar-nav-item-color: @global-color;
@navbar-nav-item-before-background: @global-secondary-background;
@ -57,7 +58,7 @@
& .uk-logo {
& > img {
height: @navbar-nav-item-height - 20px;
height: @navbar-nav-logo-height;
object-fit: contain;
}

6
less/placeholder.less Normal file
View File

@ -0,0 +1,6 @@
@placeholder-background: @global-inverse-color;
@placeholder-border: 2px dashed @global-border;
.hook-placeholder() {
border: @placeholder-border;
}

160
less/progress.less
View File

@ -3,17 +3,42 @@
@progress-border-radius: 500px;
@progress-box-shadow: none;
@progress-bar-background: @global-primary-background;
@progress-bar-background-open-access: @open-access-color;
@progress-background-open-access: @muted-color;
@progress-circle-size: 100px;
@progress-circle-color: @global-primary-background;
@progress-circle-text-font-weight: @text-bold-weight;
@progress-circle-text-font-size: @global-large-font-size;
@progress-circle-sub-background: @table-color;
@progress-circle-background: conic-gradient(@progress-bar-background calc(var(--percentage) * 1%), @progress-background 0);
@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%));
@inverse-progress-background: @inverse-global-color;
@inverse-progress-bar-background: @global-secondary-background;
.hook-progress() {
border-radius: @progress-border-radius;
box-shadow: @progress-box-shadow;
&.open-access {
background: @progress-background-open-access;
&::-moz-progress-bar {
background-color: @progress-bar-background-open-access;
}
&::-webkit-progress-value {
background-color: @progress-bar-background-open-access;
}
}
}
.hook-progress-bar() {
@ -29,29 +54,144 @@
width: @progress-circle-size;
height: @progress-circle-size;
border-radius: 50%;
background:
radial-gradient(closest-side, @table-color 70%, @global-inverse-color 70% 80%, transparent 80% 100%),
conic-gradient(@progress-bar-background calc(var(--percentage) * 1%), @progress-background 0);
background: @progress-circle-background;
&::before {
color: @progress-bar-background;
color: @progress-circle-color;
font-weight: @progress-circle-text-font-weight;
font-size: @progress-circle-text-font-size;
width: 80%;
height: 80%;
border-radius: inherit;
display: flex;
align-items: center;
justify-content: center;
background: @progress-circle-sub-background;
content: attr(percentage) '%';
}
&.open-access {
background: @progress-circle-background-open-access;
}
}
.uk-progress-semicircle[percentage] {
width: @progress-semicircle-size;
aspect-ratio: 2 / 1;
border-radius: 50% / 100% 100% 0 0;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: @progress-semicircle-background;
mask: radial-gradient(at 50% 100%, white 62%, transparent 63%);
mask-mode: alpha;
-webkit-mask: radial-gradient(at 50% 100%, #0000 62%, #000 63%);
-webkit-mask-mode: alpha;
}
&::after {
color: @progress-semicircle-color;
font-weight: @progress-semicircle-text-font-weight;
font-size: @progress-semicircle-text-font-size;
content: attr(percentage) '%';
}
&.open-access {
&::before {
background: @progress-semicircle-background-open-access;
}
}
}
.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;
@inverse-progress-bar-background: @global-secondary-background;
@inverse-progress-background-open-access: @inverse-global-color;
@inverse-progress-bar-background-open-access: @progress-bar-background-open-access;
@inverse-progress-circle-color: @inverse-global-color;
@inverse-progress-circle-sub-background: @global-primary-background;
@inverse-progress-circle-background: conic-gradient(@inverse-progress-bar-background calc(var(--percentage) * 1%), @inverse-progress-background 0);
@inverse-progress-circle-background-open-access: conic-gradient(@inverse-progress-bar-background-open-access calc(var(--percentage) * 1%), @inverse-progress-background-open-access 0);
@inverse-progress-semicircle-color: @inverse-global-color;
@inverse-progress-semicircle-background: conic-gradient(from 0.75turn at 50% 100%, @inverse-progress-bar-background calc(var(--percentage) * 1% / 2), @inverse-progress-background calc(var(--percentage) * 1% / 2 + 0.1%));
@inverse-progress-semicircle-background-open-access: conic-gradient(from 0.75turn at 50% 100%, @inverse-progress-bar-background-open-access calc(var(--percentage) * 1% / 2), @inverse-progress-background-open-access calc(var(--percentage) * 1% / 2 + 0.1%));
.hook-inverse() {
.uk-progress {
background-color: @inverse-progress-background;
&::-moz-progress-bar {
background-color: @inverse-progress-bar-background;
}
&::-webkit-progress-value {
background-color: @inverse-progress-bar-background;
}
&.open-access {
background: @inverse-progress-background-open-access;
&::-moz-progress-bar {
background-color: @inverse-progress-bar-background-open-access;
}
&::-webkit-progress-value {
background-color: @inverse-progress-bar-background-open-access;
}
}
}
.uk-progress::-moz-progress-bar {
background-color: @inverse-progress-bar-background;
.uk-progress-circle[percentage] {
background: @inverse-progress-circle-background;
&::before {
color: @inverse-progress-circle-color;
background: @inverse-progress-circle-sub-background;
}
&.open-access {
background: @inverse-progress-circle-background-open-access;
}
}
.uk-progress::-webkit-progress-value {
background-color: @inverse-progress-bar-background;
.uk-progress-semicircle[percentage] {
&::before {
background: @inverse-progress-semicircle-background;
}
&::after {
color: @inverse-progress-semicircle-color;
}
&.open-access {
&::before {
background: @inverse-progress-semicircle-background-open-access;
}
&::after {
color: @inverse-progress-semicircle-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;
}
}
}

2
less/table.less
View File

@ -6,7 +6,7 @@
@table-header-cell-color: @global-meta-color;
@table-header-cell-text-transform: uppercase;
@table-row-active-background: fade(@global-primary-background, 20%);
@table-row-active-background: @ciel-color;
@table-striped-row-background: @table-color;

1
less/tooltip.less
View File

@ -10,5 +10,4 @@
.hook-tooltip() {
border: @tooltip-border-width solid @tooltip-border;
box-shadow: @tooltip-shadow;
word-break: break-all;
}

12
less/utility.less
View File

@ -1,5 +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;
@ -43,6 +46,15 @@
.uk-box-no-shadow, .uk-box-no-shadow-hover:hover {
box-shadow: none;
}
/* Border radius*/
.uk-border-rounded-small {
border-radius: @border-rounded-small-border-radius;
}
.uk-border-rounded-xlarge {
border-radius: @border-rounded-xlarge-border-radius;
}
}
/* Inverse */

19
less/variables.less
View File

@ -17,7 +17,7 @@
@global-link-color: @info-color;
@global-muted-color: @disable-color;
@global-meta-color: @placeholder-color;
@global-link-hover-color: @secondary-color;
@global-link-hover-color: @openaire-secondary-color;
@global-overlay-background: fade(@black-color, 60%);
/** Backgrounds */
@ -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);
@ -46,9 +47,19 @@
@global-xlarge-box-shadow: -20px -20px 25px rgba(0, 0, 0, 0.02), 20px 20px 25px rgba(0, 0, 0, 0.08);
/* Spacings */
@global-small-gutter: 20px;
@global-xsmall-gutter: 10px;
@global-xsmall-margin: 5px;
@global-xsmall-gutter: 8px;
@global-small-gutter: 16px;
@global-gutter: 32px;
@global-medium-gutter: 40px;
@global-large-gutter: 72px;
@global-xsmall-margin: 4px;
@global-small-margin: 8px;
@global-margin: 16px;
@global-medium-margin: 40px;
@global-large-margin: 72px;
@global-xlarge-margin: 144px;
/* Controls */
@global-control-small-height: 30px;