body {
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 15px;
}
.ss-backlight-container {
position: relative;
display: grid;
grid-template-columns: 1.5fr 1fr;
margin: 0 auto;
width: 100%;
}
.ss-backlight-container .ss-screen-container-night {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #000000;
padding: 40px;
overflow: hidden;
border-radius: 10px 0 0 10px;
}
.ss-backlight-container .ss-screen-container-night::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(4px);
background: url(https://cirtexresidential.co.nz/app/smartscreen-backlight/house-night.jpg);
background-position: center;
background-size: cover;
transform: scale(1.2);
overflow: hidden;
opacity: 1;
}
.ss-backlight-container .ss-screen-container-day {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #000000;
padding: 40px;
overflow: hidden;
border-radius: 10px 0 0 10px;
}
.ss-backlight-container .ss-screen-container-day::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(4px);
background: url(https://cirtexresidential.co.nz/app/smartscreen-backlight/house-day.jpg);
background-position: center;
background-size: cover;
transform: scale(1.2);
overflow: hidden;
opacity: 1;
}
.ss-backlight-container .ss-screen-controls {
display: flex;
flex-direction: column;
justify-content: center;
background: #EEEEEE;
padding: 20px;
border-radius: 0 10px 10px 0;
}
.ss-backlight-container .ss-screen-controls label {
display: block;
margin: 20px;
font-weight: bold;
}
.ss-backlight-container .ss-screen-controls label p {
width: 60px;
font-size: 13px;
font-weight: 500;
margin: 0;
cursor: pointer;
text-align: end;
text-transform: uppercase;
}
.ss-backlight-container .ss-screen-controls input {
display: block;
margin: 10px 0;
width: 100%;
}
.ss-backlight-container .ss-screen-controls input[type=color] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: transparent;
width: 54px;
height: 50px;
border-radius: 100px;
outline: none;
cursor: pointer;
}
.ss-backlight-container .ss-screen-controls input[type=color]::-webkit-color-swatch {
border: none;
border-radius: 100px;
width: 50px;
height: 46px;
}
.ss-backlight-container .ss-screen-controls select {
display: block;
width: 100%;
border-radius: 0;
border: none;
border-right: solid 10px #fff;
background: #fff;
height: 40px;
margin: 10px 0;
text-indent: 5px;
border-radius: 5px;
}
.ss-backlight-container .ss-screen-controls .ss-color-selector {
display: flex;
flex-direction: row;
align-items: center;
}
.ss-colors {
display: grid;
grid-template-columns: 1fr 1fr;
}
.ss-switch {
position: absolute;
color: #ffffff;
left: 20px;
bottom: 20px;
font-size: 30px;
cursor: pointer;
z-index: 99;
}
.smartscreen {
width: 180px;
box-shadow: 0 0 60px -10px #00b5cc;
background-color: #00b5cc;
fill: #222222;
animation: screenRotate ease-in-out 5s infinite alternate-reverse;
transition: ease 0.2s;
}
@-webkit-keyframes screenRotate {
0% {
transform: perspective(400px) rotateY(15deg);
}
100% {
transform: perspective(400px) rotateY(-15deg);
}
}
@keyframes screenRotate {
0% {
transform: perspective(400px) rotateY(15deg);
}
100% {
transform: perspective(400px) rotateY(-15deg);
}
}
.slidecontainer {
width: 100%;
padding: 10px 0 0 0;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
border-radius: 5px;
background: #FFFFFF;
outline: none;
opacity: 1;
transition: opacity 0.2s;
}
.slider:hover {
opacity: 0.8;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #00b5cc;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #00b5cc;
cursor: pointer;
}