Главная сцена "Кавер-версия"

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Ответить
serenkyby
Сообщения: 19
Зарегистрирован: Сб сен 07, 2019 10:52 am
Благодарил (а): 7 раз
Поблагодарили: 1 раз

Re: Главная сцена "Кавер-версия"

Сообщение serenkyby » Пт сен 20, 2019 8:37 pm

В фиолетовом цвете красиво смотрится. Можете выложить файлы для повторения?
Вернуться к началу
Sergey.Chek
Сообщения: 107
Зарегистрирован: Ср фев 13, 2019 9:50 pm
Благодарил (а): 219 раз
Поблагодарили: 19 раз

Re: Главная сцена "Кавер-версия"

Сообщение Sergey.Chek » Чт окт 10, 2019 12:36 am

serenkyby писал(а): ↑
Пт сен 20, 2019 8:37 pm
 Можете выложить файлы для повторения?
Поддерживаю. И для сцены, и для меню.
Raspberry pi 4
Вернуться к началу
ahelper
Сообщения: 106
Зарегистрирован: Ср фев 08, 2017 5:04 pm
Благодарил (а): 34 раза
Поблагодарили: 67 раз

Re: Главная сцена "Кавер-версия"

Сообщение ahelper » Чт окт 10, 2019 8:38 am

Sergey.Chek писал(а): ↑
Чт окт 10, 2019 12:36 am
serenkyby писал(а): ↑
Пт сен 20, 2019 8:37 pm
 Можете выложить файлы для повторения?
Поддерживаю. И для сцены, и для меню.
Меню здесь https://connect.smartliving.ru/profile/1594/menu.html
За это сообщение автора ahelper поблагодарил:
Sergey.Chek (Чт окт 10, 2019 8:57 am)
Рейтинг: 1.16%
Вернуться к началу
ahelper
Сообщения: 106
Зарегистрирован: Ср фев 08, 2017 5:04 pm
Благодарил (а): 34 раза
Поблагодарили: 67 раз

Re: Главная сцена "Кавер-версия"

Сообщение ahelper » Пн окт 14, 2019 10:15 pm

Если у вас кнопки не соответствуют размерам, то есть элемент в сцене "general_CSS (only CSS)". В нем можно подправить вид. Вот мой последний вариант, можно сравнить и поэкпериментировать

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

/*@import url("/css/font-awesome/css/font-awesome.min.css");*/
@import url("/css/fontello/css/fontello.min.css");
@font-face {
font-family:"S7";
src:url("../../templates_alt/imm/fonts/S7.ttf") format("truetype");
font-style:normal;
}

/* -----------------------------------------------------------------------*/
/* ОБЩЕЕ СОБРАНИЕ КОДА ДЛЯ АНИМАЦИИ */
/* -----------------------------------------------------------------------*/
.element_7 { animation: fortime 1s ease-out; } /* - блок времени */

.element_8 { animation: forweather 1.6s ease-out; } /* - блок погоды */
.element_15  { animation: forweather 1.6s ease-out; }  /*  - блок - Pressure */
.element_130 { animation: forweather 1.6s ease-out; } /* - блок Humidity */

.element_12 { animation: forweather 1.4s ease-out; } /* - блок STATUS SYSTEM  */

.element_148 { animation: forshowing 1.6s ease-out; } /* - блок отображения - Security */
.element_149 { animation: forshowing 1.5s ease-out; } /* - блок отображения - Lobby */
.element_150 { animation: forshowing 1.4s ease-out; } /* - блок отображения - Bathroom */
.element_151 { animation: forshowing 2.1s ease-out; } /* - блок отображения - Cooler */
.element_152 { animation: forshowing 2.0s ease-out; } /* - блок отображения - Hall */
.element_153 { animation: forshowing 1.3s ease-out; } /* - блок отображения - Livingroom */
.element_161 { animation: forshowing 1.2s ease-out; } /* - блок отображения - Bedroom */
.element_164 { animation: forshowing 1.9s ease-out; } /* - блок отображения - Bedroom Air */
.element_165 { animation: forshowing 1.8s ease-out; } /* - блок отображения - Kitchen Air */
.element_166 { animation: forshowing 1.1s ease-out; } /* - блок отображения - Kitchen */
.element_163 { animation: forshowing 1.0s ease-out; } /* - блок отображения - Kinderroom */
.element_167 { animation: forshowing 1.7s ease-out; } /* - блок отображения - Storeroom */
.element_168 { animation: forshowing 2.2s ease-out; } /* - блок отображения - IP */
.element_18 { animation: forshowing 1.1s ease-out; } /* - блок отображения - panel-showing3 */
.element_19 { animation: forshowing 1s ease-out; } /* - блок отображения - panel-showing4 */

.element_9 {animation: forlog 1.2s ease-out; } /* - ,блок отображения - log_alice */

.element_27  { animation: forfunctions 1s ease-out; }  /*  - блок - panel-functions1 */
.element_28  { animation: forfunctions 1.6s ease-out; } /*  - блок - panel-functions2 */
.element_29  { animation: forfunctions 1.1s ease-out; } /*  - блок - panel-functions3 */
.element_30  { animation: forfunctions 1.4s ease-out; } /*  - блок - panel-functions4 */
.element_114  { animation: forfunctions 1.3s ease-out; } /*  - блок - panel-functions5 */
.element_32  { animation: forfunctions 1.5s ease-out; } /*  - блок - panel-functions6 */
.element_31  { animation: forfunctions 1.2s ease-out; } /*  - блок - panel-functions7 */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------*/
/* контейнер - log_alice */ 
/* -----------------------------------------------------------------------*/
 .element_9 {
//background-color: rgba(0, 40, 40, 0.4);
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px;
border-radius: 10px 0px 0px 10px;
padding: 10px;
}
/* -----------------------------------------------------------------------*/
/* контейнер - status_system_icons */ 
/* -----------------------------------------------------------------------*/
.element_12 {
//background-color: rgba(0, 40, 40, 0.4);
border: 1px solid rgba(0, 233, 233, 0.6);
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px;
border-radius: 10px 0px 0px 10px;
padding: 2px;
}
/* -----------------------------------------------------------------------*/
/*  контейнер - temp_home_1_floor и humidity_home_1_floor */ 
/* -----------------------------------------------------------------------*/
.element_25,
.element_26 {
display: table;
}
.element_109 .fa,
.element_109 .texttemp,
.element_140 .fa,
.element_140 .texttemp
 {
        display: table-cell;
        font-size: 28px;
       /* font-weight: bold;*/
        line-height: 1;
        padding: 0 5px 0 0;
}
/* -----------------------------------------------------------------------*/
/* панель погоды  */
/* -----------------------------------------------------------------------*/
.panel-weather {
 box-sizing: border-box;
 color: white;
 //background-color: rgba(0, 40, 40, 0.4);
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);

/* выше общее */
 position: absolute;
 top: 0px;
/* right: 0px;*/
  width: 538px;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 10px 0px 0px 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px 0px 0px 10px;
}
.panel-weather .location_up {
//background-color: rgba(0, 233, 233,0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
  font-family: arial;
  font-weight: 100;
  -moz-border-radius: 10px 0px 0px 0px;
  -webkit-border-radius: 10px;
  border-radius: 10px 0px 0px 0px;
}
.panel-weather .location_down {
//background-color: rgba(0, 233, 233,0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
  font-family: arial;
  font-weight: 100;
  margin: 0 0 5px 0;
  -moz-border-radius: 0px 0px 0px 10px;
  -webkit-border-radius: 10px;
  border-radius: 0px 0px 0px 10px;
}

.panel-weather img {
  width: 150px;
  float: left;
  margin: 0 0 0 2em;
  //position: center;
  //margin: 0;
}
.panel-weather .temp-weather {
  font-family: arial;
  font-weight: 600;
  display: inline-block;
  vertical-align: top;
  font-size: 140px;
  line-height: 1.1;
}
.panel-weather .temp-weather .degree {
 font-family: arial;
 font-weight: 600;
  font-size: 32px;
  line-height: 1.4;
  vertical-align: top;
}
.panel-weather .text-weather {
 font-family: arial;
 font-weight: 200;
  font-size: 22px;
  line-height: 1.4;
 margin: 0;
}

/* -----------------------------------------------------------------------*/
/* панель времени  */
/* -----------------------------------------------------------------------*/
.panel-time {
 box-sizing: border-box;
 color: White;
 //background-color: rgba(0, 40, 40, 0.4);
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);

/* выше общее */
 position: absolute;
 top: 0px;
 width: 538px;
 -moz-border-radius: 0px 10px 10px 0px;
 -webkit-border-radius: 0px;
 border-radius: 0px 10px 10px 0px;
 /* animation: fortime 1s ease-out;*/
}
.panel-time .time {
 font-size: 140px;
 line-height: 1.1;
 text-align: center;
 font-family: arial;
 font-weight: 600;
}
.panel-time .time .blnk {
 font-size: 140px;
 line-height: 1.1;
 text-align: center;
 font-family: arial;
 font-weight: 600;
animation: blink 1s ease infinite;
}
.panel-time .date_up {
  //background-color: rgba(0, 233, 233, 0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
 font-family: arial;
 font-weight: 100;
  -moz-border-radius: 0px 10px 0px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 10px 0px 0px;
}
.panel-time .date_down {
 // background-color: rgba(0, 233, 233, 0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
  font-family: arial;
  font-weight: 100;
  margin: 0 0 5px 0;
  -moz-border-radius: 0px 0px 10px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 10px 0px;
}

/* -----------------------------------------------------------------------*/
/* блоки отображения данных  */
/* -----------------------------------------------------------------------*/
.panel-showing1,
.panel-showing2,
.panel-showing3,
.panel-showing4  {
 box-sizing: border-box;
 color: white;
 //background-color: rgba(0, 0, 0, 0.4);
 /* text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); */
  position: absolute;
  width: 538px;
  overflow: hidden;
  cursor: pointer;
  background-color: initial;
}
.panel-showing1 ul,
.panel-showing2 ul,
.panel-showing3 ul,
.panel-showing4 ul {
  padding: 0;
}
.panel-showing1 ul li,
.panel-showing2 ul li,
.panel-showing3 ul li,
.panel-showing4 ul li {
  padding: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.panel-showing1 ul li .sense_snowing_1, 
.panel-showing1 ul li .title, 
.panel-showing1 ul li .sense_snowing_0,
.panel-showing2 ul li .sense_snowing_1, 
.panel-showing2 ul li .title, 
.panel-showing2 ul li .sense_snowing_0,
.panel-showing3 ul li .sense_snowing_1, 
.panel-showing3 ul li .title, 
.panel-showing3 ul li .sense_snowing_0,
.panel-showing4 ul li .sense_snowing_1, 
.panel-showing4 ul li .title, 
.panel-showing4 ul li .sense_snowing_0 {
  display: inline-block;
  font-size: 20px;
  line-height: 1.6;
  padding: 3px 8px;
 font-family: monospace;
 font-weight: lighter;
}
.panel-showing1 ul li .sense_snowing_1,
.panel-showing2 ul li .sense_snowing_1,
.panel-showing3 ul li .sense_snowing_1,
.panel-showing4 ul li .sense_snowing_1 {
  float: right;
  width: 180px;
  text-align: center;
  font-family: monospace;
  font-weight: lighter;
  background-color: rgba(0, 233, 233, 0.6);
  color: white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.panel-showing1 ul li .sense_snowing_0,
.panel-showing2 ul li .sense_snowing_0,
.panel-showing3 ul li .sense_snowing_0,
.panel-showing4 ul li .sense_snowing_0 {
  float: right;
  width: 180px;
  text-align: center;
  font-family: monospace;
  font-weight: lighter;
  background-color: rgba(255, 0, 50, 0.7);
   color: white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.left,
.right {
    font-family: S7;
 font-weight: normal;
 line-height: 1;
 //margin: 0 0 0 10em;
   }
/* -----------------------------------------------------------------------*/
/* блоки кнопок функций */
/* -----------------------------------------------------------------------*/
.panel-functions {
 box-sizing: border-box;
 color: white;
 /* background-color: rgba(0, 0, 0, 0.4); */
 /* text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); */
 position: absolute;
  width: 100%;
  bottom: 0px;
  padding: 0px;
  align-items: center;
  justify-content: space-around;
}
.panel-functions .icon {
  margin: 0;
  width: 106px;
  height: 106px;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  background-color: rgba(0, 40, 40, 0.4);
  border: 1px solid rgba(0, 233, 233, 0.6);
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.panel-functions .icon .fa {
 margin: 7px 0px 0px 0px;
 font-size: 70px;
}
.panel-functions .icon .title {
  font-size: 8px;
  text-align: center;
  text-transform: uppercase;
  /* display: none; */
}
/* -----------------------------------------------------------------*/
.b1 {
      width:70px;
      height:68px;
      padding-top: 3px;
      border: 1px solid rgba(0, 233, 233, 0.6);
      background-color: rgba(0, 233, 233, 0.6);
 background: -webkit-linear-gradient(rgba(0, 233, 233, 0), rgba(0, 233, 233, 0.7));
  background: linear-gradient(rgba(0, 233, 233, 0), rgba(0, 233, 233, 0.7));
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
box-shadow: inset 0px 0px 0px #2ab7ec, 0px 0px 0px 0px #6E0707, 0px 0px 10px #FD004D;
      text-align: center;
      color:white;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

.b2 {
      width:148px;
      height:68px;
      padding-top: 3px;
      border: 1px solid rgba(0, 233, 233, 0.6);
      background-color: rgba(0, 40, 40, 0.6);
background: -webkit-linear-gradient(rgba(0, 40, 40, 0.2), rgba(0, 40, 40, 0.7));
  background: linear-gradient(rgba(0, 40, 40, 0.2), rgba(0, 40, 40, 0.7));
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
     text-align: center;
      color:white;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

.br {
      width:70px;
      height:68px;
      padding-top: 3px;
      border: 1px solid rgba(0, 233, 233, 0.6);
      background-color: rgba(0, 40, 40, 0.6);
background: -webkit-linear-gradient(rgba(0, 40, 40, 0.2), rgba(0, 40, 40, 0.7));
  background: linear-gradient(rgba(0, 40, 40, 0.2), rgba(0, 40, 40, 0.7));
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
      text-align: center;
      color:white;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

.b1 img {
     margin-left: 17px;
     margin-top:1px;
}

.b1_in {
     margin-top: 1px;
     text-align: center;
-webkit-animation: pulsate 0.5s linear infinite;
  animation: pulsate 0.5s linear infinite;
}

.b2_in {
     margin-top: 3px;
color: #000
text-shadow: 0 1px 1px rgba(255,255,255,.35);
     text-align: center;
     font-size: 20px;
}
.br_in {
     margin-top: 1px;
color: #000
text-shadow: 0 1px 1px rgba(255,255,255,.35);
     text-align: center;
}
.br img {
     margin-left: 17px;
     margin-top:1px;
}
/*-------------------------------------------------------------------*/
/*карта анимации пульсации текста*/
@-webkit-keyframes pulsate 
{
  0%   { color: #f00d0d; text-shadow: 0 -1px 0 #f00d0d; }
  50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
  100% { color: #f00d0d; text-shadow: 0 -1px 0 #f00d0d; }
}
     
@keyframes pulsate
{
  0%   { color:#f00d0d; text-shadow: 0 -1px 0 #f00d0d; }
  50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
  100% { color: #f00d0d; text-shadow: 0 -1px 0 #f00d0d; }
}
За это сообщение автора ahelper поблагодарил:
Sergey.Chek (Пн окт 14, 2019 10:46 pm)
Рейтинг: 1.16%
Вернуться к началу
Sergey.Chek
Сообщения: 107
Зарегистрирован: Ср фев 13, 2019 9:50 pm
Благодарил (а): 219 раз
Поблагодарили: 19 раз

Re: Главная сцена "Кавер-версия"

Сообщение Sergey.Chek » Сб окт 19, 2019 10:17 pm

ahelper писал(а): ↑
Пн окт 14, 2019 10:15 pm
 Если у вас кнопки не соответствуют размерам, то есть элемент в сцене "general_CSS (only CSS)". В нем можно подправить вид. Вот мой последний вариант, можно сравнить и поэкпериментировать

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

/*@import url("/css/font-awesome/css/font-awesome.min.css");*/
@import url("/css/fontello/css/fontello.min.css");
@font-face {
font-family:"S7";
src:url("../../templates_alt/imm/fonts/S7.ttf") format("truetype");
font-style:normal;
}

/* -----------------------------------------------------------------------*/
/* ОБЩЕЕ СОБРАНИЕ КОДА ДЛЯ АНИМАЦИИ */
/* -----------------------------------------------------------------------*/
.element_7 { animation: fortime 1s ease-out; } /* - блок времени */

.element_8 { animation: forweather 1.6s ease-out; } /* - блок погоды */
.element_15  { animation: forweather 1.6s ease-out; }  /*  - блок - Pressure */
.element_130 { animation: forweather 1.6s ease-out; } /* - блок Humidity */

.element_12 { animation: forweather 1.4s ease-out; } /* - блок STATUS SYSTEM  */

.element_148 { animation: forshowing 1.6s ease-out; } /* - блок отображения - Security */
.element_149 { animation: forshowing 1.5s ease-out; } /* - блок отображения - Lobby */
.element_150 { animation: forshowing 1.4s ease-out; } /* - блок отображения - Bathroom */
.element_151 { animation: forshowing 2.1s ease-out; } /* - блок отображения - Cooler */
.element_152 { animation: forshowing 2.0s ease-out; } /* - блок отображения - Hall */
.element_153 { animation: forshowing 1.3s ease-out; } /* - блок отображения - Livingroom */
.element_161 { animation: forshowing 1.2s ease-out; } /* - блок отображения - Bedroom */
.element_164 { animation: forshowing 1.9s ease-out; } /* - блок отображения - Bedroom Air */
.element_165 { animation: forshowing 1.8s ease-out; } /* - блок отображения - Kitchen Air */
.element_166 { animation: forshowing 1.1s ease-out; } /* - блок отображения - Kitchen */
.element_163 { animation: forshowing 1.0s ease-out; } /* - блок отображения - Kinderroom */
.element_167 { animation: forshowing 1.7s ease-out; } /* - блок отображения - Storeroom */
.element_168 { animation: forshowing 2.2s ease-out; } /* - блок отображения - IP */
.element_18 { animation: forshowing 1.1s ease-out; } /* - блок отображения - panel-showing3 */
.element_19 { animation: forshowing 1s ease-out; } /* - блок отображения - panel-showing4 */

.element_9 {animation: forlog 1.2s ease-out; } /* - ,блок отображения - log_alice */

.element_27  { animation: forfunctions 1s ease-out; }  /*  - блок - panel-functions1 */
.element_28  { animation: forfunctions 1.6s ease-out; } /*  - блок - panel-functions2 */
.element_29  { animation: forfunctions 1.1s ease-out; } /*  - блок - panel-functions3 */
.element_30  { animation: forfunctions 1.4s ease-out; } /*  - блок - panel-functions4 */
.element_114  { animation: forfunctions 1.3s ease-out; } /*  - блок - panel-functions5 */
.element_32  { animation: forfunctions 1.5s ease-out; } /*  - блок - panel-functions6 */
.element_31  { animation: forfunctions 1.2s ease-out; } /*  - блок - panel-functions7 */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------*/
/* контейнер - log_alice */ 
/* -----------------------------------------------------------------------*/
 .element_9 {
//background-color: rgba(0, 40, 40, 0.4);
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px;
border-radius: 10px 0px 0px 10px;
padding: 10px;
}
/* -----------------------------------------------------------------------*/
/* контейнер - status_system_icons */ 
/* -----------------------------------------------------------------------*/
.element_12 {
//background-color: rgba(0, 40, 40, 0.4);
border: 1px solid rgba(0, 233, 233, 0.6);
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px;
border-radius: 10px 0px 0px 10px;
padding: 2px;
}
/* -----------------------------------------------------------------------*/
/*  контейнер - temp_home_1_floor и humidity_home_1_floor */ 
/* -----------------------------------------------------------------------*/
.element_25,
.element_26 {
display: table;
}
.element_109 .fa,
.element_109 .texttemp,
.element_140 .fa,
.element_140 .texttemp
 {
        display: table-cell;
        font-size: 28px;
       /* font-weight: bold;*/
        line-height: 1;
        padding: 0 5px 0 0;
}
/* -----------------------------------------------------------------------*/
/* панель погоды  */
/* -----------------------------------------------------------------------*/
.panel-weather {
 box-sizing: border-box;
 color: white;
 //background-color: rgba(0, 40, 40, 0.4);
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);

/* выше общее */
 position: absolute;
 top: 0px;
/* right: 0px;*/
  width: 538px;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 10px 0px 0px 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px 0px 0px 10px;
}
.panel-weather .location_up {
//background-color: rgba(0, 233, 233,0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
  font-family: arial;
  font-weight: 100;
  -moz-border-radius: 10px 0px 0px 0px;
  -webkit-border-radius: 10px;
  border-radius: 10px 0px 0px 0px;
}
.panel-weather .location_down {
//background-color: rgba(0, 233, 233,0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
  font-family: arial;
  font-weight: 100;
  margin: 0 0 5px 0;
  -moz-border-radius: 0px 0px 0px 10px;
  -webkit-border-radius: 10px;
  border-radius: 0px 0px 0px 10px;
}

.panel-weather img {
  width: 150px;
  float: left;
  margin: 0 0 0 2em;
  //position: center;
  //margin: 0;
}
.panel-weather .temp-weather {
  font-family: arial;
  font-weight: 600;
  display: inline-block;
  vertical-align: top;
  font-size: 140px;
  line-height: 1.1;
}
.panel-weather .temp-weather .degree {
 font-family: arial;
 font-weight: 600;
  font-size: 32px;
  line-height: 1.4;
  vertical-align: top;
}
.panel-weather .text-weather {
 font-family: arial;
 font-weight: 200;
  font-size: 22px;
  line-height: 1.4;
 margin: 0;
}

/* -----------------------------------------------------------------------*/
/* панель времени  */
/* -----------------------------------------------------------------------*/
.panel-time {
 box-sizing: border-box;
 color: White;
 //background-color: rgba(0, 40, 40, 0.4);
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);

/* выше общее */
 position: absolute;
 top: 0px;
 width: 538px;
 -moz-border-radius: 0px 10px 10px 0px;
 -webkit-border-radius: 0px;
 border-radius: 0px 10px 10px 0px;
 /* animation: fortime 1s ease-out;*/
}
.panel-time .time {
 font-size: 140px;
 line-height: 1.1;
 text-align: center;
 font-family: arial;
 font-weight: 600;
}
.panel-time .time .blnk {
 font-size: 140px;
 line-height: 1.1;
 text-align: center;
 font-family: arial;
 font-weight: 600;
animation: blink 1s ease infinite;
}
.panel-time .date_up {
  //background-color: rgba(0, 233, 233, 0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
 font-family: arial;
 font-weight: 100;
  -moz-border-radius: 0px 10px 0px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 10px 0px 0px;
}
.panel-time .date_down {
 // background-color: rgba(0, 233, 233, 0.6);
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
  font-family: arial;
  font-weight: 100;
  margin: 0 0 5px 0;
  -moz-border-radius: 0px 0px 10px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 10px 0px;
}

/* -----------------------------------------------------------------------*/
/* блоки отображения данных  */
/* -----------------------------------------------------------------------*/
.panel-showing1,
.panel-showing2,
.panel-showing3,
.panel-showing4  {
 box-sizing: border-box;
 color: white;
 //background-color: rgba(0, 0, 0, 0.4);
 /* text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); */
  position: absolute;
  width: 538px;
  overflow: hidden;
  cursor: pointer;
  background-color: initial;
}
.panel-showing1 ul,
.panel-showing2 ul,
.panel-showing3 ul,
.panel-showing4 ul {
  padding: 0;
}
.panel-showing1 ul li,
.panel-showing2 ul li,
.panel-showing3 ul li,
.panel-showing4 ul li {
  padding: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.panel-showing1 ul li .sense_snowing_1, 
.panel-showing1 ul li .title, 
.panel-showing1 ul li .sense_snowing_0,
.panel-showing2 ul li .sense_snowing_1, 
.panel-showing2 ul li .title, 
.panel-showing2 ul li .sense_snowing_0,
.panel-showing3 ul li .sense_snowing_1, 
.panel-showing3 ul li .title, 
.panel-showing3 ul li .sense_snowing_0,
.panel-showing4 ul li .sense_snowing_1, 
.panel-showing4 ul li .title, 
.panel-showing4 ul li .sense_snowing_0 {
  display: inline-block;
  font-size: 20px;
  line-height: 1.6;
  padding: 3px 8px;
 font-family: monospace;
 font-weight: lighter;
}
.panel-showing1 ul li .sense_snowing_1,
.panel-showing2 ul li .sense_snowing_1,
.panel-showing3 ul li .sense_snowing_1,
.panel-showing4 ul li .sense_snowing_1 {
  float: right;
  width: 180px;
  text-align: center;
  font-family: monospace;
  font-weight: lighter;
  background-color: rgba(0, 233, 233, 0.6);
  color: white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.panel-showing1 ul li .sense_snowing_0,
.panel-showing2 ul li .sense_snowing_0,
.panel-showing3 ul li .sense_snowing_0,
.panel-showing4 ul li .sense_snowing_0 {
  float: right;
  width: 180px;
  text-align: center;
  font-family: monospace;
  font-weight: lighter;
  background-color: rgba(255, 0, 50, 0.7);
   color: white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.left,
.right {
    font-family: S7;
 font-weight: normal;
 line-height: 1;
 //margin: 0 0 0 10em;
   }
/* -----------------------------------------------------------------------*/
/* блоки кнопок функций */
/* -----------------------------------------------------------------------*/
.panel-functions {
 box-sizing: border-box;
 color: white;
 /* background-color: rgba(0, 0, 0, 0.4); */
 /* text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); */
 position: absolute;
  width: 100%;
  bottom: 0px;
  padding: 0px;
  align-items: center;
  justify-content: space-around;
}
.panel-functions .icon {
  margin: 0;
  width: 106px;
  height: 106px;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  background-color: rgba(0, 40, 40, 0.4);
  border: 1px solid rgba(0, 233, 233, 0.6);
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.panel-functions .icon .fa {
 margin: 7px 0px 0px 0px;
 font-size: 70px;
}
.panel-functions .icon .title {
  font-size: 8px;
  text-align: center;
  text-transform: uppercase;
  /* display: none; */
}
/* -----------------------------------------------------------------*/
.b1 {
      width:70px;
      height:68px;
      padding-top: 3px;
      border: 1px solid rgba(0, 233, 233, 0.6);
      background-color: rgba(0, 233, 233, 0.6);
 background: -webkit-linear-gradient(rgba(0, 233, 233, 0), rgba(0, 233, 233, 0.7));
  background: linear-gradient(rgba(0, 233, 233, 0), rgba(0, 233, 233, 0.7));
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
box-shadow: inset 0px 0px 0px #2ab7ec, 0px 0px 0px 0px #6E0707, 0px 0px 10px #FD004D;
      text-align: center;
      color:white;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

.b2 {
      width:148px;
      height:68px;
      padding-top: 3px;
      border: 1px solid rgba(0, 233, 233, 0.6);
      background-color: rgba(0, 40, 40, 0.6);
background: -webkit-linear-gradient(rgba(0, 40, 40, 0.2), rgba(0, 40, 40, 0.7));
  background: linear-gradient(rgba(0, 40, 40, 0.2), rgba(0, 40, 40, 0.7));
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
     text-align: center;
      color:white;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

.br {
      width:70px;
      height:68px;
      padding-top: 3px;
      border: 1px solid rgba(0, 233, 233, 0.6);
      background-color: rgba(0, 40, 40, 0.6);
background: -webkit-linear-gradient(rgba(0, 40, 40, 0.2), rgba(0, 40, 40, 0.7));
  background: linear-gradient(rgba(0, 40, 40, 0.2), rgba(0, 40, 40, 0.7));
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
//box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
      text-align: center;
      color:white;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

.b1 img {
     margin-left: 17px;
     margin-top:1px;
}

.b1_in {
     margin-top: 1px;
     text-align: center;
-webkit-animation: pulsate 0.5s linear infinite;
  animation: pulsate 0.5s linear infinite;
}

.b2_in {
     margin-top: 3px;
color: #000
text-shadow: 0 1px 1px rgba(255,255,255,.35);
     text-align: center;
     font-size: 20px;
}
.br_in {
     margin-top: 1px;
color: #000
text-shadow: 0 1px 1px rgba(255,255,255,.35);
     text-align: center;
}
.br img {
     margin-left: 17px;
     margin-top:1px;
}
/*-------------------------------------------------------------------*/
/*карта анимации пульсации текста*/
@-webkit-keyframes pulsate 
{
  0%   { color: #f00d0d; text-shadow: 0 -1px 0 #f00d0d; }
  50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
  100% { color: #f00d0d; text-shadow: 0 -1px 0 #f00d0d; }
}
     
@keyframes pulsate
{
  0%   { color:#f00d0d; text-shadow: 0 -1px 0 #f00d0d; }
  50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
  100% { color: #f00d0d; text-shadow: 0 -1px 0 #f00d0d; }
}
Спасибо.
Raspberry pi 4
Вернуться к началу
Sergey.Chek
Сообщения: 107
Зарегистрирован: Ср фев 13, 2019 9:50 pm
Благодарил (а): 219 раз
Поблагодарили: 19 раз

Re: Главная сцена "Кавер-версия"

Сообщение Sergey.Chek » Вс окт 27, 2019 6:45 pm

ahelper писал(а): ↑
Вт сен 03, 2019 9:37 pm
 На данный момент такое оформление, давно уже постоянное.
Поделитесь пожалуйста иконками.
Raspberry pi 4
Вернуться к началу
ahelper
Сообщения: 106
Зарегистрирован: Ср фев 08, 2017 5:04 pm
Благодарил (а): 34 раза
Поблагодарили: 67 раз

Re: Главная сцена "Кавер-версия"

Сообщение ahelper » Пн окт 28, 2019 8:46 am

Sergey.Chek писал(а): ↑
Вс окт 27, 2019 6:45 pm
ahelper писал(а): ↑
Вт сен 03, 2019 9:37 pm
 На данный момент такое оформление, давно уже постоянное.
Поделитесь пожалуйста иконками.
Это не иконки, это шрифт. Про него все здесь:
viewtopic.php?f=28&t=5464&p=80109&hilit=fontello#p80109
За это сообщение автора ahelper поблагодарил:
Sergey.Chek (Пн окт 28, 2019 10:10 am)
Рейтинг: 1.16%
Вернуться к началу
alexgalsyan
Сообщения: 4
Зарегистрирован: Сб окт 27, 2018 4:29 pm
Благодарил (а): 0
Поблагодарили: 0

Re: Главная сцена "Кавер-версия"

Сообщение alexgalsyan » Пн май 18, 2020 7:49 pm

Помогите разобраться пожалуйста: (Разобрался)
1)Установлена чистая версия majordomo (пока никаких устройств)
2)Скачал файл сцены для импорта Main.zip(импортировал)
3)Скачал фонты fontello и как указано: распаковал в /templates_alt хотя в последнем исправленном css был указан путь:

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

 @import url("/css/fontello/css/fontello.min.css");
здесь я все перепробовал и указывал путь до самого файла т.е. в templates_alt и копировал файлы в папку /var/www/html/css
4)Скачал фонты font-awesome и по моему разумению распаковал в /css/font-awesome путь до файла font-awesome.min.css /css/font-awesome/css/font-awesome.min.css

Как бы не трудился иконки не светились.

в первичном сообщении был так-же файл [urlьhttps://mjdm.ru/forum/download/file.php?id=9028]htdocs.zip[/url] с объяснением :
Файл htdocs распаковать в папку (на Windows) _majordomo, соглашаясь на замену. Или вручную сами меняйте пути к неотображаемым файлам.
В general_CSS (only CSS) не забудьте прописать свои номера элементов, для анимации и корректного отображения.
Меня смутила пометка
(на Windows)
:), а не надо было!! данную библиотеку, для linux, необходимо скачать и выложить в корень сайта т.е. папке .../html/,
Для Винды все и так сказано в головном посте.

кстати после обновления "general_CSS (only CSS)" из поста: Re: Главная сцена "Кавер-версия"
Сообщение ahelper » Пн окт 14, 2019 11:15 pm
Некоторые иконки теряются нужно править в ручную.


Далее дополнительно все опишу....
Вернуться к началу
Ответить

Вернуться в «Настройка и программирование»