doodle-mini/miniprogram/pages/favorites/favorites.less

@import '../../style/theme.less';

@fav-seg-track: #f0e7d6;
@fav-thumb-placeholder: #e5dcc9;
@fav-secondary-cta-bg: #ffc697;
@fav-secondary-cta-text: #6d3b00;
@fav-heart: #b02500;

.fav-page {
    min-height: 100vh;
    background: @bg-page;
    box-sizing: border-box;
}


.fav-nav__clear {
    font-size: 26rpx;
    font-weight: 600;
    color: fade(@text-selected-btn, 65%);
    padding: 12rpx 20rpx;
    border-radius: 999rpx;
}

.fav-scroll {
    box-sizing: border-box;
    width: 100%;
}

.fav-body {
    padding: @section-gap-xs @page-padding-x;
    padding-bottom: calc(48rpx + env(safe-area-inset-bottom) + 120rpx);
    box-sizing: border-box;
}

/* Segmented（Stitch 胶囊） */
.fav-seg {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 12rpx;
    margin-bottom: @section-gap-sm;
    border-radius: 999rpx;
    background: @fav-seg-track;
    box-shadow: @shadow;
    box-sizing: border-box;
}

.fav-seg__pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22rpx 16rpx;
    border-radius: 999rpx;
    box-sizing: border-box;
}

.fav-seg__pill--active {
    background: @brand;
    box-shadow: @shadow;
}

.fav-seg__text {
    font-size: 26rpx;
    font-weight: 700;
    color: @text-secondary;
}

.fav-seg__pill--active .fav-seg__text {
    color: @text-selected-btn;
}

/* 收藏列表卡片 */
.fav-list {
    display: flex;
    flex-direction: column;
    gap: 32rpx;
}

.fav-card {
    border-radius: @radius-lg;
    box-sizing: border-box;
}

.fav-card--row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32rpx;
    padding: 32rpx;
    background: @bg-header;
    box-shadow: @shadow;
}

.fav-card__thumb {
    width: 160rpx;
    height: 160rpx;
    border-radius: @radius;
    flex-shrink: 0;
    background: @fav-thumb-placeholder;
}

.fav-card__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8rpx;
}

.fav-card__title {
    font-size: 32rpx;
    font-weight: 700;
    color: @text-title;
    line-height: 1.25;
}

.fav-card__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rpx;
}

.fav-card__meta-text {
    font-size: 22rpx;
    color: @text-secondary;
}

.fav-card__stars {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rpx;
}

.fav-card__badge {
    margin-top: 4rpx;
    font-size: 18rpx;
    font-weight: 600;
    color: @text-gray;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6rpx 16rpx;
    border-radius: 999rpx;
    background: @fav-seg-track;
}

.fav-card__heart {
    flex-shrink: 0;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Bento 大卡 */
.fav-card--bento {
    position: relative;
    overflow: hidden;
    padding: 48rpx 140rpx 48rpx 40rpx;
    background: @fav-seg-track;
    box-shadow: @shadow;
}

.fav-bento__content {
    position: relative;
    z-index: 1;
}

.fav-bento__title {
    font-size: 36rpx;
}

.fav-bento__meta {
    font-size: 26rpx;
    color: @text-secondary;
    margin-top: 8rpx;
    margin-bottom: 28rpx;
    line-height: 1.4;
}

.fav-bento__tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16rpx;
}

.fav-bento__tag {
    padding: 8rpx 22rpx;
    border-radius: 999rpx;
    font-size: 20rpx;
    font-weight: 700;
    color: @fav-secondary-cta-text;
    background: rgba(255, 255, 255, 0.55);
}

.fav-bento__deco {
    position: absolute;
    right: -40rpx;
    bottom: -48rpx;
    z-index: 0;
    pointer-events: none;
}

.fav-bento__heart {
    position: absolute;
    top: 40rpx;
    right: 32rpx;
    z-index: 2;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* 底部去发现 */
.fav-cta {
    margin-top: @section-gap;
    padding: 48rpx 0 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fav-cta__hint {
    font-size: 26rpx;
    font-weight: 600;
    color: @text-gray;
}

.fav-cta__btn {
    margin-top: 32rpx;
    padding: 22rpx 64rpx;
    border-radius: 999rpx;
    font-size: 26rpx;
    font-weight: 700;
    background: @fav-secondary-cta-bg !important;
    color: @fav-secondary-cta-text !important;
    border: none !important;
    box-shadow: @shadow;
}

.fav-cta__btn::after {
    border: none;
}

/* 下载历史 */
.fav-dl {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
}

.fav-dl__section-label {
    display: block;
    font-size: 22rpx;
    font-weight: 700;
    color: @text-gray;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8rpx 16rpx 16rpx;
}

.fav-dl__items {
    display: flex;
    flex-direction: column;
    gap: 32rpx;
    margin-bottom: 32rpx;
}

.fav-dl-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32rpx;
    padding: 32rpx;
    background: @bg-header;
    border-radius: @radius-lg;
    box-shadow: @shadow;
    box-sizing: border-box;
}

.fav-dl-row--muted {
    opacity: 0.92;
}

.fav-dl-row__thumb {
    width: 160rpx;
    height: 160rpx;
    border-radius: @radius;
    flex-shrink: 0;
    background: @fav-thumb-placeholder;
}

.fav-dl-row__thumb--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, @fav-secondary-cta-bg 0%, fade(@brand, 35%) 100%);
}

.fav-dl-row__main {
    flex: 1;
    min-width: 0;
}

.fav-dl-row__title {
    font-size: 32rpx;
    font-weight: 700;
    color: @text-title;
    line-height: 1.25;
    margin-bottom: 12rpx;
}

.fav-dl-row__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12rpx;
    font-size: 26rpx;
    color: fade(@text-secondary, 88%);
}

.fav-dl-row__time {
    color: fade(@text-secondary, 88%);
}

.fav-dl-row__dot {
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background: @text-gray;
    opacity: 0.45;
}

.fav-dl-row__status {
    color: fade(@text-secondary, 65%);
}

.fav-dl-row__status--hi {
    color: #006b1b;
    font-weight: 600;
}

.fav-dl-row__more {
    flex-shrink: 0;
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* 空状态 */
.fav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120rpx 32rpx 64rpx;
}

.fav-empty__emoji {
    font-size: 100rpx;
    margin-bottom: 24rpx;
}

.fav-empty__icon {
    margin-bottom: 24rpx;
}

.fav-empty__msg {
    font-size: 30rpx;
    font-weight: 600;
    color: @text-title;
    margin-bottom: 12rpx;
}

.fav-empty__sub {
    font-size: 26rpx;
    color: @text-secondary;
    margin-bottom: 40rpx;
    text-align: center;
}

.fav-empty__btn {
    padding: 20rpx 56rpx;
    border-radius: 999rpx;
    font-size: 28rpx;
    font-weight: 700;
    background: @brand;
    color: @text-selected-btn;
    border: none;
}

.fav-empty__btn::after {
    border: none;
}