I have adapted a pure css button based on the checkbox element.
The associated html exposes the on and off background-color as well as the on and off content.
[{"id":"bef9867d.b18028","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r8g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" unchecked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":100,"wires":[[]]},{"id":"fdb1290a.963198","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"CSS only ","order":2,"width":0,"height":0,"format":"/!--\n\n-->\n<style>\n :root {\n --dashboard-unit-width: 48px;\n --dashboard-unit-height: 48px;\n --dashboard-min-height: 34px;\n --dashboard-min-width: 36px;\n --remote-button-background: black;\n --remote-button-foreground: #cccccc;\n }\n .nr-dashboard-template {\n padding: 0px;\n }\n\n /* This is the normal button definition */\n .remote-button{\n background-color: var(--remote-button-background) !important;\n color: var(--remote-button-foreground);\n height: var(--dashboard-unit-height);\n width: 100%;\n border-radius: 10px;\n font-size:1.0em;\n font-weight:normal;\n margin: 0;\n min-height: 36px;\n min-width: unset;\n line-height: unset;\n }\n /* This is a sub-set which is invoked by */\n /* <md-button class=\"md-button remote-button bigger\"> */\n /* note the (space) \"bigger\" at the end. */\n .remote-button.bigger{\n font-weight:bold;\n font-size:1.5em;\n }\n /* This is for buttons with a lot of text. `font-size:0.7em` */\n /* makes the font 70% normal size */\n .remote-button.small{\n font-size:0.7em;\n }\n /* This is for buttons with just icons, to upsize the size */\n /* of the icon with the line: */\n /* <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node */\n .remote-icon{\n font-size:2.0em;\n }\n /* This is the same as the other one, but it makes the icon smaller */\n .remote-iconS{\n font-size:0.5em;\n }\n\n .remote-button.disabled {\n pointer-events: none;\n opacity: 0.3;\n }\n/* New ck-button */ \n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n/* ok margin: 4px;*/\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid #D0D0D0;\n overflow: auto;\n float: left;\n}\n\n.ck-button:hover {\n/* ok margin: 4px;*/\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid red;\n overflow: auto;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 100%;\n}\n\n.ck-button label span {\n text-align: center;\n/* padding: 3px 0px; */\n padding: 0px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n/*\nCSS\n---\n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid #D0D0D0;\n overflow: auto;\n float: left;\n}\n\n.ck-button:hover {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid red;\n overflow: auto;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 4em;\n}\n\n.ck-button label span {\n text-align: center;\n padding: 3px 0px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n\n<md-button class=\"md-button remote-button3x bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" value=\"1\">\n <span style=\"background-color:#00cc00\" class=\"on\">red<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">red<br>off</span>\n </label>\n </div>\n</md-button>\n</div>\n*/\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":100,"y":60,"wires":[[]]},{"id":"1237f7a0.5cace8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r9g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"9\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">9:0</span>\n <span style=\"background-color:#006600\" class=\"off\">9:1</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":100,"wires":[[]]},{"id":"bb33fa8e.a48f68","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"r8g1","order":3,"width":"2","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":140,"wires":[[]]},{"id":"b856ea19.2280f8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r9g1","order":3,"width":"2","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"9\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\">\n <span style=\"background-color:#00cc00\" class=\"on\">9:0</span>\n <span style=\"background-color:#006600\" class=\"off\">9:1</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":140,"wires":[[]]},{"id":"c3500612.c24038","type":"ui_group","z":"","name":"Btn2","tab":"94f74e9f.6a717","order":1,"disp":true,"width":"4","collapse":false},{"id":"94f74e9f.6a717","type":"ui_tab","z":"503e64bc.acab6c","name":"TEST","icon":"dashboard","order":7,"disabled":false,"hidden":false}]
Is it possible to style the below css in order to fill the dashboard button area ?
I have been struggling with this for days now. Any suggestions will be most welcome.
Html
<!--
V1
==
//-->
<div>
<md-button class="md-button remote-button bigger"
data-payload="1"
data-buttontype="radio"
data-radiogroup='group1'
data-topic="8"
>
<div class="ck-button">
<label class="ck-switch">
<input type="checkbox" unchecked>
<span style="background-color:#00cc00" class="on">btn<br>on</span>
<span style="background-color:#006600" class="off">btn<br>off</span>
</label>
</div>
</md-button>
</div>
CSS
/!--
-->
<style>
:root {
--dashboard-unit-width: 48px;
--dashboard-unit-height: 48px;
--dashboard-min-height: 34px;
--dashboard-min-width: 36px;
--remote-button-background: black;
--remote-button-foreground: #cccccc;
}
.nr-dashboard-template {
padding: 0px;
}
/* This is the normal button definition */
.remote-button{
background-color: var(--remote-button-background) !important;
color: var(--remote-button-foreground);
height: var(--dashboard-unit-height);
width: 100%;
border-radius: 10px;
font-size:1.0em;
font-weight:normal;
margin: 0;
min-height: 36px;
min-width: unset;
line-height: unset;
}
/* This is a sub-set which is invoked by */
/* <md-button class="md-button remote-button bigger"> */
/* note the (space) "bigger" at the end. */
.remote-button.bigger{
font-weight:bold;
font-size:1.5em;
}
/* This is for buttons with a lot of text. `font-size:0.7em` */
/* makes the font 70% normal size */
.remote-button.small{
font-size:0.7em;
}
/* This is for buttons with just icons, to upsize the size */
/* of the icon with the line: */
/* <i class="fa fa-fw fa-plus remote-icon"> in the other node */
.remote-icon{
font-size:2.0em;
}
/* This is the same as the other one, but it makes the icon smaller */
.remote-iconS{
font-size:0.5em;
}
.remote-button.disabled {
pointer-events: none;
opacity: 0.3;
}
/* New ck-button */
.ck-switch {
position: relative;
display: inline-block;
}
.ck-switch input { display: none; }
.off {
position: absolute;
top: 0px;
width: 100%;
opacity: 1;
background-color: #911;
color: white;
}
.on {
color: white;
}
.ck-button input:checked + .on {
opacity: 1;
background-color: #911;
color: white;
}
.ck-button input:checked + span + .off {
opacity: 0;
background-color: #911;
}
.ck-button {
/* ok margin: 4px;*/
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
.ck-button:hover {
/* ok margin: 4px;*/
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
.ck-button label {
float: left;
width: 100%;
}
.ck-button label span {
text-align: center;
/* padding: 3px 0px; */
padding: 0px;
display: block;
}
.ck-button label input {
position: absolute;
top: -20px;
}
/*
CSS
---
.ck-switch {
position: relative;
display: inline-block;
}
.ck-switch input { display: none; }
.off {
position: absolute;
top: 0px;
width: 100%;
opacity: 1;
background-color: #911;
color: white;
}
.on {
color: white;
}
.ck-button input:checked + .on {
opacity: 1;
background-color: #911;
color: white;
}
.ck-button input:checked + span + .off {
opacity: 0;
background-color: #911;
}
.ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
.ck-button:hover {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
.ck-button label {
float: left;
width: 4em;
}
.ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
.ck-button label input {
position: absolute;
top: -20px;
}
<md-button class="md-button remote-button3x bigger"
data-payload="1"
data-buttontype="radio"
data-radiogroup='group1'
data-topic="8"
>
<div class="ck-button">
<label class="ck-switch">
<input type="checkbox" value="1">
<span style="background-color:#00cc00" class="on">red<br>on</span>
<span style="background-color:#006600" class="off">red<br>off</span>
</label>
</div>
</md-button>
</div>
*/
</style>
Some progress - sorry if this creates a moving target.
To fix:
-
Width is not 100%.
-
Text is not centered vertically.
-
Vertical button height of more than 1 unit would be more useful.
[{"id":"bef9867d.b18028","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r8g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button small\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" unchecked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":100,"wires":[[]]},{"id":"fdb1290a.963198","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"CSS only ","order":2,"width":0,"height":0,"format":"/!--\n\n-->\n<style>\n :root {\n --dashboard-unit-width: 48px;\n --dashboard-unit-height: 48px;\n --dashboard-min-height: 36px;\n --dashboard-min-width: 36px;\n --remote-button-background: black;\n --remote-button-foreground: #cccccc;\n }\n .nr-dashboard-template {\n padding: 0px;\n }\n\n /* This is the normal button definition */\n .remote-button{\n background-color: var(--remote-button-background) !important;\n color: var(--remote-button-foreground);\n height: var(--dashboard-unit-height);\n width: 100%;\n border-radius: 10px;\n font-size:1.0em;\n font-weight:normal;\n margin: 0;\n min-height: var(--dashboard-min-height);\n min-width: unset;\n line-height: unset;\n }\n .remote-button:hover {\n /* apply hover effect here */\n border-radius:10px;\n border:1px solid red;\n overflow:auto;\n float:left;\n }\n /* This is a sub-set which is invoked by */\n /* <md-button class=\"md-button remote-button bigger\"> */\n /* note the (space) \"bigger\" at the end. */\n .remote-button.bigger{\n font-weight:bold;\n font-size:1.5em;\n }\n /* This is for buttons with a lot of text. `font-size:0.7em` */\n /* makes the font 70% normal size */\n .remote-button.small{\n font-size:0.7em;\n }\n /* This is for buttons with just icons, to upsize the size */\n /* of the icon with the line: */\n /* <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node */\n .remote-icon{\n font-size:2.0em;\n }\n /* This is the same as the other one, but it makes the icon smaller */\n .remote-iconS{\n font-size:0.5em;\n }\n\n .remote-button.disabled {\n pointer-events: none;\n opacity: 0.3;\n }\n/* New ck-button */ \n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n width: 100%;\n margin: -4px;\n padding: -4px;\n/* ok margin: 4px;*/\nheight: var(--dashboard-unit-height);\n min-height: var(--dashboard-min-height);\n min-width: unset;\n line-height: unset;\n background-color: #EFEFEF;\n border-radius: 10px;\n/* border: 1px solid #D0D0D0;*/\n overflow: hidden;\n float: left;\n}\n\n.ck-button:hover {\n/* margin: 0;*/\n/* ok margin: 4px;*/\n background-color: #EFEFEF;\n border-radius: 10px;\n/* border: 1px solid red;*/\n overflow: hidden;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 100%;\n}\n\n.ck-button label span {\n height: var(--dashboard-unit-height);\n min-height: var(--dashboard-min-height);\n min-width: unset;\n line-height: unset;\n\n text-align: center;\n/* padding: 3px 0px; */\n margin: -4px;\n padding: 4px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n/*\nCSS\n---\n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid #D0D0D0;\n overflow: auto;\n float: left;\n}\n\n.ck-button:hover {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid red;\n overflow: auto;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 4em;\n}\n\n.ck-button label span {\n text-align: center;\n padding: 3px 0px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n\n<md-button class=\"md-button remote-button3x bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" value=\"1\">\n <span style=\"background-color:#00cc00\" class=\"on\">red<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">red<br>off</span>\n </label>\n </div>\n</md-button>\n</div>\n*/\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":100,"y":60,"wires":[[]]},{"id":"1237f7a0.5cace8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r9g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"9\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">9:1</span>\n <span style=\"background-color:#006600\" class=\"off\">9:0</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":100,"wires":[[]]},{"id":"bb33fa8e.a48f68","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"r10g1","order":3,"width":"2","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"10\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":140,"wires":[[]]},{"id":"b856ea19.2280f8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r11g1","order":3,"width":"2","height":"2","format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"11\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\">\n <span style=\"background-color:#00cc00\" class=\"on\">11:1</span>\n <span style=\"background-color:#006600\" class=\"off\">11:0</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":140,"wires":[[]]},{"id":"c3500612.c24038","type":"ui_group","z":"","name":"Btn2","tab":"94f74e9f.6a717","order":1,"disp":true,"width":"4","collapse":false},{"id":"94f74e9f.6a717","type":"ui_tab","z":"503e64bc.acab6c","name":"TEST","icon":"dashboard","order":7,"disabled":false,"hidden":false}]
