// What's New — Horizontal Independent Cards
.tabs.tabs--standalone {
background: none;
border: none;
box-shadow: none;
padding: 0;
margin-bottom: 24px;
.hScroller {
overflow: visible;
}
.hScroller-scroll {
display: flex;
flex-direction: row;
gap: 10px;
margin-bottom: 0 !important;
}
.hScroller-action {
display: none;
}
.tabs-tab {
padding: 12px 20px;
background: @xf-contentBg;
border: 1px solid @xf-borderColor;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
font-size: 13.5px;
font-weight: 500;
color: @xf-textColorMuted;
white-space: nowrap;
transition: all 0.2s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
color: @xf-paletteColor1;
border-color: fade(@xf-paletteColor1, 30%);
text-decoration: none;
}
&.is-active {
background: @xf-paletteColor1;
color: #fff;
border-color: @xf-paletteColor1;
box-shadow: 0 4px 14px fade(@xf-paletteColor1, 35%);
font-weight: 600;
}
}
}
@media (max-width: 600px) {
.tabs.tabs--standalone .hScroller-scroll {
flex-wrap: wrap;
}
}