Главная сцена "Кавер-версия"
Модератор: immortal
-
- Сообщения: 19
- Зарегистрирован: Сб сен 07, 2019 10:52 am
- Благодарил (а): 7 раз
- Поблагодарили: 1 раз
Re: Главная сцена "Кавер-версия"
В фиолетовом цвете красиво смотрится. Можете выложить файлы для повторения?
-
- Сообщения: 107
- Зарегистрирован: Ср фев 13, 2019 9:50 pm
- Благодарил (а): 219 раз
- Поблагодарили: 19 раз
-
- Сообщения: 106
- Зарегистрирован: Ср фев 08, 2017 5:04 pm
- Благодарил (а): 34 раза
- Поблагодарили: 67 раз
Re: Главная сцена "Кавер-версия"
Меню здесь https://connect.smartliving.ru/profile/1594/menu.html
- За это сообщение автора ahelper поблагодарил:
- Sergey.Chek (Чт окт 10, 2019 8:57 am)
- Рейтинг: 1.16%
-
- Сообщения: 106
- Зарегистрирован: Ср фев 08, 2017 5:04 pm
- Благодарил (а): 34 раза
- Поблагодарили: 67 раз
Re: Главная сцена "Кавер-версия"
Если у вас кнопки не соответствуют размерам, то есть элемент в сцене "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%
-
- Сообщения: 107
- Зарегистрирован: Ср фев 13, 2019 9:50 pm
- Благодарил (а): 219 раз
- Поблагодарили: 19 раз
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; } }
Raspberry pi 4
-
- Сообщения: 107
- Зарегистрирован: Ср фев 13, 2019 9:50 pm
- Благодарил (а): 219 раз
- Поблагодарили: 19 раз
-
- Сообщения: 106
- Зарегистрирован: Ср фев 08, 2017 5:04 pm
- Благодарил (а): 34 раза
- Поблагодарили: 67 раз
Re: Главная сцена "Кавер-версия"
Это не иконки, это шрифт. Про него все здесь:
viewtopic.php?f=28&t=5464&p=80109&hilit=fontello#p80109
- За это сообщение автора ahelper поблагодарил:
- Sergey.Chek (Пн окт 28, 2019 10:10 am)
- Рейтинг: 1.16%
-
- Сообщения: 4
- Зарегистрирован: Сб окт 27, 2018 4:29 pm
- Благодарил (а): 0
- Поблагодарили: 0
Re: Главная сцена "Кавер-версия"
Помогите разобраться пожалуйста: (Разобрался)
1)Установлена чистая версия majordomo (пока никаких устройств)
2)Скачал файл сцены для импорта Main.zip(импортировал)
3)Скачал фонты fontello и как указано: распаковал в /templates_alt хотя в последнем исправленном 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] с объяснением :
Для Винды все и так сказано в головном посте.
кстати после обновления "general_CSS (only CSS)" из поста: Re: Главная сцена "Кавер-версия"
Сообщение ahelper » Пн окт 14, 2019 11:15 pm
Некоторые иконки теряются нужно править в ручную.
Далее дополнительно все опишу....
1)Установлена чистая версия majordomo (пока никаких устройств)
2)Скачал файл сцены для импорта Main.zip(импортировал)
3)Скачал фонты fontello и как указано: распаковал в /templates_alt хотя в последнем исправленном css был указан путь:
Код: Выделить всё
@import url("/css/fontello/css/fontello.min.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) не забудьте прописать свои номера элементов, для анимации и корректного отображения.
, а не надо было!! данную библиотеку, для linux, необходимо скачать и выложить в корень сайта т.е. папке .../html/,(на Windows)
Для Винды все и так сказано в головном посте.
кстати после обновления "general_CSS (only CSS)" из поста: Re: Главная сцена "Кавер-версия"
Сообщение ahelper » Пн окт 14, 2019 11:15 pm
Некоторые иконки теряются нужно править в ручную.
Далее дополнительно все опишу....