Production release (for EOSC EXPLORE) December 2023 #8
|
@ -5,6 +5,9 @@
|
||||||
@button-border-width: @global-border-width;
|
@button-border-width: @global-border-width;
|
||||||
@button-text-transform: uppercase;
|
@button-text-transform: uppercase;
|
||||||
@button-border-radius: 500px;
|
@button-border-radius: 500px;
|
||||||
|
@button-shadow: @global-medium-box-shadow;
|
||||||
|
@button-hover-shadow: @global-small-box-shadow;
|
||||||
|
@button-active-shadow: @button-hover-shadow;
|
||||||
|
|
||||||
/* Default */
|
/* Default */
|
||||||
@button-default-background: @global-background;
|
@button-default-background: @global-background;
|
||||||
|
@ -12,63 +15,63 @@
|
||||||
@button-default-box-shadow: @global-medium-box-shadow;
|
@button-default-box-shadow: @global-medium-box-shadow;
|
||||||
@button-default-border: transparent;
|
@button-default-border: transparent;
|
||||||
@button-default-hover-background: @global-background;
|
@button-default-hover-background: @global-background;
|
||||||
@button-default-hover-color: @global-secondary-background;
|
@button-default-hover-color: @button-shadow;
|
||||||
@button-default-hover-box-shadow: @global-small-box-shadow;
|
@button-default-hover-box-shadow: @button-hover-shadow;
|
||||||
@button-default-hover-border: transparent;
|
@button-default-hover-border: transparent;
|
||||||
@button-default-active-background: @button-default-hover-background;
|
@button-default-active-background: @button-default-hover-background;
|
||||||
@button-default-active-color: @button-default-hover-color;
|
@button-default-active-color: @button-default-hover-color;
|
||||||
@button-default-active-box-shadow: @button-default-hover-box-shadow;
|
@button-default-active-box-shadow: @button-active-shadow;
|
||||||
@button-default-active-border: @button-default-hover-border;
|
@button-default-active-border: @button-default-hover-border;
|
||||||
|
|
||||||
/* Primary */
|
/* Primary */
|
||||||
@button-primary-background: @global-primary-background;
|
@button-primary-background: @global-primary-background;
|
||||||
@button-primary-background-gradient: @global-primary-gradient;
|
@button-primary-background-gradient: @global-primary-gradient;
|
||||||
@button-primary-color: @global-inverse-color;
|
@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-border: transparent;
|
||||||
@button-primary-hover-background: @global-secondary-background;
|
@button-primary-hover-background: @global-secondary-background;
|
||||||
@button-primary-hover-background-gradient: none;
|
@button-primary-hover-background-gradient: none;
|
||||||
@button-primary-hover-color: @global-inverse-color;
|
@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-hover-border: transparent;
|
||||||
@button-primary-active-background: @button-primary-hover-background;
|
@button-primary-active-background: @button-primary-hover-background;
|
||||||
@button-primary-active-background-gradient: @button-primary-hover-background-gradient;
|
@button-primary-active-background-gradient: @button-primary-hover-background-gradient;
|
||||||
@button-primary-active-color: @button-primary-hover-color;
|
@button-primary-active-color: @button-primary-hover-color;
|
||||||
@button-primary-active-box-shadow: @button-primary-hover-box-shadow;
|
@button-primary-active-box-shadow: @button-active-shadow;
|
||||||
@button-primary-active-border: @button-primary-hover-border;
|
@button-primary-active-border: @button-primary-hover-border;
|
||||||
|
|
||||||
/* Secondary */
|
/* Secondary */
|
||||||
@button-secondary-background: @global-background;
|
@button-secondary-background: @global-background;
|
||||||
@button-secondary-background-gradient: none;
|
@button-secondary-background-gradient: none;
|
||||||
@button-secondary-color: @global-primary-background;
|
@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-border: @global-primary-background;
|
||||||
@button-secondary-hover-background: @global-primary-background;
|
@button-secondary-hover-background: @global-primary-background;
|
||||||
@button-secondary-hover-background-gradient: @global-primary-gradient;
|
@button-secondary-hover-background-gradient: @global-primary-gradient;
|
||||||
@button-secondary-hover-color: @global-inverse-color;
|
@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-hover-border: transparent;
|
||||||
@button-secondary-active-background: @button-secondary-hover-background;
|
@button-secondary-active-background: @button-secondary-hover-background;
|
||||||
@button-secondary-active-background-gradient: @button-secondary-hover-background-gradient;
|
@button-secondary-active-background-gradient: @button-secondary-hover-background-gradient;
|
||||||
@button-secondary-active-color: @button-secondary-hover-color;
|
@button-secondary-active-color: @button-secondary-hover-color;
|
||||||
@button-secondary-active-box-shadow: @button-secondary-hover-box-shadow;
|
@button-secondary-active-box-shadow: @button-active-shadow;
|
||||||
@button-secondary-active-border: @button-secondary-hover-border;
|
@button-secondary-active-border: @button-secondary-hover-border;
|
||||||
|
|
||||||
/* Danger */
|
/* Danger */
|
||||||
@button-danger-background: @global-danger-background;
|
@button-danger-background: @global-danger-background;
|
||||||
@button-danger-background-gradient: none;
|
@button-danger-background-gradient: none;
|
||||||
@button-danger-color: @global-inverse-color;
|
@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-border: @global-danger-background;
|
||||||
@button-danger-hover-background: @global-background;
|
@button-danger-hover-background: @global-background;
|
||||||
@button-danger-hover-background-gradient: none;
|
@button-danger-hover-background-gradient: none;
|
||||||
@button-danger-hover-color: @global-danger-background;
|
@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-hover-border: @global-danger-background;
|
||||||
@button-danger-active-background: @button-danger-hover-background;
|
@button-danger-active-background: @button-danger-hover-background;
|
||||||
@button-danger-active-background-gradient: @button-danger-hover-background-gradient;
|
@button-danger-active-background-gradient: @button-danger-hover-background-gradient;
|
||||||
@button-danger-active-color: @button-danger-hover-color;
|
@button-danger-active-color: @button-danger-hover-color;
|
||||||
@button-danger-active-box-shadow: @button-danger-hover-box-shadow;
|
@button-danger-active-box-shadow: @button-active-shadow;
|
||||||
@button-danger-active-border: @button-danger-hover-border;
|
@button-danger-active-border: @button-danger-hover-border;
|
||||||
|
|
||||||
/* Text */
|
/* Text */
|
||||||
|
@ -202,59 +205,62 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inverse */
|
/* 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 */
|
/* Default */
|
||||||
@inverse-button-default-background: @global-background;
|
@inverse-button-default-background: @global-background;
|
||||||
@inverse-button-default-color: @global-color;
|
@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-border: transparent;
|
||||||
@inverse-button-default-hover-background: @global-background;
|
@inverse-button-default-hover-background: @global-background;
|
||||||
@inverse-button-default-hover-color: @global-secondary-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-hover-border: transparent;
|
||||||
@inverse-button-default-active-background: @global-background;
|
@inverse-button-default-active-background: @global-background;
|
||||||
@inverse-button-default-active-color: @global-secondary-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;
|
@inverse-button-default-active-border: transparent;
|
||||||
|
|
||||||
/* Primary */
|
/* Primary */
|
||||||
@inverse-button-primary-background: @button-primary-background;
|
@inverse-button-primary-background: @button-primary-background;
|
||||||
@inverse-button-primary-background-gradient: @button-primary-background-gradient;
|
@inverse-button-primary-background-gradient: @button-primary-background-gradient;
|
||||||
@inverse-button-primary-color: @button-primary-color;
|
@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-border: @button-primary-border;
|
||||||
@inverse-button-primary-hover-background: @button-primary-hover-background;
|
@inverse-button-primary-hover-background: @button-primary-hover-background;
|
||||||
@inverse-button-primary-hover-background-gradient: @button-primary-hover-background-gradient;
|
@inverse-button-primary-hover-background-gradient: @button-primary-hover-background-gradient;
|
||||||
@inverse-button-primary-hover-color: @button-primary-hover-color;
|
@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-hover-border: @button-primary-hover-border;
|
||||||
@inverse-button-primary-active-background: @button-primary-active-background;
|
@inverse-button-primary-active-background: @button-primary-active-background;
|
||||||
@inverse-button-primary-active-background-gradient: @button-primary-active-background-gradient;
|
@inverse-button-primary-active-background-gradient: @button-primary-active-background-gradient;
|
||||||
@inverse-button-primary-active-color: @button-primary-active-color;
|
@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;
|
@inverse-button-primary-active-border: @button-primary-active-border;
|
||||||
|
|
||||||
/* Secondary */
|
/* Secondary */
|
||||||
@inverse-button-secondary-background: @global-background;
|
@inverse-button-secondary-background: @global-background;
|
||||||
@inverse-button-secondary-background-gradient: none;
|
@inverse-button-secondary-background-gradient: none;
|
||||||
@inverse-button-secondary-color: @button-secondary-color;
|
@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-border: @button-secondary-border;
|
||||||
@inverse-button-secondary-hover-background: @button-secondary-hover-background;
|
@inverse-button-secondary-hover-background: @button-secondary-hover-background;
|
||||||
@inverse-button-secondary-hover-background-gradient: @button-secondary-hover-background-gradient;
|
@inverse-button-secondary-hover-background-gradient: @button-secondary-hover-background-gradient;
|
||||||
@inverse-button-secondary-hover-color: @button-secondary-hover-color;
|
@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-hover-border: @button-secondary-hover-border;
|
||||||
@inverse-button-secondary-active-background: @button-secondary-active-background;
|
@inverse-button-secondary-active-background: @button-secondary-active-background;
|
||||||
@inverse-button-secondary-active-background-gradient: @button-secondary-active-background-gradient;
|
@inverse-button-secondary-active-background-gradient: @button-secondary-active-background-gradient;
|
||||||
@inverse-button-secondary-active-color: @button-secondary-active-color;
|
@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;
|
@inverse-button-secondary-active-border: transparent;
|
||||||
|
|
||||||
/* Danger */
|
/* Danger */
|
||||||
@inverse-button-danger-box-shadow: @inverse-global-medium-box-shadow;
|
@inverse-button-danger-box-shadow: @inverse-button-box-shadow;
|
||||||
@inverse-button-danger-hover-box-shadow: @inverse-global-small-box-shadow;
|
@inverse-button-danger-hover-box-shadow: @button-secondary-hover-background;
|
||||||
@inverse-button-danger-active-box-shadow: @inverse-global-small-box-shadow;
|
@inverse-button-danger-active-box-shadow: @inverse-button-active-box-shadow;
|
||||||
|
|
||||||
/* Text */
|
/* Text */
|
||||||
@inverse-button-text-color: @global-inverse-color;
|
@inverse-button-text-color: @global-inverse-color;
|
||||||
|
|
|
@ -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-horizontal: @global-small-gutter;
|
||||||
@card-body-padding-vertical: @global-small-gutter;
|
@card-body-padding-vertical: @global-small-gutter;
|
||||||
@card-border-radius: @global-border-radius;
|
@card-border-radius: @global-border-radius;
|
||||||
|
|
||||||
@card-default-background: @global-inverse-color;
|
@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-width: @global-border-width;
|
||||||
@card-default-border: @global-border;
|
@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-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-width: @global-border-width;
|
||||||
@card-default-header-border: @global-border;
|
@card-default-header-border: @global-border;
|
||||||
@card-default-footer-border-width: @global-border-width;
|
@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: @global-primary-background;
|
||||||
@card-primary-background-gradient: @global-primary-gradient;
|
@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-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-primary-hover-background-gradient: @global-primary-gradient;
|
||||||
|
|
||||||
@card-secondary-background: @global-secondary-background;
|
@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: @global-color;
|
||||||
@card-secondary-color-mode: light;
|
@card-secondary-color-mode: light;
|
||||||
@card-secondary-hover-background: @card-secondary-background;
|
@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-box-shadow: none;
|
||||||
@card-disabled-border: @global-border;
|
@card-disabled-border: @global-border;
|
||||||
|
@ -49,10 +53,6 @@
|
||||||
opacity: @card-disabled-opacity;
|
opacity: @card-disabled-opacity;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.uk-card-default, .uk-card-primary, .uk-card-secondary):hover {
|
|
||||||
background-color: @card-background-hover;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hook-card-header() {
|
.hook-card-header() {
|
||||||
|
@ -69,6 +69,7 @@
|
||||||
|
|
||||||
.hook-card-default-hover() {
|
.hook-card-default-hover() {
|
||||||
box-shadow: @card-default-hover-box-shadow;
|
box-shadow: @card-default-hover-box-shadow;
|
||||||
|
border-color: @card-default-hover-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hook-card-default-header() {
|
.hook-card-default-header() {
|
||||||
|
@ -102,7 +103,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-card-default {
|
.uk-card-default {
|
||||||
border: @card-default-border-m;
|
border-width: @card-default-border-width-m;
|
||||||
box-shadow: @card-default-box-shadow-m;
|
box-shadow: @card-default-box-shadow-m;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -68,4 +68,13 @@
|
||||||
@youtube-color: #FF0312;
|
@youtube-color: #FF0312;
|
||||||
/* Access */
|
/* Access */
|
||||||
@open-access-color:#F68212;
|
@open-access-color:#F68212;
|
||||||
|
@restricted-access-color: #920192;
|
||||||
|
@embargo-access-color: #003E92;
|
||||||
|
@closed-access-color: #E34950;
|
||||||
@close-access-color: #848484;
|
@close-access-color: #848484;
|
||||||
|
/* Access Routes */
|
||||||
|
@green-oa-color: #4A723C;
|
||||||
|
@gold-oa-color: #F2CD08;
|
||||||
|
@hybrid-oa-color: #FE9800;
|
||||||
|
@bronze-oa-color: #B45F05;
|
||||||
|
@diamond-oa-color: #842BD7;
|
||||||
|
|
|
@ -5,6 +5,8 @@
|
||||||
--input-placeholder-color: @global-meta-color;
|
--input-placeholder-color: @global-meta-color;
|
||||||
--input-placeholder-weight: 400;
|
--input-placeholder-weight: 400;
|
||||||
--input-placeholder-padding-horizontal: 5px;
|
--input-placeholder-padding-horizontal: 5px;
|
||||||
|
--input-placeholder-top: 0px;
|
||||||
|
--input-placeholder-transform: translateY(-50%);
|
||||||
--input-hint-color: @global-meta-color;
|
--input-hint-color: @global-meta-color;
|
||||||
--input-color: @global-emphasis-color;
|
--input-color: @global-emphasis-color;
|
||||||
--input-border-radius: @global-border-radius;
|
--input-border-radius: @global-border-radius;
|
||||||
|
@ -61,7 +63,7 @@
|
||||||
background: var(--input-background);
|
background: var(--input-background);
|
||||||
border-radius: var(--input-border-radius);
|
border-radius: var(--input-border-radius);
|
||||||
position: relative;
|
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;
|
cursor: pointer;
|
||||||
color: var(--input-color);
|
color: var(--input-color);
|
||||||
|
|
||||||
|
@ -264,8 +266,8 @@
|
||||||
&.active > .input-box > .placeholder > label,
|
&.active > .input-box > .placeholder > label,
|
||||||
&.focused > .input-box > .placeholder > label,
|
&.focused > .input-box > .placeholder > label,
|
||||||
&.hint > .input-box > .placeholder > label {
|
&.hint > .input-box > .placeholder > label {
|
||||||
transform: translateY(-50%);
|
transform: var(--input-placeholder-transform);
|
||||||
top: calc(var(--input-border-width) * -1);
|
top: calc(var(--input-placeholder-top) + var(--input-border-width) * -1);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
|
@ -305,6 +307,8 @@
|
||||||
--input-placeholder-weight: 700;
|
--input-placeholder-weight: 700;
|
||||||
--input-placeholder-color: @global-color;
|
--input-placeholder-color: @global-color;
|
||||||
--input-border-radius: 54px;
|
--input-border-radius: 54px;
|
||||||
|
--input-placeholder-top: 10px;
|
||||||
|
--input-placeholder-transform: none;
|
||||||
--input-padding-horizontal: 30px;
|
--input-padding-horizontal: 30px;
|
||||||
--input-padding-vertical: var(--search-input-icon-padding-vertical);
|
--input-padding-vertical: var(--search-input-icon-padding-vertical);
|
||||||
--input-background-hover: @global-muted-background;
|
--input-background-hover: @global-muted-background;
|
||||||
|
|
|
@ -3,17 +3,40 @@
|
||||||
@progress-border-radius: 500px;
|
@progress-border-radius: 500px;
|
||||||
@progress-box-shadow: none;
|
@progress-box-shadow: none;
|
||||||
@progress-bar-background: @global-primary-background;
|
@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-size: 100px;
|
||||||
|
@progress-circle-color: @global-primary-background;
|
||||||
@progress-circle-text-font-weight: @text-bold-weight;
|
@progress-circle-text-font-weight: @text-bold-weight;
|
||||||
@progress-circle-text-font-size: @global-large-font-size;
|
@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-color: @global-primary-background;
|
||||||
|
@progress-semicircle-text-font-weight: @text-bold-weight;
|
||||||
|
@progress-semicircle-text-font-size: @global-large-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() {
|
.hook-progress() {
|
||||||
border-radius: @progress-border-radius;
|
border-radius: @progress-border-radius;
|
||||||
box-shadow: @progress-box-shadow;
|
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() {
|
.hook-progress-bar() {
|
||||||
|
@ -29,29 +52,136 @@
|
||||||
width: @progress-circle-size;
|
width: @progress-circle-size;
|
||||||
height: @progress-circle-size;
|
height: @progress-circle-size;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background:
|
background: @progress-circle-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);
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
color: @progress-bar-background;
|
color: @progress-circle-color;
|
||||||
font-weight: @progress-circle-text-font-weight;
|
font-weight: @progress-circle-text-font-weight;
|
||||||
font-size: @progress-circle-text-font-size;
|
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) '%';
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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() {
|
.hook-inverse() {
|
||||||
.uk-progress {
|
.uk-progress {
|
||||||
background-color: @inverse-progress-background;
|
background-color: @inverse-progress-background;
|
||||||
}
|
|
||||||
|
|
||||||
.uk-progress::-moz-progress-bar {
|
&::-moz-progress-bar {
|
||||||
background-color: @inverse-progress-bar-background;
|
background-color: @inverse-progress-bar-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-progress::-webkit-progress-value {
|
&::-webkit-progress-value {
|
||||||
background-color: @inverse-progress-bar-background;
|
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-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-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
@table-header-cell-color: @global-meta-color;
|
@table-header-cell-color: @global-meta-color;
|
||||||
@table-header-cell-text-transform: uppercase;
|
@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;
|
@table-striped-row-background: @table-color;
|
||||||
|
|
||||||
|
|
|
@ -10,5 +10,4 @@
|
||||||
.hook-tooltip() {
|
.hook-tooltip() {
|
||||||
border: @tooltip-border-width solid @tooltip-border;
|
border: @tooltip-border-width solid @tooltip-border;
|
||||||
box-shadow: @tooltip-shadow;
|
box-shadow: @tooltip-shadow;
|
||||||
word-break: break-all;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
@dropcap-font-size: @global-line-height * 3;
|
@dropcap-font-size: @global-line-height * 3;
|
||||||
@border-rounded-border-radius: @global-border-radius;
|
@border-rounded-border-radius: @global-border-radius;
|
||||||
|
@border-rounded-small-border-radius: @global-small-border-radius;
|
||||||
|
|
||||||
@border-width: @global-border-width;
|
@border-width: @global-border-width;
|
||||||
@border-color: @global-border;
|
@border-color: @global-border;
|
||||||
|
@ -43,6 +44,11 @@
|
||||||
.uk-box-no-shadow, .uk-box-no-shadow-hover:hover {
|
.uk-box-no-shadow, .uk-box-no-shadow-hover:hover {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Border radius*/
|
||||||
|
.uk-border-rounded-small {
|
||||||
|
border-radius: @border-rounded-small-border-radius;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inverse */
|
/* Inverse */
|
||||||
|
|
|
@ -46,9 +46,19 @@
|
||||||
@global-xlarge-box-shadow: -20px -20px 25px rgba(0, 0, 0, 0.02), 20px 20px 25px rgba(0, 0, 0, 0.08);
|
@global-xlarge-box-shadow: -20px -20px 25px rgba(0, 0, 0, 0.02), 20px 20px 25px rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
/* Spacings */
|
/* Spacings */
|
||||||
@global-small-gutter: 20px;
|
@global-xsmall-gutter: 8px;
|
||||||
@global-xsmall-gutter: 10px;
|
@global-small-gutter: 16px;
|
||||||
@global-xsmall-margin: 5px;
|
@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 */
|
/* Controls */
|
||||||
@global-control-small-height: 30px;
|
@global-control-small-height: 30px;
|
||||||
|
|
Loading…
Reference in New Issue