<xf:css src="tqny.less" />
<div class="ist-anaalan"{{ widget_data($widget) }}>
<div class="ist-kutu">
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk1"><i class="fad fa-comment-lines"></i></div>
<p class="sayi">{$forumStatistics.threads|number}</p>
<span class="ist-bilgi">{{ phrase('threads') }}</span>
</div>
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk2"><i class="fad fa-comments"></i></div>
<p class="sayi">{$forumStatistics.messages|number}</p>
<span class="ist-bilgi">{{ phrase('messages') }}</span>
</div>
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk3"><i class="fad fa-users"></i></div>
<p class="sayi">{$forumStatistics.users|number}</p>
<span class="ist-bilgi">{{ phrase('members') }}</span>
</div>
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk4"><i class="fad fa-users-medical"></i></div>
<p><xf:username user="{$forumStatistics.latestUser}" /></p>
<span class="ist-bilgi">{{ phrase('latest_member') }}</span>
</div>
</div>
</div>
</div>

.ist-anaalan {
margin-top: 20px;
}
.ist-kutu {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 10px;
}
.ist-ic {
flex:25%;
}
.ist-detay {
background-color: #dedede;
box-shadow: 0px 5px 10px -4px rgba(0,0,0,0.29);
padding: 5px 20px 5px 5px;
text-align: center;
border-radius: 50px;
}
.fa-renk1 {
background-color: #22a720;
color: #c9c9c9;
}
.fa-renk2 {
background-color: #204492;
color: #c9c9c9;
}
.fa-renk3 {
background-color: #a2b509;
color: #c9c9c9;
}
.fa-renk4 {
background-color: #f2930d;
color: #c9c9c9;
}
.fa-icon {
font-size: 30px;
width: 50px;
height: 50px;
float: left;
line-height: 50px;
border-radius: 50px;
}
.ist-detay p {
color: #272727;
font-weight: 600;
font-size: 20px;
text-align: right;
padding: 0;
margin: 0;
}
.ist-anaalan .ist-kutu .ist-detay span {
color: #a02828;
text-align: right;
display: block;
}
@media (min-width: 900px){
.ist-anaalan .ist-kutu .ist-ic-bosluk:first-of-type,
.ist-anaalan .ist-kutu .ist-ic-bosluk:nth-child(2),
.ist-anaalan .ist-kutu .ist-ic-bosluk:nth-child(3)
{padding-right: 5px;}}
@media (max-width: 900px){
.ist-anaalan .ist-kutu .ist-ic-bosluk:first-of-type,
.ist-anaalan .ist-kutu
.ist-ic-bosluk:nth-child(3) {
padding-right: 5px;
}}
@media (max-width: 900px){
.ist-anaalan .ist-kutu .ist-ic {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 30px;
}}