iobroker.schedule-switcher
Version:
Switch states over scheduler
54 lines (51 loc) • 1.39 kB
CSS
/*
material design switch (CSS ONLY)
A PEN BY Henry Arneson
https://codepen.io/henranator/pen/QEVybm
Modified for dark theme and compiled to pure css.
*/
.md-switch-container {
height: 20px;
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.md-switch-container .md-transition {
transition: all 100ms linear;
}
.md-switch-container .md-switch-track {
width: 34px;
height: 14px;
border-radius: 34px;
background: var(--ts-widget-off-color-container, #808080);
transition: all 100ms linear;
}
.md-switch-container .md-switch-handle {
width: 20px;
height: 20px;
position: absolute;
left: 0;
border-radius: 100%;
background: var(--ts-widget-off-color, #c0c0c0);
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 2px 1px -1px rgba(0, 0, 0, 0.12);
transition: all 100ms linear;
}
.md-switch-container .md-switch-label {
margin-left: 10px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
}
.md-switch-container.checked .md-switch-track {
background: var(--ts-widget-primary-color-container, #2f2f2f);
}
.md-switch-container.checked .md-switch-handle {
left: 14px;
background: var(--ts-widget-primary-color, #337ab7);
}