@logicflow/dumi-theme-simple
Version:
Simple website theme based on dumi2.
87 lines (76 loc) • 1.57 kB
CSS
.swiper {
width: 100%;
height: 100%;
background: #000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--swiper-navigation-color: #fff;
--swiper-pagination-color: #fff;
}
.swiper-slide {
font-size: 18px;
color: #fff;
width: 430px;
box-sizing: border-box;
padding: 40px 60px;
}
.parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
background-size: cover;
background-position: center;
}
.swiper-slide .title {
font-size: 41px;
font-weight: 300;
}
.swiper-slide .subtitle {
font-size: 21px;
margin-bottom: 2rem;
}
.swiper-slide .text {
font-size: 14px;
max-width: 400px;
line-height: 1.8;
color: #fafafa;
font-weight: 200;
}
.autoplay-progress {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 10;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: var(--swiper-theme-color);
}
.autoplay-progress svg {
--progress: 0;
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
stroke-width: 4px;
stroke: var(--swiper-theme-color);
fill: none;
stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
stroke-dasharray: 125.6;
transform: rotate(-90deg);
}
.swiper-slide-wrapper {
display: flex;
align-items: center;
width: 100%;
flex-direction: row;
justify-content: space-around;
}