Скрипт вид материалов в колонку для uCoz

<div class="bemerka">
  <div class="bemerka-img p-img brighten">
  <div class="img-top"></div>
  <a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$"></a>  
  <div class="img-bottom"></div>
  </div>  
  <div class="bemerka-10">  
  <div class="bemerka-avtor-avatar bemerka-avtor-avatar2">
  <a href="$PROFILE_URL$"><img src="$AVATAR_URL$" alt="автор" title="автор"></a>
  </div>  
  <div class="bemerka-title-detali">
<div class="bemerka-title">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </div>  
  <div class="bemerka-detali">
  <span><i class="fa fa-calendar" aria-hidden="true"></i>$DATE$</span><span><i class="fa fa-clone" aria-hidden="true"></i>$CATEGORY_NAME$</span><span><i class="fa fa-comments" aria-hidden="true"></i>$COMMENTS_NUM$</span>
  </div>  
  </div>  
</div>  
  <div class="bemerka-text">
  $MESSAGE$
  </div>  
  <div class="bemerka-footer">
  <span>$MODER_PANEL_RIGHT$</span>
  <div class="right" title=""><a class="zornetumes" href="$COMMENTS_URL$">Комментировать</a></div>  
  </div>  
  </div>

#allEntries div[id*="entryID"]{margin:0 2% 20px 0;width: 100%;float:left;}
#allEntries div[id*="entryID"]:nth-child(2n){margin:0 0 20px 0;}
#allEntries div[id*="entryID"] {padding-bottom: 0px;margin-bottom:20px;}
@media only screen and (max-width: 940px) {
#allEntries div[id*="entryID"]{width:48%;margin: 0 4% 20px 0;}
#allEntries div[id*="entryID"]:nth-child(2n){margin: 0 0 20px 0 !important;}  
#allEntries div[id*="entryID"]:nth-child(2n){margin: 0 4% 20px 0;}

}
@media screen and (max-width: 640px) {
#allEntries div[id*="entryID"]{width:auto !important;margin: 0 0 20px 0 !important;float:none !important;}
}

.bemerka {background: #151313;border: 2px solid #696c73;border-radius: 5px;}
.bemerka-img {width: 100%;height: 257px;display: block;overflow: hidden;position: relative;box-shadow: 0px 9px 14px 0px rgba(216, 213, 213, 0.32), 0px 10px 30px 0px rgba(0, 0, 0, 0.67);}
.bemerka-img img {width: 100%;height: 257px;display: block;border-bottom: 2px solid rgba(154, 154, 154, 0.88);border-radius: 3px 3px 0px 0px;}
.p-img {display: block; }
.p-img:after {bottom: 0;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(249, 245, 245, 0);border-bottom-color: #484646;border-width: 10px;margin-left: -10px;}
.bemerka-10 {padding: 10px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;}
.bemerka-avtor-avatar { width: 50px; height: 50px; border-radius: 50%; display: table-cell;}  
.bemerka-avtor-avatar img {width: 50px;height: 50px;border-radius: 50%;box-shadow: 0px 0px 1px 2px rgba(99, 99, 99, 0.9);border: 1px solid #544f4f;}
.bemerka-title-detali {width: calc(100% - 65px);width: -webkit-calc(100% - 65px);line-height: 24px;padding: 3px 0 0 0;a{color: #fcfff9;}a{color: #fcfff9;}a{color: rgba(244, 255, 236, 0.82);}color: #f1f7ec;color: rgb(231, 236, 249);}
.bemerka-title a {font-size: 18px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;a{color: #fafff5;}a{color: #edefec;}color: #edf1eb;border-bottom: 7px solid #151313;}
.bemerka-detali {opacity: 0.9;}
.bemerka-detali span {font-size: 12px;}
.bemerka-detali span i {padding-right: 5px;}
.bemerka-detali > span + span { margin-left: 10px; }
.bemerka-text {lline-height: 20px;opacity: 0.8;margin-bottom: 15px;padding: 0 12px;height: 70px;overflow: hidden;text-align: justify;}
.bemerka-footer {padding: 9px 5px 45px 10px;border-top: 1px solid #444141;font-size: 25px;text-align: right;}
.bemerka-footer a {display: block;text-align: right;.right {float: right; }text-decoration: none;text-decoration: none;.h_downav_buttonsa: hover {background:#aba5a5;}.bemerka-footera: hover {background:#aba5a5;}}
.bemerka-footer a:hover {background:#5e6061;}
.bemerka-footer span {display: block; float: left;}
.img-top:before {display: block;content: '';position: absolute;height: 29%;width: 2px;background-color: rgba(167, 157, 157, 0.61);z-index: 2;margin-left: 9px;}
.img-top:after {display: block;content: '';position: absolute;height: 2px;width: 29%;background-color: rgba(175, 166, 166, 0.54);z-index: 2;margin-top: 9px;}
.img-bottom:before {display: block;content: '';position: absolute;height: 50%;width: 2px;background-color: rgba(119, 115, 115, 0.59);z-index: 2;right: 9px;top: 61%;}
.img-bottom:after {display: block;content: '';position: absolute;height: 2px;width: 29%;background-color: rgba(156, 146, 146, 0.5);z-index: 2;bottom: 9px;right: 0%;}

.zornetumes {text-shadow: black 0 0 1px;color:#d3fffb;text-align: center;display: block;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 5px;background: rgba(27, 142, 26, 0.94);color: #FFF;.bemerka-footera: hover {background:#5e6061;}text-shadow: 0 1px 0 #232121;padding: 4px 5px 5px 5px;font-size: 13px;border: 2px solid #a0a0a0;.bemerka-footera: hover {background:#5e6061;}.bemerka-footera: hover {background:#5e6061;}.bemerka-footera: hover {background:#5e6061;}.bemerka-footera: hover {background:#5e6061;}.bemerka-footera: hover {background:#5e6061;}}
.bemerka-footer a:hover {background:rgba(45, 177, 33, 0.95);}

.right {
  float: right;
  padding: 4px 5px 5px 5px;
}
.bemerka-title a {
  font-size: 21px;
  font-weight: bold;
  color: #cdf0ff;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: normal;
  margin: -1px 0;
}  
.bemerka-title a:hover {
  color: #90c8e8;
}

.brighten img {
-webkit-filter: brightness(100%);
-webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.13, 1.24);
-moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.13, 1.38);
-o-transition: all 1s cubic-bezier(0.25, 0.1, 0, 1.08);
-ms-transition: all 1s cubic-bezier(0.25, 0.1, 0, 1.32);
transition: all 1s cubic-bezier(0.25, 0.1, 0.07, 1.36);}
.brighten img:hover {
-webkit-filter: brightness(60%);}