feat(widgets): user minicards + term graphic cards/aggregation depth
User lists render author-minicard rows; term cards/aggregation consume aksrt_graphic_card with style-1..4, meta CTA, and orderby-aware post rows.
This commit is contained in:
@@ -1432,3 +1432,273 @@
|
||||
.aksrt-product-widget--oneline .aksrt-product-widget__grid {
|
||||
/* legacy flex fallback if swiper unavailable */
|
||||
}
|
||||
|
||||
/* ===== Batch13: oneline posts swiper-scroll + user minicards + term graphic ===== */
|
||||
|
||||
.widget-main-post.aksrt-oneline-posts {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.aksrt-oneline-swiper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0 28px 4px;
|
||||
}
|
||||
.aksrt-oneline-swiper .swiper-wrapper {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.aksrt-oneline-swiper .swiper-slide {
|
||||
width: auto;
|
||||
max-width: 46%;
|
||||
min-width: 160px;
|
||||
height: auto;
|
||||
}
|
||||
.widget-main-post.style-mini .aksrt-oneline-swiper .swiper-slide {
|
||||
max-width: 280px;
|
||||
min-width: 220px;
|
||||
}
|
||||
.widget-main-post.style-list .aksrt-oneline-swiper .swiper-slide {
|
||||
max-width: 320px;
|
||||
min-width: 240px;
|
||||
}
|
||||
.aksrt-oneline-swiper .posts-item,
|
||||
.aksrt-oneline-swiper .posts-mini {
|
||||
height: 100%;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
.aksrt-oneline-swiper .swiper-button-prev,
|
||||
.aksrt-oneline-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);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,.06);
|
||||
}
|
||||
.aksrt-oneline-swiper .swiper-button-prev:after,
|
||||
.aksrt-oneline-swiper .swiper-button-next:after {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.aksrt-oneline-swiper .swiper-button-prev { left: 0; }
|
||||
.aksrt-oneline-swiper .swiper-button-next { right: 0; }
|
||||
|
||||
/* User lists → author-minicard */
|
||||
.aksrt-user-lists .user_lists {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard {
|
||||
display: block;
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
overflow: hidden;
|
||||
}
|
||||
.aksrt-user-lists.is-bare .author-minicard {
|
||||
background: transparent;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard > ul.list-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard > ul.list-inline > li {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard .avatar-img img.avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard dl {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard dt.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard dd {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard .abs-blur-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
opacity: .18;
|
||||
pointer-events: none;
|
||||
}
|
||||
.aksrt-user-lists .author-minicard .abs-blur-bg img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: blur(18px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.aksrt-user-lists .author-minicard .relative {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Graphic card polish */
|
||||
.graphic {
|
||||
background: var(--surface-2, #f3f4f6);
|
||||
}
|
||||
.graphic .graphic-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.graphic .graphic-text,
|
||||
.graphic .abs-center {
|
||||
z-index: 2;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.graphic .title-h-center {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.graphic badge.b-black,
|
||||
.graphic .img-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0,0,0,.55);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.graphic video.fit-cover {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.hover-zoom-img .graphic img.fit-cover,
|
||||
.hover-zoom-img.graphic img.fit-cover {
|
||||
transition: transform .45s ease;
|
||||
}
|
||||
.hover-zoom-img:hover .graphic img.fit-cover,
|
||||
.hover-zoom-img.graphic:hover img.fit-cover {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
.aksrt-term-cards .row.gutters-5 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -4px;
|
||||
}
|
||||
.aksrt-term-cards .row.gutters-5 > [class*="col-"] {
|
||||
padding: 0 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.aksrt-term-cards .col-sm-12 { width: 100%; }
|
||||
.aksrt-term-cards .col-sm-6 { width: 50%; }
|
||||
.aksrt-term-cards .col-sm-4 { width: 33.333%; }
|
||||
.aksrt-term-cards .col-sm-3 { width: 25%; }
|
||||
.aksrt-term-cards .col-sm-2 { width: 16.666%; }
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-term-cards .col-xs-12 { width: 100%; }
|
||||
.aksrt-term-cards .col-xs-6 { width: 50%; }
|
||||
.aksrt-term-cards .col-xs-4 { width: 33.333%; }
|
||||
}
|
||||
|
||||
/* Term aggregation (zibll term-aggregation) */
|
||||
.term-aggregation.aksrt-term-agg__card,
|
||||
.zib-widget.term-aggregation {
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.aksrt-term-agg {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(var(--aksrt-ta-cols, 1), minmax(0, 1fr));
|
||||
}
|
||||
.term-aggregation .hover-zoom-img.flex {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
}
|
||||
.term-aggregation .term-img {
|
||||
width: 38%;
|
||||
max-width: 180px;
|
||||
min-width: 110px;
|
||||
}
|
||||
.term-aggregation .term-img .graphic {
|
||||
margin: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.term-aggregation .term-title {
|
||||
min-width: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.term-aggregation .term-title > a {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.term-aggregation .term-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.term-aggregation .icon-circle {
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.term-aggregation .icon-circle:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--theme-color, var(--focus-color, #f04494));
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.term-aggregation .but.c-blue {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
border-radius: 999px;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
background: rgba(59,130,246,.1);
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.aksrt-term-agg { grid-template-columns: 1fr; }
|
||||
.term-aggregation .term-img { max-width: 120px; min-width: 88px; width: 34%; }
|
||||
.term-aggregation .hide-sm { display: none !important; }
|
||||
.aksrt-oneline-swiper .swiper-slide { max-width: 72%; min-width: 140px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user