MajorDoMo

Код: Выделить всё

<style>
 @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

 .container {
  border-radius: 15px;
  border:1px solid #444;
  padding: 10px;
  //background-color:rgba(0, 0, 0, 0.3);
}
 
.left_top {
  float: right;
  font-size: 120%;
}
.left_top div {
  border-radius: 5px;
  border:1px solid #444;
  padding: 2px; 
  display:inline-block;
}
.name {
  font-size: 140%;
}
.devices {
  font-size: 200%;
  margin-bottom: 4px;
  padding-top: 4px;
}
.devices div{
 vertical-align:top;
 margin-right:6px;
 }
 .devices i{
 vertical-align:top;
 margin-right:6px;
 }
 .devices img{
 vertical-align:top;
 margin-right:6px;
 }
.time {
  font-size: 60%;
  color:grey;
}
 
//animations 
 .spiner {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
 
    z-index: 100;
}
 
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
   }
 }

 </style>
  <div class="container" style="background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.8)), url(%.background%);">
    <div class="left_top">
        <div style='display:%.temperature|"none;inline-block"%'><i class="fa fa-thermometer" aria-hidden="true"></i> %.temperature%°C</div>
        <div style='display:%.humidity|"none;inline-block"%'><i class="fa fa-tint" aria-hidden="true"></i> %.humidity%%</div>      </div>
    <div class="info">
      <div class="name">%.object_description%</div>
      <div class="devices">
       %.deviceString%
      </div>
      <div class="loc" style='display:%.RoomMsg|"none;block"%'><i class="fa fa-podcast" aria-hidden="true"></i> %.RoomMsg%</div>
      <div class="time" style='display:%.LatestActivityTime|"none;block"%'><i class="fa fa-refresh"></i> %.LatestActivityTime%</div>
    </div>
   <div style="clear:both;"></div>
  </div>