95 lines
2.7 KiB
Plaintext
95 lines
2.7 KiB
Plaintext
@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: @irish-global-secondary-color;
|
|
@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%);
|
|
}
|
|
|
|
& 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-button {
|
|
background: @banner-tab-button-background;
|
|
border-radius: @banner-tab-button-border-radius;
|
|
|
|
&:hover {
|
|
background: fade(@banner-tab-button-background, 80%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.uk-banner.dark {
|
|
background: @background-secondary-background;
|
|
}
|