En y réfléchissant, je vois bien que cela ne touche que « certains » éléments de mon design.
Par exemple, je clique sur un interrupteur ou autres, il ne se passe rien ! Le titre reste bien fusionné sur les 5 ou 6 cases en long.
Par contre, certains bougent soit durant la vie, soit si j’appuie.
Exemple :
<div class="eqLogic eqLogic-widget allowResize allowReorderCmd allowLayout eqLogic_layout_table jeedomAlreadyPosition noResize hideEqLogicName context-menu-disabled" data-eqtype="virtual" data-eqlogic_id="1915" data-eqlogic_uid="eqLogic1915__814284044__" data-version="dashboard" data-translate-category="" data-category="" data-tags="" style="width: 142px; height: 157px;" data-plan_id="3785" data-zoom="1">
<center class="widget-name">
<span class="warning tooltipstered">
<i class=""></i>
</span>
<span class="cmd refresh pull-right cursor" data-cmd_id="21148">
<i class="fas fa-sync"></i>
</span>
<span class="reportModeVisible">Ouvrants <span class="object_name">Panel</span></span>
<a href="#" class="reportModeHidden">Ouvrants <span class="object_name">Panel</span></a>
</center>
<div class="verticalAlign">
<center>
<table style="width:140px;" class="tableCmd" data-line="3" data-column="2"><tbody><tr><td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1" colspan="2"><center>Ouvrants & Accès</center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21164" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21164'});" data-type="action" data-cmd_id="21164" data-cmd_uid="cmd21164__814284044__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 20px;">
<i id="icon-21164" class="jeedom-portail_ferme" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('20') ? parseFloat('20'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21164 .button").css("border", borderSize+"px solid "+color);
$("#button-21164 .button").css("border-radius", buttonSize+"px");
$("#button-21164 .button").css("color", color);
$("#button-21164 .button").css("width", buttonSize+"px");
$("#button-21164 .button").css("height", buttonSize+"px");
$("#button-21164 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("line-height",lineheight+"px");
$("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("color",color);
var type = ('jeedom-portail_ferme' !='#'+'type#') ? "jeedom-portail_ferme":"fa";
var icon = (''!='#'+'icone#') ? "" : "fa-lock";
$("#icon-21164").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21164").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21164").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="2"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21165" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21165'});" data-type="action" data-cmd_id="21165" data-cmd_uid="cmd21165__814284044__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
<i id="icon-21165" class="jeedomapp-garage-ferme" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('36') ? parseFloat('36'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21165 .button").css("border", borderSize+"px solid "+color);
$("#button-21165 .button").css("border-radius", buttonSize+"px");
$("#button-21165 .button").css("color", color);
$("#button-21165 .button").css("width", buttonSize+"px");
$("#button-21165 .button").css("height", buttonSize+"px");
$("#button-21165 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("line-height",lineheight+"px");
$("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("color",color);
var type = ('jeedomapp-garage-ferme' !='#'+'type#') ? "jeedomapp-garage-ferme":"fa";
var icon = (''!='#'+'icone#') ? "" : "fa-lock";
$("#icon-21165").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21165").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21165").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="1"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21168" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21168'});" data-type="action" data-cmd_id="21168" data-cmd_uid="cmd21168__814284044__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
<i id="icon-21168" class="mdi-window-shutter-open Mdi" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('36') ? parseFloat('36'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21168 .button").css("border", borderSize+"px solid "+color);
$("#button-21168 .button").css("border-radius", buttonSize+"px");
$("#button-21168 .button").css("color", color);
$("#button-21168 .button").css("width", buttonSize+"px");
$("#button-21168 .button").css("height", buttonSize+"px");
$("#button-21168 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("line-height",lineheight+"px");
$("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("color",color);
var type = ('mdi-window-shutter-open' !='#'+'type#') ? "mdi-window-shutter-open":"fa";
var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
$("#icon-21168").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21168").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21168").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="2"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21166" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21166'});" data-type="action" data-cmd_id="21166" data-cmd_uid="cmd21166__814284044__">
<div class="button" style="border: 2px solid rgb(172, 172, 172); border-radius: 45px; color: rgb(172, 172, 172); width: 45px; height: 45px; font-size: 35px;">
<i id="icon-21166" class="mdi-car-cog Mdi" style="line-height: 41px; color: rgb(172, 172, 172);"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('45') ? parseFloat('45'):60;
var borderSize = is_numeric('2') ? parseFloat('2'):3;
var iconSize = is_numeric('35') ? parseFloat('35'):30;
var color = ('#acacac' !='#'+'couleur#') ? "#acacac":"white";
$("#button-21166 .button").css("border", borderSize+"px solid "+color);
$("#button-21166 .button").css("border-radius", buttonSize+"px");
$("#button-21166 .button").css("color", color);
$("#button-21166 .button").css("width", buttonSize+"px");
$("#button-21166 .button").css("height", buttonSize+"px");
$("#button-21166 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("line-height",lineheight+"px");
$("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("color",color);
var type = ('mdi-car-cog' !='#'+'type#') ? "mdi-car-cog":"fa";
var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
$("#icon-21166").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21166").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21166").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td></tr></tbody></table>
</center>
</div>
<script>
if ('21148' != ''){
$('.eqLogic[data-eqLogic_uid=eqLogic1915__814284044__] .refresh').on('click', function () {
jeedom.cmd.execute({id: '21148'});
});
}else{
$('.eqLogic[data-eqLogic_uid=eqLogic1915__814284044__] .refresh').remove();
}
</script>
</div>
Si j’appuie :
<div class="eqLogic eqLogic-widget allowResize allowReorderCmd allowLayout eqLogic_layout_table jeedomAlreadyPosition noResize hideEqLogicName context-menu-disabled" data-eqtype="virtual" data-eqlogic_id="1915" data-eqlogic_uid="eqLogic1915__1777855253__" data-version="dashboard" data-translate-category="" data-category="" data-tags="" style="width: 142px; height: 157px;" data-plan_id="3785" data-zoom="1"><center class="widget-name">
<span class="warning tooltipstered">
<i class=""></i>
</span>
<span class="cmd refresh pull-right cursor" data-cmd_id="21148">
<i class="fas fa-sync"></i>
</span>
<span class="reportModeVisible">Ouvrants <span class="object_name">Panel</span></span>
<a href="#" class="reportModeHidden">Ouvrants <span class="object_name">Panel</span></a>
</center><div class="verticalAlign">
<center>
<table style="width:140px;" class="tableCmd" data-line="3" data-column="2"><tbody><tr><td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1"><center>Ouvrants & Accès</center></td><td class="tableCmdcss" style="font-family:Rubik-light;" data-line="1" data-column="2"><center></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21164" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21164'});" data-type="action" data-cmd_id="21164" data-cmd_uid="cmd21164__1777855253__">
<div class="button" style="border: 3px solid rgb(218, 48, 55); border-radius: 53px; color: rgb(218, 48, 55); width: 53px; height: 53px; font-size: 20px;">
<i id="icon-21164" class="jeedom-portail_ouvert" style="line-height: 47px; color: rgb(218, 48, 55);"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('20') ? parseFloat('20'):30;
var color = ('#da3037' !='#'+'couleur#') ? "#da3037":"white";
$("#button-21164 .button").css("border", borderSize+"px solid "+color);
$("#button-21164 .button").css("border-radius", buttonSize+"px");
$("#button-21164 .button").css("color", color);
$("#button-21164 .button").css("width", buttonSize+"px");
$("#button-21164 .button").css("height", buttonSize+"px");
$("#button-21164 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("line-height",lineheight+"px");
$("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("color",color);
var type = ('jeedom-portail_ouvert' !='#'+'type#') ? "jeedom-portail_ouvert":"fa";
var icon = (''!='#'+'icone#') ? "" : "fa-lock";
$("#icon-21164").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21164").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21164").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="2"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21165" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21165'});" data-type="action" data-cmd_id="21165" data-cmd_uid="cmd21165__1777855253__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
<i id="icon-21165" class="jeedomapp-garage-ferme" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('36') ? parseFloat('36'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21165 .button").css("border", borderSize+"px solid "+color);
$("#button-21165 .button").css("border-radius", buttonSize+"px");
$("#button-21165 .button").css("color", color);
$("#button-21165 .button").css("width", buttonSize+"px");
$("#button-21165 .button").css("height", buttonSize+"px");
$("#button-21165 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("line-height",lineheight+"px");
$("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("color",color);
var type = ('jeedomapp-garage-ferme' !='#'+'type#') ? "jeedomapp-garage-ferme":"fa";
var icon = (''!='#'+'icone#') ? "" : "fa-lock";
$("#icon-21165").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21165").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21165").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="1"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21168" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21168'});" data-type="action" data-cmd_id="21168" data-cmd_uid="cmd21168__1777855253__">
<div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
<i id="icon-21168" class="mdi-window-shutter-open Mdi" style="line-height: 47px; color: ghostwhite;"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('53') ? parseFloat('53'):60;
var borderSize = is_numeric('3') ? parseFloat('3'):3;
var iconSize = is_numeric('36') ? parseFloat('36'):30;
var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";
$("#button-21168 .button").css("border", borderSize+"px solid "+color);
$("#button-21168 .button").css("border-radius", buttonSize+"px");
$("#button-21168 .button").css("color", color);
$("#button-21168 .button").css("width", buttonSize+"px");
$("#button-21168 .button").css("height", buttonSize+"px");
$("#button-21168 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("line-height",lineheight+"px");
$("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("color",color);
var type = ('mdi-window-shutter-open' !='#'+'type#') ? "mdi-window-shutter-open":"fa";
var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
$("#icon-21168").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21168").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21168").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="2"><center><!--
Widget name : multi_icon_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
Last Update : 20200426 - update to remove root properties when parameters are passed
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="button-21166" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21166'});" data-type="action" data-cmd_id="21166" data-cmd_uid="cmd21166__1777855253__">
<div class="button" style="border: 2px solid rgb(172, 172, 172); border-radius: 45px; color: rgb(172, 172, 172); width: 45px; height: 45px; font-size: 35px;">
<i id="icon-21166" class="mdi-car-cog Mdi" style="line-height: 41px; color: rgb(172, 172, 172);"></i>
</div>
</div>
<style type="text/css">
--root: {
--button_width: 60px;
--border_size: 3px;
--button_color: grey;
--icon_size:30px;
}
.button i.fa, .button i.fas, .button i.fab {
line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
color: var(--button_color);
}
.button {
box-sizing: border-box;
border: var(--border_size) solid var(--button_color);
border-radius: var(--button_width);
color: var(--button_color);
width: var(--button_width);
height: var(--button_width);
display: block;
text-align: center;
cursor: pointer;
font-size: var(--icon_size);
margin: 0;
font-weight:400;
}
</style>
<script type="text/javascript">
$(function() {
var buttonSize = is_numeric('45') ? parseFloat('45'):60;
var borderSize = is_numeric('2') ? parseFloat('2'):3;
var iconSize = is_numeric('35') ? parseFloat('35'):30;
var color = ('#acacac' !='#'+'couleur#') ? "#acacac":"white";
$("#button-21166 .button").css("border", borderSize+"px solid "+color);
$("#button-21166 .button").css("border-radius", buttonSize+"px");
$("#button-21166 .button").css("color", color);
$("#button-21166 .button").css("width", buttonSize+"px");
$("#button-21166 .button").css("height", buttonSize+"px");
$("#button-21166 .button").css("font-size", iconSize+"px");
var lineheight = buttonSize - borderSize - borderSize;
$("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("line-height",lineheight+"px");
$("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("color",color);
var type = ('mdi-car-cog' !='#'+'type#') ? "mdi-car-cog":"fa";
var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
$("#icon-21166").removeClass().addClass(type+" "+icon);
});
// Touch start
$("#button-21166").on("mousedown", function() {
return $(this).css({
"transform": "scale(.9)"
});
});
// Touch end
$("#button-21166").on("mouseup", function() {
return $(this).css({
"transform": "scale(1)"
});
});
</script></center></td></tr></tbody></table>
</center>
</div><script>
if ('21148' != ''){
$('.eqLogic[data-eqLogic_uid=eqLogic1915__1777855253__] .refresh').on('click', function () {
jeedom.cmd.execute({id: '21148'});
});
}else{
$('.eqLogic[data-eqLogic_uid=eqLogic1915__1777855253__] .refresh').remove();
}
</script></div>
Et reste comme ça ensuite, si le bouton revient à son état.
J’ai le même souci sur le tableau de suivi de confort/usage.
Un élément sur la taille des tableaux ?