• Welcome to Tacoma3G.com, a free resource for 2016-2023 Toyota Tacoma owners!

    Tacoma3G is a beginner-friendly 3rd Generation Toyota Tacoma Forum (2016-2023 model-years). We are a community of people who are focused on good information and good vibes.

Code for Tyler

  • Thread starter Thread starter Tyler
  • Start date Start date
  • Replies Replies 0
  • Views Views 169

Tyler

🔟 Mythical
Badministrator
Volunteer T3G Editor
Disregard.

HTML:
@_nodeList-statsCellBreakpoint: 1000px;

.node
{
    & + .node
    {
        border-top: @xf-borderSize solid @xf-borderColorFaint;
    }
}

.node-body
{
    display: table;
    table-layout: fixed;
    width: 100%;
}

.node-icon
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 36px;
    padding-top: 15px;
    padding-left: 10px;

    i
    {
        display: block;
        line-height: 1.125;
        font-size: 22px;

        &:before
        {
            .m-faBase();

            color: @xf-nodeIconReadColor;

            .node--unread &
            {
                opacity: 1;
                color: @xf-nodeIconUnreadColor;
            }
        }

        .node--category &:before
        {
            .m-faContent(@fa-var-comments);
        }

        .node--search &::before
        {
            .m-faContent(@fa-var-search);
        }

        .node--page &:before
        {
            .m-faContent(@fa-var-file-alt);
        }

        .node--link &:before
        {
            .m-faContent(@fa-var-link);
        }
    }
}

.node-main
{
    display: table-cell;
    vertical-align: middle;
    padding: @xf-paddingLargest;
    padding-left: 5px;
}

.node-stats
{
    display: table-cell;
    width: 140px;
    vertical-align: middle;
    text-align: center;
    padding: @xf-paddingLarge 0;

    > dl.pairs.pairs--rows
    {
        width: 50%;
        float: left;
        margin: 0;
        padding: 0 @xf-paddingMedium/2;

        &:first-child
        {
            padding-left: 0;
        }

        &:last-child
        {
            padding-right: 0;
        }
    }

    &.node-stats--single
    {
        width: 100px;

        > dl.pairs.pairs--rows
        {
            width: 100%;
            float: none;
        }
    }

    &.node-stats--triple
    {
        width: 240px;

        > dl.pairs.pairs--rows
        {
            width: 33.333%;
        }
    }

    @media (max-width: @_nodeList-statsCellBreakpoint)
    {
        display: none;
    }
}

@_nodeExtra-avatarSize: 36px;

.node-extra
{
    display: table-cell;
    vertical-align: middle;
    width: 280px;
    padding: @xf-paddingLarge;

    font-size: @xf-fontSizeSmall;
}

.node-extra-row
{
    .m-overflowEllipsis();
    color: @xf-textColorMuted;
}

.node-extra-icon
{
    padding-right: @xf-paddingLarge;
    float: left;

    .avatar
    {
        .m-avatarSize(@_nodeExtra-avatarSize);
    }
}

.node-title
{
    margin: 0;
    padding: 0;
    font-size: @xf-fontSizeLarge;
    font-weight: @xf-fontWeightNormal;

    .node--unread &
    {
        font-weight: @xf-fontWeightHeavy;
    }
}

.node-description
{
    font-size: @xf-fontSizeSmall;
    color: fade(@xf-textColorDimmed, 60%);
    text-align: justify;
    padding-top: 5px;

    &.node-description--tooltip
    {
        .has-js:not(.has-touchevents) &
        {
            display: none;
        }
    }
}

.node-meta
{
    font-size: @xf-fontSizeSmall;
}

.node-statsMeta
{
    display: none;

    @media (max-width: @_nodeList-statsCellBreakpoint)
    {
        display: inline;
    }
}

.node-bonus
{
    font-size: @xf-fontSizeSmall;
    color: @xf-textColorMuted;
    text-align: right;
}

.node-subNodesFlat
{
    font-size: @xf-fontSizeSmall;
    margin-top: .3em;

    .node-subNodesLabel
    {
        display: none;
    }
}

.node-subNodeMenu
{
    display: inline;

    .menuTrigger
    {
        color: @xf-textColorMuted;
    }
}

@media (max-width: @xf-responsiveMedium)
{
    .node-main
    {
        display: block;
        width: auto;

        .node--link &,
        .node--page &
        {
            // #168882: we only display the title for these types
            // so keep these as table-cells for vertical alignment
            display: table-cell;
        }
    }

    .node-extra
    {
        display: block;
        width: auto;
        margin-left: -25px;
        // this gives an equivalent of medium padding between main and extra, with main still having large
        margin-top: (@xf-paddingMedium - @xf-paddingLarge);
        padding-top: 0;
    }

    .node-extra-row
    {
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
    }

    .node-extra-icon
    {
        display: none;
    }

    .node-description
    {
        font-size: 14px;
        margin-left: -25px;
        font-family: 'Avenir Next Condensed';
    }
    .node-stats,
    .node-subNodesFlat
    {
        margin-left: 0;
    }
}

/* @media (max-width: @xf-responsiveNarrow)
{
    .node-subNodeMenu
    {
        display: none;
    }
} */

.subNodeLink
{
    &:before
    {
        display: inline-block;
        .m-faBase();
        width: 1em;
        padding-right: .3em;
        text-decoration: none;

        color: @xf-nodeIconReadColor;
    }

    &:hover:before
    {
        text-decoration: none;
    }

    &.subNodeLink--unread
    {
        font-weight: @xf-fontWeightHeavy;

        &:before
        {
            color: @xf-nodeIconUnreadColor;
        }
    }

    &.subNodeLink--forum:before,
    &.subNodeLink--category:before
    {
        .m-faContent(@fa-var-caret-right);
    }

    &.subNodeLink--page:before
    {
        .m-faContent(@fa-var-file-alt);
    }

    &.subNodeLink--link:before
    {
        .m-faContent(@fa-var-link);
    }
}

.node-subNodeFlatList
{
    display: flex;
    flex-flow: row wrap;
    .m-listPlain();
    .m-clearFix();

    > li {
        width: 50%;
        justify-content: space-between;

        &:last-child
        {
            margin-right: 0;
        }
    }

    ol,
    ul,
    .node-subNodes
    {
        display: none;
    }
}

.subNodeMenu
{
    .m-listPlain();

    ol,
    ul
    {
        .m-listPlain();
    }

    .subNodeLink
    {
        display: block;
        padding: @xf-blockPaddingV @xf-blockPaddingH;
        text-decoration: none;
        cursor: pointer;

        &:hover
        {
            text-decoration: none;
            background: @xf-contentHighlightBg;
        }
    }

    li li .subNodeLink { padding-left: 1.5em; }
    li li li .subNodeLink { padding-left: 3em; }
    li li li li .subNodeLink { padding-left: 4.5em; }
    li li li li li .subNodeLink { padding-left: 6em; }
    li li li li li li .subNodeLink { padding-left: 7.5em; }
}
 
Back
Top