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

Add global overlay background. Add blur background mixin and apply in background default and offcanvas. Add text-light-grey in text.

This commit is contained in:
Konstantinos Triantafyllou 2022-07-17 16:05:14 +03:00
parent a61c749816
commit 3bc96a4bdc
9 changed files with 88 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
less/_import.less vendored
View File

@ -4,6 +4,7 @@
// Base
@import "fonts";
@import "variables";
@import "mixin";
@import "base";
// Elements

6
less/background.less
View File

@ -5,6 +5,12 @@
@background-color-opacity: @global-opacity;
.hook-background-misc() {
.set-blur-background();
.uk-background-default {
.set-blur-background(@background-default-background);
}
.uk-background-primary {
background-image: @background-primary-background-gradient;
}

92
less/color.less
View File

@ -1,48 +1,48 @@
@primary-color: #211F7E;
@primary-light-color: #4687E6;
@primary-dark-color: #1F2379;
@secondary-color: #3086ED;
@primary-color: #211F7E;
@primary-light-color: #4687E6;
@primary-dark-color: #1F2379;
@secondary-color: #3086ED;
@dark-color: #000000;
@grey-color: #2C2C2C;
@placeholder-color: #8E8E8E;
@disable-color: #B3B3B3;
@muted-color: #EAEAEA;
@light-grey-color: #6E6E6E;
@light-color: #FFFFFF;
@table-color: #F5F5F5;
@default-color: #F9F9F9;
@light-blue: #F4F8F9;
@info-color: #095ABA;
@info-border-color: #2680EB;
@info-background-color: #F8FFFF;
@warning-color: #BD640D;
@warning-border-color: #E68619;
@warning-background-color: #FFFAF3;
@success-color: #107154;
@success-border-color: #2D9D78;
@success-background-color: #FCFFF5;
@danger-color: #BB121A;
@danger-border-color: #E34850;
@danger-background-color: #FFF6F6;
@dark-color: #000000;
@grey-color: #2C2C2C;
@placeholder-color: #8E8E8E;
@disable-color: #B3B3B3;
@muted-color: #EAEAEA;
@light-grey-color: #6E6E6E;
@light-color: #FFFFFF;
@table-color: #F5F5F5;
@default-color: #F9F9F9;
@light-blue: #F4F8F9;
@info-color: #095ABA;
@info-border-color: #2680EB;
@info-background-color: #F8FFFF;
@warning-color: #BD640D;
@warning-border-color: #E68619;
@warning-background-color: #FFFAF3;
@success-color: #107154;
@success-border-color: #2D9D78;
@success-background-color: #FCFFF5;
@danger-color: #BB121A;
@danger-border-color: #E34850;
@danger-background-color: #FFF6F6;
/* Explore */
@explore-color: #E96439;
@explore-light-color: #FF7A4E;
@explore-dark-color: #E96439;
/* Provide */
@provide-color: #37C7E9;
/* Monitor */
@monitor-color: #56A601;
@monitor-light-color: #8BCC00;
@monitor-dark-color: #228001;
/* Connect */
@connect-color: #FECA1D;
@connect-light-color: #FECA1D;
@connect-dark-color: #FE9F1D;
/* Graph */
@graph-color: #FA193E;
/* ORCID */
@orcid-color: #A6CE39;
/* Argos */
@argos-color: #17BEBB;
/* Explore */
@explore-color: #E96439;
@explore-light-color: #FF7A4E;
@explore-dark-color: #E96439;
/* Provide */
@provide-color: #37C7E9;
/* Monitor */
@monitor-color: #56A601;
@monitor-light-color: #8BCC00;
@monitor-dark-color: #228001;
/* Connect */
@connect-color: #FECA1D;
@connect-light-color: #FECA1D;
@connect-dark-color: #FE9F1D;
/* Graph */
@graph-color: #FA193E;
/* ORCID */
@orcid-color: #A6CE39;
/* Argos */
@argos-color: #17BEBB;

13
less/mixin.less Normal file
View File

@ -0,0 +1,13 @@
.set-blur-background(@color: @global-inverse-color, @opacity: 80%) {
.uk-blur-background {
background: fade(@color, @opacity + 15%);
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.uk-blur-background {
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background: fade(@color, @opacity);
}
}
}

2
less/modal.less
View File

@ -1,3 +1,5 @@
@modal-background: @global-overlay-background;
@modal-dialog-border-radius: @global-border-radius;
@modal-body-padding-horizontal: @global-medium-gutter;

2
less/navbar.less
View File

@ -5,7 +5,7 @@
@navbar-nav-item-font-size: @global-small-font-size;
@navbar-nav-item-font-weight: 600;
@navbar-nav-item-height: 65px;
@navbar-nav-item-height: @global-header-height;
@navbar-nav-item-color: @global-color;
@navbar-nav-item-hover-color: @global-secondary-background;
@navbar-nav-item-hover-text-decoration: none;

6
less/offcanvas.less
View File

@ -24,7 +24,11 @@
@offcanvas-close-position: 30px;
@offcanvas-overlay-background: fade(@global-color, 50%);
@offcanvas-overlay-background: @global-overlay-background;
.hook-offcanvas-bar() {
.set-blur-background(@offcanvas-bar-background);
}
.hook-offcanvas-misc() {

14
less/text.less
View File

@ -1,5 +1,7 @@
@text-xsmall-font-size: @global-xsmall-font-size;
@text-xsmall-line-height: 1.5;
@text-xsmall-line-height: @global-line-height;
@text-small-line-height: @global-line-height;
@text-large-line-height: @global-line-height;
/* Meta */
@text-meta-font-size: inherit;
@ -10,6 +12,9 @@
@text-background-gradient: @global-primary-gradient;
@text-background-color: @global-primary-background;
/* Light grey text*/
@text-light-grey: @light-grey-color;
.hook-text-background() {
background-image: @text-background-gradient;
}
@ -18,11 +23,12 @@
.uk-text-xsmall {
font-size: @text-xsmall-font-size;
line-height: @text-xsmall-line-height;
.hook-text-xsmall();
}
.uk-text-light-grey {
color: @text-light-grey;
}
}
.hook-text-xsmall() {};

4
less/variables.less
View File

@ -18,6 +18,7 @@
@global-muted-color: @disable-color;
@global-meta-color: @placeholder-color;
@global-link-hover-color: @secondary-color;
@global-overlay-background: fade(@dark-color, 60%);
/** Backgrounds */
@global-background: @default-color;
@ -52,6 +53,9 @@
@global-control-height: 40px;
@global-control-large-height: 50px;
/* Header */
@global-header-height: 65px;
/* Breakpoints */
@breakpoint-small: 481px;
@breakpoint-medium: 769px;