nick7zmail писал(а): ↑Вс фев 04, 2018 4:59 pmПродолжаю издеваться над шаблоном класса для комнат.
Оказывается в предыдущей версии (там был класс blinker) не работало мерцание (планировалось использовать для датчика движения к примеру)....вот хоть убейте - всё равно не смог заставить его работать, по-этому пока убрал..."кручение" иконок при этом работает на ура, не знаю что за бред...
Так же добавил фон (соответственно свойство background, в которое вписан путь для картинки)....ну и немного подправлен css.
В общем теперь это выглядит как то так
class_template.jpg
Кстати на скрине видно, как выведены показания с датчиков помимо влажности и температуры (см. виджет Улица)...ток такой вариант придумал...если есть другие варианты - жду предложений)))
Шаблон класса roomsПоказатьКод: Выделить всё
<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>
А будет продолжение ,доработка? Конечный результат?