css-grid.css

:root {
    --shadow-color: rgba(3, 8, 20, 0.1);
    --background-color: linear-gradient(#f6f6f6,#f6f6f6);
}

body[data-theme='b'] {
    --shadow-color: #2ad;
    --background-color: linear-gradient(#333,#333);
}

* {
    transition: all 0.7s;
    vertical-align: top;
}

#switches {
    display: grid;
    gap: 0.5rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(128px, auto));
    grid-auto-rows: minmax(256px, auto);
    margin: 20px;
}

.borderShadow{
    box-shadow: var(--shadow-color) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    border-radius: 4px;
}

.gridElem {
    overflow: hidden;
    padding: 6px;
}
.gridElem:hover {
     transform: translateY(-3px) scale(1.05);
 }

#switches .singleSwitch{
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 0px;
    display: grid;
    border-radius: 2.5rem 0 3.5rem 2.5rem;
    border: 4px solid transparent;
    max-width: 400px;
    cursor: default;
}

.singleSwitch.switch_false {
    background: var(--background-color) padding-box,linear-gradient(90deg,#db1d60,#ed4f32) 0/50% no-repeat border-box,linear-gradient(-90deg,#eb7d01,#ed4f32 37.5vw,rgba(237,79,50,0)) 100% 101%/65% 75% no-repeat border-box;
}
.singleSwitch.switch_true {
    background: var(--background-color) padding-box,linear-gradient(90deg,#5AFF15,#00B712) 0/50% no-repeat border-box,linear-gradient(-90deg,#00B712,#63D471 37.5vw,rgba(237,79,50,0)) 100% 101%/65% 75% no-repeat border-box;
}
.singleSwitch.switch_scene {
    background: var(--background-color) padding-box,linear-gradient(90deg,#2A2A72,#009FFD) 0/50% no-repeat border-box,linear-gradient(-90deg,#009FFD,#7F53AC 37.5vw,rgba(237,79,50,0)) 100% 101%/65% 75% no-repeat border-box;
}

.switchName{
    grid-row: 1;
    white-space: break-spaces;
    padding: 0.5rem;
    position: relative;
    left: 10px;
}

.switchImg{
    text-transform: capitalize;
    grid-row: 2;
    grid-column: 1 / span 2;
}

.switchBrightness{
    padding-top: 1.0rem;
    grid-row: 3;
    grid-column: 1 / span 2;
}

.switchColorTemp{
    grid-row: 4;
    grid-column: 1 / span 2;
}

.slider100{
    width: 100%;
}

.colorTempSlider{
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: linear-gradient(0.25turn, #f69d3c, #ebf8e1, #3f87a6);
    outline: none;
}

.switchAction{
    grid-row: 5;
    grid-column: 1 / span 2;
}

.colorSelectorTd{
    vertical-align: middle;
}

.hideDevice{
    grid-row: 1;
    position: relative;
    text-align: right;
    font-size: 50%;
    cursor: pointer;
}