Rooms
(custom)
<style>
@import url("/css/fontawesome-pro-5.2.0-web/css/all.css");
.container {
border-radius: 14px;
border:2px solid #444;
padding: 10px;
/*background-color:rgba(0, 0, 0, 0.3);*/
}
.left_top {
float: right;
font-size: 100%;
}
.left_top div {
border-radius: 4px;
border:1px solid #444;
padding: 1px;
display:inline-block;
}
.name {
font-size: 110%;
}
.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;
}
.bat {
float: right;
}
.time {
font-size: 60%;
color:grey;
padding-top: 4px;
}
//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:%Aqvarium.Temperature|"none;inline-block"%'><i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i> %Aqvarium.Temperature%°C</div>
<div style='display:%Aqvarium.Humidity|"none;inline-block"%'><i class="fa fa-tint" aria-hidden="true"></i> %Aqvarium.Humidity%%</div> </div>
<div class="info">
<div class="name"><font color="%Aqvarium.color%">%Aqvarium.Title%</font></div>
<div class="devices">
%Aqvarium.deviceString%%Aqvarium.deviceStringg%
</div>
<div class="bat" style='display:%Aqvarium.Battery|"none;block"%'><font color="%Aqvarium.batColor%"><i class="fas fa-battery-three-quarters"aria-hidden="true"></i></font> %Aqvarium.Battery%%</div>
<div class="loc" style='display:%Aqvarium.RoomMsg|"none;block"%'><i class="fa fa-podcast" aria-hidden="true"></i> %Aqvarium.RoomMsg%</div>
<div class="time" style='display:%Aqvarium.updatedTime|"none;block"%'><i class="fas fa-sync-alt"aria-hidden="true"></i> %Aqvarium.updatedTime%</div>
</div>
<div style="clear:both;"></div>
</div>
Rooms (copy)
(custom)
<style>
@import url("/css/fontawesome-pro-5.2.0-web/css/all.css");
.containert {
/* border-radius: 14px;*/
border:2px solid #444;
padding: 5px;
float: right;
/*background-color:rgba(0, 0, 0, 0.3);*/
}
.left_top {
float: right;
font-size: 100%;
}
.left_top div {
border-radius: 4px;
border:1px solid #444;
padding: 1px;
display:inline-block;
}
.name {
font-size: 110%;
}
.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="containert" style="background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.8)), url(%.background%);">
<div class="devices">
%Aqvarium.deviceString%
</div>
<div class="loc" style='display:%Aqvarium.RoomMsg|"none;block"%'><i class="fa fa-podcast" aria-hidden="true"></i> %Aqvarium.RoomMsg%</div>
<div class="time" style='display:%Aqvarium.updatedTime|"none;block"%'><i class="fas fa-sync-alt"aria-hidden="true"></i> %Aqvarium.updatedTime%</div>
<div style="clear:both;"></div>
</div>
<style>
@import url("/css/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css");
.containerg {
/* border-radius: 14px;*/
border:2px solid #444;
padding: 5px;
float: left;
/*background-color:rgba(0, 0, 0, 0.3);*/
}
.left_top {
float: right;
font-size: 100%;
}
.left_top div {
border-radius: 4px;
border:1px solid #444;
padding: 1px;
display:inline-block;
}
.name {
font-size: 110%;
}
.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="containerg" style="background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.8)), url(%.background%);">
<div class="devices">
%Aqvarium.deviceString%
</div>
<div class="loc" style='display:%Aqvarium.RoomMsg|"none;block"%'><i class="fa fa-podcast" aria-hidden="true"></i> %Aqvarium.RoomMsg%</div>
<div class="time" style='display:%Aqvarium.updatedTime|"none;block"%'><i class="fas fa-sync-alt"aria-hidden="true"></i> %Aqvarium.updatedTime%</div>
<div style="clear:both;"></div>
</div>
Прогноз погоды
(custom)
[#module name="app_openweather" forecast="0"#]
Real Feel %ow_fact.realFeel% °C