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

[develop | DONE | ADDED] create banner.less for openaire theme

This commit is contained in:
Alex Martzios 2024-05-21 12:12:20 +03:00
parent fe10d2e919
commit 3158f9ec0c
2 changed files with 97 additions and 0 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";

95
less/banner.less Normal file
View File

@ -0,0 +1,95 @@
@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-hover-color: @global-secondary-background;
@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;
}
&:hover a {
color: @banner-tab-item-hover-color;
}
&.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;
}