Xf2 Modifikasyon Type of standard banners

guclusat

Tanınmış Üye
Süper Moderatör
Hatta varsayılan banner'ların görüntüsünü beğenmedim, ancak onlarla gruplar kurmak ve onları değiştirmeye çalışmak daha uygun görünüyordu.
Gerekli olmayan yerlerde görüntülenen kenarlık kaldırıldı, yazı tipi küçük şeyler için değişiklik yapıldı. App_user_banners.less şablonundakileri değiştir:

Kod:
.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);

    & when (iscolor(@border))
    {
        border-color: @border;
    }
}

.userBanner
{
    font-size: 75%;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 3px @xf-paddingMedium;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;

    strong
    {
        font-weight: inherit;
    }

    // variations
    &.userBanner--hidden
    {
        background: none;
        border: none;
        box-shadow: none;
    }

    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
    }

    &.userBanner--accent
    {
        .m-userBannerVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
    }

    &.userBanner--red { .m-userBannerVariation(white, #d80000, transparent); }
    &.userBanner--green { .m-userBannerVariation(white, green, transparent); }
    &.userBanner--olive { .m-userBannerVariation(white, olive, transparent); }
    &.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
    &.userBanner--blue { .m-userBannerVariation(white, #0008e3, transparent); }
    &.userBanner--royalBlue { .m-userBannerVariation(white, royalblue, transparent); }
    &.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0, transparent); }
    &.userBanner--gray { .m-userBannerVariation(white, gray, transparent); }
    &.userBanner--silver { .m-userBannerVariation(black, silver, transparent); }
    &.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
    &.userBanner--orange { .m-userBannerVariation(black, #ffcb00, transparent); }
}
 
Geri
Yukarı