.porta-article-pager { margin-top: -(@xf-elementSpacer); }
.porta-article-loader { display: none; text-align: center; }
.porta-article-item
{
margin-bottom: @xf-elementSpacer;
.porta-article-header
{
display: block;
overflow: hidden;
position: relative;
.porta-header-image
{
background-size: cover;
height: @xf-EWRporta_header_height;
}
.porta-header-text
{
position: absolute; bottom: 0; left: 0; right: 0;
.xf-EWRporta_header_title;
>span
{
position: absolute; bottom: 0; left: 0; right: 0;
padding: 0 @xf-elementSpacer;
}
}
}
.porta-article-date
{
float: left;
padding: @xf-paddingLarge 0;
margin-left: @xf-EWRporta_dateblock_margin;
.porta-date-block
{
.xf-messageUserBlock;
width: 50px;
padding: 10px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
b { display: block; font-size: 1.5em; }
}
}
.message-inner { display: block; }
}
.porta-masonry
{
margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
.porta-article-item
{
display: inline-block;
width: ~"calc(100% / @xf-EWRporta_masonry_columns)";
.porta-article-container
{
margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
}
}
}
.porta-article-status
{
display: none;
.porta-article-ellipse
{
font-size: 20px;
position: relative;
width: 4em;
height: 1em;
margin: 10px auto;
.loader-ellipse-dot
{
display: block;
width: 1em;
height: 1em;
border-radius: 0.5em;
background: @xf-textColor;
position: absolute;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
.loader-ellipse-dot:nth-child(1),
.loader-ellipse-dot:nth-child(2) { left: 0; }
.loader-ellipse-dot:nth-child(3) { left: 1.5em; }
.loader-ellipse-dot:nth-child(4) { left: 3em; }
@keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } }
@keyframes slide { to { transform: translateX(1.5em) } }
.loader-ellipse-dot:nth-child(1) { animation-name: reveal; }
.loader-ellipse-dot:nth-child(2),
.loader-ellipse-dot:nth-child(3) { animation-name: slide; }
.loader-ellipse-dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
}
}
@media (max-width: @xf-responsiveWide)
{
.porta-masonry
{
.porta-article-item
{
width: ~"calc(100% / @xf-EWRporta_masonry_wide)";
}
}
}
@media (max-width: @xf-responsiveMedium)
{
.porta-masonry
{
margin: 0 -@xf-pageEdgeSpacer;
.porta-article-item
{
width: ~"calc(100% / @xf-EWRporta_masonry_medium)";
.porta-article-date
{
margin-left: -10px;
.porta-date-block
{
width: auto;
padding: 10px 5px;
transform: rotate(180deg);
writing-mode: vertical-rl;
b { display: inline; font-size: initial; }
}
}
}
}
}
@media (max-width: @xf-responsiveNarrow)
{
.porta-masonry
{
.porta-article-item
{
display: block;
width: 100%;
.porta-article-container
{
margin: 0;
}
.porta-article-date
{
display: none;
}
}
}
}