Bonjour à tous,
j’ai créé un widget toggle switch css pour gérer mes lumières, mais j’ai un petit soucis d’affichage.
Lorsque le switch est sur off, aucun soucis, tous s’affiche correctement:
Lorsque le switch est sur on, il reste deux secondes sur la bonne position puis disparait :
Voici les paramètres de l’équipement lumière:
Et le code du widget:
<div style="width:350px;min-height:50px;" class="cursor cmd cmd-widget container-fluid" data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">
<div id="cadreLum#id#">
<center>
<i><img class="Icone2#id#" src="/mytheme/Dashboard/img/light100.png" height=30 width=32></i>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#" class="label2#id#">#label#</div>
<span style="font-size: 3em;font-weight: bold;margin-top: 5px;" class="action iconCmd#uid#"></span>
<div class="btlumiere2-#id#">
<input type="checkbox" id="check2#id#" onchange="jeedom.cmd.execute({id: '#id#'});">
<label><i></i></label>
</div>
</center>
<style>
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.Icone2#id# {
display: block;
position: absolute;
margin: 10px;
left: 0px;
}
/**** Label de l'objet *****/
.label2#id#{
position: relative;
text-align:center;
color: #AADD33; /* Couleur du label */
vertical-align: middle;
line-height:10px;
width:95%;
right: 80px;
top: 20px;
}
#cadreLum#id# {
width: 350px;
height: 50px;
display: block;
background-color: #202125; /* Couleur de fond du cadre*/
border-radius: 5px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.8);
text-align: center;
overflow: hidden;
}
.btlumiere2-#id# {
margin: 15px auto;
left: 90px;
position: relative;
width: 130px;
height: 20px;
top: -10px;
}
.btlumiere2-#id# label {
width: 100% !important;
height: 100% !important;
position: relative;
display: block;
background: #333; /* Couleur du fond éteint */
border-radius: 40px;
box-shadow: inset 1px 1px 5px 3px rgba(0, 0, 0, 0.8) /* Ombres */, 0 -2px 5px 2px rgba(50,50,50,0.8) , 0 -2px 3px 4px transparent , 0 2px 5px 3px #767477;
}
.btlumiere2-#id# input {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 100;
position: absolute;
width: 100% !important;
height: 100% !important;
cursor: pointer;
}
/***** Curseur ******/
.btlumiere2-#id# label i {
display: block;
height: 140%;
width: 50%;
border-radius: inherit;
position: absolute;
z-index: 2;
right: 53%; /* Position du curseur éteint*/
top: -2px;
background: -moz-linear-gradient(#5f6168, #202125);
background: -ms-linear-gradient(#5f6168, #202125);
background: -o-linear-gradient(#5f6168, #202125);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#5f6168), to(#202125));
background: -webkit-linear-gradient(#5f6168, #202125);
background: linear-gradient(#5f6168, #202125);
box-shadow:
inset 0 1px 0 #202125,
0 0 8px rgba(0,0,0,0.3),
0 5px 5px rgba(0,0,0,0.2);
}
/***** Curseur secondaire ******/
.btlumiere2-#id# label i:after {
content: "";
position: absolute;
left: 15%;
top: 25%;
width: 70%;
height: 50%;
background: #5f6168; /* Couleur du curseur Eteint */
box-shadow:
inset 1px 1px 2px 2px rgba(0, 0, 0, 0.8) /* Ombres */,
0 0 1px rgba(0,0,0,0.8);
border-radius: inherit;
}
.btlumiere2-#id# label i:before {
content: "éteint";
text-transform: uppercase;
font-style: normal;
font-weight: bold;
color: #555; /* Couleur du texte éteint */
text-shadow: 0 1px 0 rgba(155, 155, 155, 0.8); /* ombre du texte éteint */
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
position: absolute;
top: 80%;
margin-top: -15px;
right: -80%; /* Position du texte Eteint*/
}
.btlumiere2-#id# input:checked ~ label {
background: #AADD33; /* couleur du fond allumé */
box-shadow: inset 1px 1px 5px 3px rgba(0, 0, 0, 0.8) /* Ombres */, 0 -2px 5px 2px rgba(50,50,50,0.8) , 0 -2px 3px 4px transparent , 0 2px 5px 3px #767477;
}
.btlumiere2-#id# input:checked ~ label i {
right: -1%;
}
.btlumiere2-#id# input:checked ~ label i:after{
background: #AADD33; /* Couleur du curseur Allumé */
box-shadow: inset 1px 1px 2px 2px rgba(0, 0, 0, 0.8) /* Ombres */
}
.btlumiere2-#id# input:checked ~ label i:before {
content: "Allumé";
text-transform: uppercase;
font-style: normal;
font-weight: 600;
color: rgba(0,0,0,0.4);
text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
font-family: Helvetica, Arial, sans-serif;
left: -275%; /* Position du texte Allumé*/
top: 80%; /* Position du texte Allumé*/
color: #122A0A; /* Couleur du texte Allumé */
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
</style>
<script type="text/javascript">
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
document.getElementById('check2#id#').checked = true;
if (jeedom.cmd.normalizeName('#name#') == 'on') {
cmd.hide();
}else{
cmd.show();
}} else {
document.getElementById('check2#id#').checked = false;
if (jeedom.cmd.normalizeName('#name#') == 'off') {
cmd.hide();
}else{
cmd.show();
} } }
jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>
Si quelqu’un a une idée de ce que j’ai loupé ou mal fait?
Merci de votre aide.