feat(widgets): announcement swiper, layout gap, partners/about polish
Announcement defaults to vertical new-swiper; gap supports PC/mobile heights; partners lazy+empty admin; about card uses identity name/bio.
This commit is contained in:
@@ -2009,3 +2009,211 @@ a.main-color > .icon-cover-card:hover,
|
||||
.widget_aksrt_icon_cards .col-xs-3,
|
||||
.widget_aksrt_icon_cover_cards .col-xs-3 { width: 25%; }
|
||||
}
|
||||
|
||||
/* ===== Batch16-18: highlights/combo/reviews/announcement/gap/pricing polish ===== */
|
||||
|
||||
.aksrt-highlights__row {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.aksrt-highlights__row.is-large { grid-template-columns: 1fr; }
|
||||
.aksrt-highlights__row.is-medium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.aksrt-highlights__row.is-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-highlights__row.is-medium,
|
||||
.aksrt-highlights__row.is-small { grid-template-columns: 1fr; }
|
||||
}
|
||||
.aksrt-hl-card {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
min-height: 120px;
|
||||
transition: transform .25s ease, box-shadow .25s ease;
|
||||
}
|
||||
.aksrt-hl-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,.06);
|
||||
}
|
||||
.aksrt-hl-card__media {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.aksrt-hl-card__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.aksrt-hl-card__body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
.aksrt-hl-card.color-blue { --hl: #3b82f6; }
|
||||
.aksrt-hl-card.color-pink { --hl: #ec4899; }
|
||||
.aksrt-hl-card.color-purple { --hl: #a855f7; }
|
||||
.aksrt-hl-card.color-green { --hl: #22c55e; }
|
||||
.aksrt-hl-card.color-orange { --hl: #f97316; }
|
||||
.aksrt-hl-card.color-cyan { --hl: #06b6d4; }
|
||||
.aksrt-hl-card__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--hl, #3b82f6) 16%, transparent);
|
||||
color: var(--hl, #3b82f6);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.aksrt-hl-card__title { font-weight: 700; font-size: 16px; }
|
||||
.aksrt-hl-card__desc { margin-top: 6px; font-size: 13px; color: var(--muted-2-color, #888); }
|
||||
|
||||
/* Combo row gutters */
|
||||
.aksrt-combo-info.row.gutters-10 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
.aksrt-combo-info.row.gutters-10 > [class*="col-"] {
|
||||
padding: 0 5px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.aksrt-combo-info .col-sm-12 { width: 100%; }
|
||||
.aksrt-combo-info .col-sm-6 { width: 50%; }
|
||||
.aksrt-combo-info .col-sm-4 { width: 33.333%; }
|
||||
.aksrt-combo-info .col-sm-3 { width: 25%; }
|
||||
.aksrt-combo-info .col-sm-2 { width: 16.666%; }
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-combo-info .col-xs-12 { width: 100%; }
|
||||
.aksrt-combo-info .col-xs-6 { width: 50%; }
|
||||
.aksrt-combo-info .col-xs-4 { width: 33.333%; }
|
||||
}
|
||||
|
||||
/* Reviews swiper */
|
||||
.aksrt-reviews-swiper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0 28px 4px;
|
||||
}
|
||||
.aksrt-reviews-swiper .swiper-slide {
|
||||
width: calc(100% / var(--aksrt-rev-pc, 3));
|
||||
max-width: 360px;
|
||||
height: auto;
|
||||
padding-right: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-reviews-swiper .swiper-slide {
|
||||
width: calc(100% / var(--aksrt-rev-m, 1.2));
|
||||
}
|
||||
}
|
||||
.aksrt-reviews__card {
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
background: var(--surface-1, #fff);
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.aksrt-reviews__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.aksrt-reviews__avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
background: var(--surface-2, #eee);
|
||||
}
|
||||
.aksrt-reviews__avatar.is-placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
.aksrt-reviews__name { font-weight: 700; }
|
||||
.aksrt-reviews__role { font-size: 12px; color: var(--muted-2-color, #888); }
|
||||
.aksrt-reviews__stars .fa-star.is-on { color: #f5b301; }
|
||||
.aksrt-reviews__stars .fa-star.is-off { color: #ddd; }
|
||||
.aksrt-reviews__content { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted-color, #555); }
|
||||
.aksrt-reviews__quote {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 10px;
|
||||
opacity: .12;
|
||||
font-size: 28px;
|
||||
}
|
||||
.aksrt-reviews-swiper .swiper-button-prev,
|
||||
.aksrt-reviews-swiper .swiper-button-next {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-top: 0;
|
||||
top: 42%;
|
||||
border-radius: 50%;
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
color: var(--color-ink, #111);
|
||||
}
|
||||
.aksrt-reviews-swiper .swiper-button-prev:after,
|
||||
.aksrt-reviews-swiper .swiper-button-next:after { font-size: 12px; font-weight: 700; }
|
||||
.aksrt-reviews-swiper .swiper-button-prev { left: 0; }
|
||||
.aksrt-reviews-swiper .swiper-button-next { right: 0; }
|
||||
|
||||
/* Announcement vertical swiper reuse notice styles */
|
||||
.aksrt-announcement-swiper-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
}
|
||||
.aksrt-announcement-swiper-wrap .aksrt-notice-swiper,
|
||||
.aksrt-announcement-swiper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.aksrt-announcement-swiper .notice-slide,
|
||||
.aksrt-announcement-swiper .swiper-slide {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.aksrt-announcement-swiper .text-ellipsis {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Layout gap responsive */
|
||||
.aksrt-layout-gap {
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-layout-gap {
|
||||
height: var(--aksrt-gap-m, 20px) !important;
|
||||
}
|
||||
}
|
||||
.widget-custom-html.is-full {
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user