polished template

This commit is contained in:
GP_DEV
2025-06-19 14:18:56 +03:00
parent f8688ae00b
commit a6bb81cbe1
13 changed files with 677 additions and 259 deletions

View File

@@ -1,26 +1,34 @@
.inverted-radius-wrapper:before {
content: '';
display: block;
width: 40px;
height: 25px;
background-color: transparent;
border-radius: 0 0 0 25px;
box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9;
position: absolute;
z-index: -1;
left: -1px;
bottom: 100%;
.pagination-item[data-active="true"] {
flex: 2;
}
.inverted-radius-wrapper:after {
content: '';
display: block;
width: 40px;
height: 25px;
background-color: transparent;
border-radius: 0 0 0 25px;
box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9;
position: absolute;
z-index: -1;
left: calc(100% - 1px);
bottom: 0;
.pagination-item[data-active="false"] .pagination-line {
background: #e0e0e0;
}
.pagination-item[data-active="true"] .pagination-line {
background: #222;
}
.dark .pagination-item[data-active="false"] .pagination-line {
background: rgba(248, 248, 248, 0.15);
}
.dark .pagination-item[data-active="true"] .pagination-line {
background: linear-gradient(90deg, rgba(250, 248, 245, 0.7) 0%, rgba(250, 248, 245, 0.7) 100%);
}
.pagination-item[data-active="true"] .slide-text {
opacity: 1;
}
.inverted-radius{
-webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20648%20575%22%3E%3Cpath%20d%3D%22M0%2C0H648A0%2C0%200%2C0%2C1%20648%2C0V575A0%2C0%200%2C0%2C1%20648%2C575H130A20%2C20%200%2C0%2C1%20110%2C555L110%2C535A20%2C20%200%2C0%2C0%2090%2C515L20%2C515A20%2C20%200%2C0%2C1%200%2C495V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20648%20575%22%3E%3Cpath%20d%3D%22M0%2C0H648A0%2C0%200%2C0%2C1%20648%2C0V575A0%2C0%200%2C0%2C1%20648%2C575H130A20%2C20%200%2C0%2C1%20110%2C555L110%2C535A20%2C20%200%2C0%2C0%2090%2C515L20%2C515A20%2C20%200%2C0%2C1%200%2C495V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
width: 648px;
background-color: #ffffff;
aspect-ratio: 648 / 575;
}
.radient-bg {
background: linear-gradient(180deg, #f9f9f9 69.59%, #ededed 100%);
}