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

Add new uikit js. Add pills alternative. Add shadows, width. Rename some variables to start with the file name

This commit is contained in:
Konstantinos Triantafyllou 2022-03-14 18:19:41 +02:00
parent d9750df104
commit de51fea2dd
12 changed files with 115 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
css/fonts.css
View File

@ -1,35 +1,4 @@
/*
!* Aileron *!
@font-face { font-family: "aileron"; font-style: italic; font-weight: 100; src: url("../media/fonts/aileron/aileron-thinitalic.eot"); src: url("../media/fonts/aileron/aileron-thinitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-thinitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-thinitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-thinitalic.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: normal; font-weight: 100; src: url("../media/fonts/aileron/aileron-thin.eot"); src: url("../media/fonts/aileron/aileron-thin.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-thin.woff2") format('woff2'), url("../media/fonts/aileron/aileron-thin.woff") format('woff'), url("../media/fonts/aileron/aileron-thin.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: italic; font-weight: 300; src: url("../media/fonts/aileron/aileron-lightitalic.eot"); src: url("../media/fonts/aileron/aileron-lightitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-lightitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-lightitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-lightitalic.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: normal; font-weight: 300; src: url("../media/fonts/aileron/aileron-light.eot"); src: url("../media/fonts/aileron/aileron-light.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-light.woff2") format('woff2'), url("../media/fonts/aileron/aileron-light.woff") format('woff'), url("../media/fonts/aileron/aileron-light.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: italic; font-weight: 400; src: url("../media/fonts/aileron/aileron-italic.eot"); src: url("../media/fonts/aileron/aileron-italic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-italic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-italic.woff") format('woff'), url("../media/fonts/aileron/aileron-italic.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: normal; font-weight: 400; src: url("../media/fonts/aileron/aileron-regular.eot"); src: url("../media/fonts/aileron/aileron-regular.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-regular.woff2") format('woff2'), url("../media/fonts/aileron/aileron-regular.woff") format('woff'), url("../media/fonts/aileron/aileron-regular.ttf") format('truetype'); }
!*
@font-face { font-family: "aileron"; font-style: italic; font-weight: 500; src: url("../media/fonts/aileron/aileron-mediumitalic.eot"); src: url("../media/fonts/aileron/aileron-mediumitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-mediumitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-mediumitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-mediumitalic.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: normal; font-weight: 500; src: url("../media/fonts/aileron/aileron-medium.eot"); src: url("../media/fonts/aileron/aileron-medium.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-medium.woff2") format('woff2'), url("../media/fonts/aileron/aileron-medium.woff") format('woff'), url("../media/fonts/aileron/aileron-medium.ttf") format('truetype'); }
*!
@font-face { font-family: "aileron"; font-style: italic; font-weight: 700; src: url("../media/fonts/aileron/aileron-bolditalic.eot"); src: url("../media/fonts/aileron/aileron-bolditalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-bolditalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-bolditalic.woff") format('woff'), url("../media/fonts/aileron/aileron-bolditalic.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: normal; font-weight: 700; src: url("../media/fonts/aileron/aileron-bold.eot"); src: url("../media/fonts/aileron/aileron-bold.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-bold.woff2") format('woff2'), url("../media/fonts/aileron/aileron-bold.woff") format('woff'), url("../media/fonts/aileron/aileron-bold.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: italic; font-weight: 900; src: url("../media/fonts/aileron/aileron-blackitalic.eot"); src: url("../media/fonts/aileron/aileron-blackitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-blackitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-blackitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-blackitalic.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: normal; font-weight: 900; src: url("../media/fonts/aileron/aileron-black.eot"); src: url("../media/fonts/aileron/aileron-black.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-black.woff2") format('woff2'), url("../media/fonts/aileron/aileron-black.woff") format('woff'), url("../media/fonts/aileron/aileron-black.ttf") format('truetype'); }
*/
/* Material Icons */
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400;
src: url("../media/fonts/material-icons/MaterialIcons-Regular.eot");
src: local('Material Icons'), local('MaterialIcons-Regular'),

4
css/import.css vendored
View File

@ -16,9 +16,11 @@
@import "structure/list.css";
@import "structure/navbar.css";
@import "structure/pill.css";
@import "structure/shadow.css";
@import "structure/slider.css";
@import "structure/text.css";
@import "structure/tab.css";
@import "structure/text.css";
@import "structure/width.css";
@import "openaire.css";

2
css/openaire.css
View File

@ -1,6 +1,6 @@
/* Overrides common to all dashboards*/
.graph {
--font-primary-color: var(--graph-color);
--text-primary-color: var(--graph-color);
}
.graph a {

24
css/structure/background.css
View File

@ -1,26 +1,26 @@
:root{
--primary-background: var(--primary-color);
--primary-background-image: linear-gradient(51deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%);
--primary-background-color: var(--light-color);
--secondary-background: var(--secondary-color);
--secondary-background-image: none;
--secondary-background-color: var(--light-color);
--background-primary: var(--primary-color);
--background-primary-image: linear-gradient(51deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%);
--background-primary-color: var(--light-color);
--background-secondary: var(--secondary-color);
--background-secondary-image: none;
--background-secondary-color: var(--light-color);
}
.uk-background-primary, .uk-section-primary {
background-color: var(--primary-background);
background-image: var(--primary-background-image);
background-color: var(--background-primary);
background-image: var(--background-primary-image);
}
.uk-background-primary, .uk-section-primary:not(.uk-preserve-color) {
color: var(--primary-background-color);
color: var(--background-primary-color);
}
.uk-background-secondary, .uk-section-secondary {
background-color: var(--secondary-background);
background-image: var(--secondary-background-image);
background-color: var(--background-secondary);
background-image: var(--background-secondary-image);
}
.uk-background-secondary, .uk-section-secondary:not(.uk-preserve-color) {
color: var(--secondary-background-color);
color: var(--background-secondary-color);
}

4
css/structure/navbar.css
View File

@ -6,8 +6,9 @@
--navbar-decoration-hover: none;
--navbar-color-active: var(--primary-color);
--navbar-decoration-active: none;
--navbar-height: 90px;
--navbar-height: 65px;
--navbar-shadow: 0px 3px 6px #0000001A;
--navbar-font-size: 14px;
}
navbar .uk-navbar-container {
@ -17,6 +18,7 @@ navbar .uk-navbar-container {
height: var(--navbar-height);
border-bottom: none !important;
box-shadow: var(--navbar-shadow);
font-size: 14px;
}
.uk-navbar-container .uk-logo {

56
css/structure/pill.css
View File

@ -1,5 +1,57 @@
:root {
/* Alternative Pills*/
--pill-alt-color: var(--grey-color);
--pill-alt-background: var(--secondary-color);
--pill-alt-color: var(--placeholder-color);
--pill-alt-background: var(--light-color);
--pill-alt-shadow: var(--shadow-main);
--pill-alt-color-hover: var(--secondary-color);
--pill-alt-background-active: none;
--pill-alt-background-active-image: linear-gradient(122deg, var(--primary-light-color) 0, var(--primary-dark-color) 100%);
--pill-alt-color-active: var(--light-color);
}
.uk-subnav-pill > .uk-active > a {
border: unset;
}
.uk-subnav-pill-alt {
background: var(--pill-alt-background);
border-radius: 56px;
box-shadow: var(--pill-alt-shadow);
padding: 4px;
}
.uk-subnav-pill-alt > * > :first-child {
padding: 10px 20px;
color: var(--pill-alt-color);
border-radius: 56px;
}
.uk-subnav.uk-subnav-pill-alt > :first-child {
padding-left: 0;
}
.uk-subnav-pill-alt > :hover > a {
color: var(--pill-alt-color-hover);
border-color: unset;
position: relative;
}
.uk-subnav-pill-alt > :hover > a:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--pill-alt-background-active);
background-image: var(--pill-alt-background-active-image);
opacity: 0.1;
border-radius: inherit;
}
.uk-subnav-pill-alt > .uk-active > a {
background-color: var(--pill-alt-background-active);
color: var(--pill-alt-color-active);
border-color: unset;
background-image: var(--pill-alt-background-active-image);
}

3
css/structure/shadow.css Normal file
View File

@ -0,0 +1,3 @@
:root {
--shadow-main: -15px -15px 20px rgb(255 255 255 / 30%), 15px 15px 20px rgb(0 0 0 / 10%);
}

12
css/structure/text.css
View File

@ -1,16 +1,16 @@
:root {
--font-default-color: var(--grey-color);
--font-primary-color: var(--primary-color);
--font-secondary-color: var(--secondary-color);
--font-gradient-color: none;
--text-default-color: var(--grey-color);
--text-primary-color: var(--primary-color);
--text-secondary-color: var(--secondary-color);
--text-gradient-color: none;
}
.uk-text-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-text-primary {
color: var(--font-primary-color) !important;
color: var(--text-primary-color) !important;
}
.uk-text-primary-gradient {
background: var(--font-gradient-color);
background: var(--text-gradient-color);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

29
css/structure/width.css Normal file
View File

@ -0,0 +1,29 @@
/** This class applies a width of 75px. */
.uk-width-xsmall {
width: 100px;
}
/**/
@media only screen and (min-width: 640px) {
.uk-width-xsmall\@s {
width: 100px;
}
}
@media only screen and (min-width: 960px) {
.uk-width-xsmall\@m {
width: 100px;
}
}
@media only screen and (min-width: 1200px) {
.uk-width-xsmall\@l {
width: 100px;
}
}
@media only screen and (min-width: 1600px) {
.uk-width-xsmall\@xl {
width: 100px;
}
}

4
css/theme.css
View File

File diff suppressed because one or more lines are too long

1
js/uikit-icons.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
js/uikit.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long