Nino Bravo

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

11 Dic 2021

#21

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

11 Dic 2021

#22

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

11 Dic 2021

#23

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

11 Dic 2021

#24

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

11 Dic 2021

#25

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

11 Dic 2021

#26

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#27

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#28

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#29

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#30

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#31

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#32

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#33

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#34

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#35

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

30 Ene 2022

#36

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

22 Jun 2022

#37

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

22 Jun 2022

#38

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

22 Jun 2022

#39

grindo doido

Cuenta Verificada

// Admin User groups banners styles .xentrBanner-List { display: flex; justify-content: flex-end; align-items: center; } .xentrBanner-Edit, .xentrBanner-Preview { display: inline-block; .userBanner { min-width: 165px; padding: @xf-paddingMedium @xf-paddingLarge @xf-paddingMedium 36px; margin: 0; display: flex; justify-content: end; align-items: center; } } .xentrBanner-Edit { float: right; } // Fist post message [message-layout="firstPost"], [message-layout="postHorizontal"] { .message { &.is-first { .message-userDetails { .userBanner { display: inline-block !important; } } } } } // XenTR Banner .userBanner { position: relative; padding: @xf-paddingSmall @xf-paddingMedium @xf-paddingSmall 36px; margin-top: @xf-paddingSmall !important; border-radius: @xf-borderRadiusMedium; text-align: right; strong { padding-left: @xf-paddingMedium; } .userBanner-before { position: absolute; left: 0; background: fade(@xf-paletteNeutral3, 35%); display: block; width: (@xf-elementSpacer + @xf-paddingLarge - 2); height: 100%; top: 0; } .userBanner-after:after { top: 50%; left: (@xf-elementSpacer + @xf-paddingLarge - 2); border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-width: 6px; margin: -6px 0 0 0; border-left-color: fade(@xf-paletteNeutral3, 35%) !important; } &.userBanner--1 { .m-userBannerVariation(hsl(39, 69%, 31%), rgb(255, 208, 0), rgb(255, 208, 0)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 208, 0), 20%) 0%, fade(rgb(255, 208, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 208, 0), 0%) 0%, fade(rgb(255, 208, 0), 10%) 50%, fade(rgb(255, 208, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 208, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(hsl(39, 69%, 31%), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-crown); } } &.userBanner--2 { .m-userBannerVariation(rgb(251, 251, 251), hsl(255, 68%, 56%), hsl(276, 38%, 52%)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(hsl(255, 68%, 56%), 20%) 0%, fade(hsl(255, 68%, 56%), 0%) 100%),linear-gradient(to right, fade(hsl(255, 68%, 56%), 0%) 0%, fade(hsl(255, 68%, 56%), 10%) 50%, fade(hsl(255, 68%, 56%), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(hsl(255, 68%, 56%), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(251, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-secret); } } &.userBanner--3 { .m-userBannerVariation(rgb(255, 255, 255), rgb(170, 96, 35), rgb(158, 93, 36)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 96, 35), 20%) 0%, fade(rgb(170, 96, 35), 0%) 100%),linear-gradient(to right, fade(rgb(170, 96, 35), 0%) 0%, fade(rgb(170, 96, 35), 10%) 50%, fade(rgb(170, 96, 35), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 96, 35), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-swords); } } &.userBanner--4 { .m-userBannerVariation(rgb(254, 254, 254), rgb(155, 155, 155), rgb(191, 191, 191)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(155, 155, 155), 20%) 0%, fade(rgb(155, 155, 155), 0%) 100%),linear-gradient(to right, fade(rgb(155, 155, 155), 0%) 0%, fade(rgb(155, 155, 155), 10%) 50%, fade(rgb(155, 155, 155), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(155, 155, 155), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wreath); } } &.userBanner--5 { .m-userBannerVariation(rgb(253, 251, 251), rgb(67, 149, 23), rgb(93, 159, 69)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(67, 149, 23), 20%) 0%, fade(rgb(67, 149, 23), 0%) 100%),linear-gradient(to right, fade(rgb(67, 149, 23), 0%) 0%, fade(rgb(67, 149, 23), 10%) 50%, fade(rgb(67, 149, 23), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(67, 149, 23), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(253, 251, 251), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-user-ninja); } } &.userBanner--6 { .m-userBannerVariation(rgb(255, 255, 255), rgb(105, 80, 80), rgb(222, 205, 190)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(105, 80, 80), 20%) 0%, fade(rgb(105, 80, 80), 0%) 100%),linear-gradient(to right, fade(rgb(105, 80, 80), 0%) 0%, fade(rgb(105, 80, 80), 10%) 50%, fade(rgb(105, 80, 80), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(105, 80, 80), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-diploma); } } &.userBanner--7 { .m-userBannerVariation(rgb(255, 255, 255), rgb(161, 206, 45), rgb(192, 230, 179)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(161, 206, 45), 20%) 0%, fade(rgb(161, 206, 45), 0%) 100%),linear-gradient(to right, fade(rgb(161, 206, 45), 0%) 0%, fade(rgb(161, 206, 45), 10%) 50%, fade(rgb(161, 206, 45), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(161, 206, 45), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-shield-check); } } &.userBanner--8 { .m-userBannerVariation(rgb(254, 254, 254), rgb(54, 228, 193), rgb(124, 207, 193)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(54, 228, 193), 20%) 0%, fade(rgb(54, 228, 193), 0%) 100%),linear-gradient(to right, fade(rgb(54, 228, 193), 0%) 0%, fade(rgb(54, 228, 193), 10%) 50%, fade(rgb(54, 228, 193), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(54, 228, 193), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-wine-glass-alt); } } &.userBanner--9 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 72, 0), rgb(207, 43, 43)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 72, 0), 20%) 0%, fade(rgb(255, 72, 0), 0%) 100%),linear-gradient(to right, fade(rgb(255, 72, 0), 0%) 0%, fade(rgb(255, 72, 0), 10%) 50%, fade(rgb(255, 72, 0), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 72, 0), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-tombstone); } } &.userBanner--10 { .m-userBannerVariation(rgb(255, 255, 255), rgb(255, 0, 123), rgb(255, 0, 123)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(255, 0, 123), 20%) 0%, fade(rgb(255, 0, 123), 0%) 100%),linear-gradient(to right, fade(rgb(255, 0, 123), 0%) 0%, fade(rgb(255, 0, 123), 10%) 50%, fade(rgb(255, 0, 123), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(255, 0, 123), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-trophy-alt); } } &.userBanner--11 { .m-userBannerVariation(rgb(254, 254, 254), rgb(0, 132, 255), rgb(0, 162, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(0, 132, 255), 20%) 0%, fade(rgb(0, 132, 255), 0%) 100%),linear-gradient(to right, fade(rgb(0, 132, 255), 0%) 0%, fade(rgb(0, 132, 255), 10%) 50%, fade(rgb(0, 132, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(0, 132, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 254, 254), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-robot); } } &.userBanner--12 { .m-userBannerVariation(rgb(254, 253, 253), rgb(170, 0, 255), rgb(149, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(170, 0, 255), 20%) 0%, fade(rgb(170, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(170, 0, 255), 0%) 0%, fade(rgb(170, 0, 255), 10%) 50%, fade(rgb(170, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(170, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(254, 253, 253), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } &.userBanner--13 { .m-userBannerVariation(rgb(255, 255, 255), rgb(98, 0, 255), rgb(111, 0, 255)); transition: ease-out 0.5s; background-image: linear-gradient(to bottom, fade(rgb(98, 0, 255), 20%) 0%, fade(rgb(98, 0, 255), 0%) 100%),linear-gradient(to right, fade(rgb(98, 0, 255), 0%) 0%, fade(rgb(98, 0, 255), 10%) 50%, fade(rgb(98, 0, 255), 0%) 100%) !important; &:hover { box-shadow: inset 0 0 0 300px xf-diminish(rgb(98, 0, 255), 7%); transition: ease-out 0.5s; color: xf-intensify(rgb(255, 255, 255), 7%); } &:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: @xf-fontSizeSmall; min-width: (@xf-elementSpacer + @xf-paddingLarge - 2); border-radius: 3px; .m-faIcon(@fa-var-duotone-magic); } } }

‎4 Years of Service‎

22 Jun 2022

#40

Nino Bravo

Similar threads