<style>
.cn-left .node-icon-svg, .cn-left .node-icon-fix {
width:{{ $xf.options.ucn_width_subforum }} !important;
}
.cn-left .node-icon-svg img{
height:{{ $xf.options.ucn_width_subforum }} !important;
}
.cn-left .node-icon {
padding:0px !important;
width:{{ $xf.options.ucn_width_subforum }} !important;
}
.cn-right {
padding-top: 5px;
}
.node-body img {
display: flex;
width: 150px;
}
.cn-left img {
display: inline-flex !important;
}
.node-icon-svg {
display: table-cell;
vertical-align: middle;
text-align: center;
width: {{ $xf.options.ucn_width }};
padding-top:5px;
flex-shrink: 0;
}
<xf:if is="{{ $xf.options.ucn_unread }}">
.node--read .node-icon-svg, .node--read .node-icon img, .custom-nodes .node-icon-svg, .custom-nodes .node-icon, .custom-nodes .node-icon-fix {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
</xf:if>
.custom-nodes {
display:flex;
align-items:center;
justify-content:start;
}
.custom-nodes .node-icon, .custom-nodes .node-icon-fix {
padding: 10px 0 10px 10px !important;
}
.custom-nodes .node-icon-fix i {
font-size:{{ $xf.options.ucn_width_subforum_font }};
}
.cn-left,
.cn-right {
display:inline-flex;
vertical-align:middle;
}
.cn-left .node-icon i {
font-size:16px;
}
.cn-right {
padding-left:10px;
}
.node-main-empty {
margin-left:1% !important;
padding-left: 1% !important;
}
.nd-icon img {
max-width:{{ $xf.options.ucn_width }} !important;
}
<xf:if is="{{ $xf.options.ucn_radius }}">
.node-icon-fix-verti img {border-radius:5px;}
</xf:if>
.node-icon-fix i:before {
font-family: 'Font Awesome 5 Pro';
font-size: inherit;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #d5eaf9;
}
.node--unread .node-icon-fix i:before {color:{{ $xf.options.ucn_unread_color|raw }} !important;}
.node-icon-fix i {
display: block;
line-height: 1.125;
font-size: 32px;
}
.node-icon-fix {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 46px;
padding: 10px 0 10px 10px;
}
.node-icon-fix-verti {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.node-body img {max-width:auto; <xf:if is="{{ $xf.options.ucn_radius }}">border-radius:5px;</xf:if> <xf:if is="{{ $xf.options.ucn_border }}">border:{{ $xf.options.ucn_border_width }} solid {{ $xf.options.ucn_border_color }};</xf:if>}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
</style>