94 lines
2.2 KiB
CSS
94 lines
2.2 KiB
CSS
.banner {
|
|
width: 100%;
|
|
--base_banner_height: 24px;
|
|
--banner_height: var(--base_banner_height); /*default*/
|
|
--base_dot_size: 4.2vw;
|
|
--dot_size: var(--base_dot_size); /*default*/
|
|
height: min(var(--dot_size), var(--banner_height));
|
|
|
|
background-image: url(../../docs/banners/banner_1.svg); /*default*/
|
|
background-size: contain;
|
|
background-repeat: repeat;
|
|
background-position-x: 0%;
|
|
|
|
animation-duration: 10s; /*default*/
|
|
animation-name: slide_svg;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
animation-direction: normal;
|
|
}
|
|
@keyframes slide_svg {
|
|
from {background-position-x: 0%;}
|
|
to {background-position-x: 100%;}
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* speeds
|
|
*
|
|
*/
|
|
.banner_pause {
|
|
animation-play-state: paused;
|
|
}
|
|
.banner_reverse {
|
|
animation-direction: reverse;
|
|
}
|
|
.banner_speed_10 {
|
|
animation-duration: 10s;
|
|
}
|
|
.banner_speed_20 {
|
|
animation-duration: 20s;
|
|
}
|
|
.banner_speed_30 {
|
|
animation-duration: 30s;
|
|
}
|
|
.banner_speed_40 {
|
|
animation-duration: 40s;
|
|
}
|
|
.banner_speed_50 {
|
|
animation-duration: 50s;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* sizes
|
|
*
|
|
*/
|
|
.banner_size_0 {
|
|
background-image: url(../../docs/banners/banner_0.svg);
|
|
--banner_height: calc(var(--base_banner_height) * 1);
|
|
--dot_size: calc(var(--base_dot_size) * 1);
|
|
}
|
|
.banner_size_00 {
|
|
background-image: url(../../docs/banners/banner_00.svg);
|
|
--banner_height: calc(var(--base_banner_height) * 1);
|
|
--dot_size: calc(var(--base_dot_size) * 1);
|
|
}
|
|
.banner_size_1 {
|
|
background-image: url(../../docs/banners/banner_1.svg);
|
|
--banner_height: calc(var(--base_banner_height) * 1);
|
|
--dot_size: calc(var(--base_dot_size) * 1);
|
|
}
|
|
.banner_size_2 {
|
|
background-image: url(../../docs/banners/banner_2.svg);
|
|
--banner_height: calc(var(--base_banner_height) * 2);
|
|
--dot_size: calc(var(--base_dot_size) * 2);
|
|
}
|
|
.banner_size_3 {
|
|
background-image: url(../../docs/banners/banner_3.svg);
|
|
--banner_height: calc(var(--base_banner_height) * 3);
|
|
--dot_size: calc(var(--base_dot_size) * 3);
|
|
}
|
|
.banner_size_4 {
|
|
background-image: url(../../docs/banners/banner_4.svg);
|
|
--banner_height: calc(var(--base_banner_height) * 4);
|
|
--dot_size: calc(var(--base_dot_size) * 4);
|
|
}
|
|
.banner_size_5 {
|
|
background-image: url(../../docs/banners/banner_5.svg);
|
|
--banner_height: calc(var(--base_banner_height) * 5);
|
|
--dot_size: calc(var(--base_dot_size) * 5);
|
|
}
|