Changes by Monika DV
This commit is contained in:
@@ -833,7 +833,6 @@ input.checkbox{
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Style the labels (Off and On) */
|
||||
|
||||
.toggle-label {
|
||||
@@ -910,4 +909,434 @@ select {
|
||||
}
|
||||
.padleft{
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
.nav-setting{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.nav-logout{
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
|
||||
/*-------------------------------------SET RESPONSIVE -----------------*/
|
||||
@media (max-width: 900px) {
|
||||
/*Pan Tilt Speed*/
|
||||
button#tilt1,
|
||||
button#tilt2,
|
||||
button#tilt3,
|
||||
button#tilt4,
|
||||
button#pan1,
|
||||
button#pan2,
|
||||
button#pan3,
|
||||
button#pan4{
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1.2rem;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
/*End Pan Tilt Speed*/
|
||||
/* ---- NAVIGATION ----- */
|
||||
.btn-nav{
|
||||
margin: 0;
|
||||
font-size: 7em;
|
||||
color: lightgray;
|
||||
}
|
||||
.btn-nav:hover{
|
||||
color: white;
|
||||
}
|
||||
.btn-nav:active{
|
||||
color: dodgerblue;
|
||||
}
|
||||
.btn-nav-center{
|
||||
font-size: 3em;
|
||||
top: -12px;
|
||||
color: dodgerblue;
|
||||
}
|
||||
.btn-center-unactive{
|
||||
font-size: 2em;
|
||||
color: #434343;
|
||||
}
|
||||
.pad-img{
|
||||
padding: 0;
|
||||
}
|
||||
.img-cctv{
|
||||
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
|
||||
border-radius: 10px;
|
||||
margin: 1.5em;
|
||||
}
|
||||
.btn-circle{
|
||||
width: 13em;
|
||||
height: 13em;
|
||||
background-color: black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin: 5%;
|
||||
border-radius: 50%;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
|
||||
}
|
||||
.pad-top{
|
||||
margin-top: -17px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
.pad-left{
|
||||
margin-top: -40px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.pad-right{
|
||||
margin-top: -40px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.pad-bottom{
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
/* ---- END - NAVIGATION ----- */
|
||||
/* Mute Button */
|
||||
.btn-mute{
|
||||
text-decoration: none;
|
||||
background-color: #f7f7f7;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
|
||||
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
color: black;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
padding: 0.2em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
|
||||
border: solid 1px transparent;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
/* End Mute Button */
|
||||
|
||||
.toggle-label {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
/* Style the toggle switch (input) */
|
||||
.toggle-switch {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 55px;
|
||||
height: 30px;
|
||||
background-color: #ccc;
|
||||
border-radius: 25px;
|
||||
position: relative;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Circle inside the switch */
|
||||
.toggle-switch::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
/* When checked (toggle to On), change background color and move the circle */
|
||||
.toggle-switch:checked {
|
||||
background-color: #0d6efd;
|
||||
}
|
||||
.toggle-switch:checked::before {
|
||||
transform: translateX(25px);
|
||||
}
|
||||
.align-right{
|
||||
text-align: right;
|
||||
}
|
||||
/* End Switch */
|
||||
}
|
||||
|
||||
@media (min-width: 900px) and (max-width: 1050px) {
|
||||
#streaming_status{
|
||||
text-align: left;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.padleft{
|
||||
padding-left: 3px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.icon-system{
|
||||
margin-top: -13px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
button#tilt1,
|
||||
button#tilt2,
|
||||
button#tilt3,
|
||||
button#tilt4,
|
||||
button#pan1,
|
||||
button#pan2,
|
||||
button#pan3,
|
||||
button#pan4{
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 2.5rem;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.text-dash{
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.text-status1{
|
||||
color: black;
|
||||
font-size: 3em;
|
||||
}
|
||||
/* ----- SWITCH ------ */
|
||||
.toggle-label {
|
||||
font-size: 1.8rem;
|
||||
color: #555;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
/* Style the toggle switch (input) */
|
||||
.toggle-switch {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
/*width: 50px;*/
|
||||
/*height: 25px;*/
|
||||
width: 75px;
|
||||
height: 50px;
|
||||
background-color: #ccc;
|
||||
border-radius: 25px;
|
||||
position: relative;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Circle inside the switch */
|
||||
.toggle-switch::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
/* When checked (toggle to On), change background color and move the circle */
|
||||
.toggle-switch:checked {
|
||||
background-color: #0d6efd;
|
||||
}
|
||||
.toggle-switch:checked::before {
|
||||
transform: translateX(25px);
|
||||
}
|
||||
/*----- END SWITCH -----*/
|
||||
|
||||
/* --- Button CONTENT ---- */
|
||||
.btn-play1{
|
||||
text-decoration: none;
|
||||
background-color: #f7f7f7;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
|
||||
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
color: black;
|
||||
/*width: 4.2em;*/
|
||||
/*height: 4.2em;*/
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
|
||||
border: solid 1px transparent;
|
||||
}
|
||||
|
||||
.btn-play1:before {
|
||||
content: "";
|
||||
display: block;
|
||||
background: #fff;
|
||||
border-top: 2px solid #ddd;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0px 8px 48px #ddd;
|
||||
}
|
||||
|
||||
.btn-play1:active {
|
||||
box-shadow: 0px 3px 8px #aaa inset, 0px 2px 3px #fff;
|
||||
}
|
||||
.btn-play1:hover {
|
||||
text-decoration: none;
|
||||
/*color: #555;*/
|
||||
color: black;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.icon1{
|
||||
margin: 27%;
|
||||
font-size: 4.5em;
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: -1px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.icon2{
|
||||
margin: 27%;
|
||||
font-size: 4.5em;
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: 5px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
/* --- END Button CONTENT ---- */
|
||||
|
||||
.btn-mute{
|
||||
text-decoration: none;
|
||||
background-color: #f7f7f7;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
|
||||
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
|
||||
color: black;
|
||||
width: 2.2em;
|
||||
height: 2.2em;
|
||||
padding: 0.1em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
|
||||
border: solid 1px transparent;
|
||||
font-size: 2.2em;
|
||||
}
|
||||
/* ---- NAVIGATION ----- */
|
||||
.btn-nav{
|
||||
margin: 0;
|
||||
font-size: 13em;
|
||||
color: lightgray;
|
||||
}
|
||||
.btn-nav:hover{
|
||||
color: white;
|
||||
}
|
||||
.btn-nav:active{
|
||||
color: dodgerblue;
|
||||
}
|
||||
.btn-nav-center{
|
||||
font-size: 5em;
|
||||
top: -20px;
|
||||
color: dodgerblue;
|
||||
}
|
||||
.btn-center-unactive{
|
||||
font-size: 2em;
|
||||
color: #434343;
|
||||
}
|
||||
.pad-img{
|
||||
padding: 0;
|
||||
}
|
||||
.img-cctv{
|
||||
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
|
||||
border-radius: 10px;
|
||||
margin: 1.5em;
|
||||
}
|
||||
.btn-circle{
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
background-color: black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin: 5%;
|
||||
border-radius: 70%;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
|
||||
}
|
||||
.pad-top{
|
||||
margin-top: -40px;
|
||||
margin-bottom: -45px;
|
||||
}
|
||||
.pad-left{
|
||||
margin-top: -65px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
.pad-right{
|
||||
margin-top: -65px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
.pad-bottom{
|
||||
margin-top: -110px;
|
||||
}
|
||||
#set_zoom{
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1.7rem;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
.footer{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.p-title{
|
||||
font-size: 3.5em !important;
|
||||
}
|
||||
.nav-setting{
|
||||
font-size: 1.8em;
|
||||
line-height: 2em;
|
||||
}
|
||||
.nav-logout{
|
||||
font-size: 1.8em !important;
|
||||
}
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background: #ddd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
height: 20px;
|
||||
background: #dddddd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #0d6efd;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.output{
|
||||
padding-left: 20%;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.text-setting{
|
||||
font-size: 1.7em;
|
||||
}
|
||||
.text-input{
|
||||
font-size: 0.9em !important;
|
||||
}
|
||||
#icon_confirm,
|
||||
#icon_password,
|
||||
#icon_camera{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.btn-setting{
|
||||
padding: .5rem 1rem !important;
|
||||
font-size: 1.1rem !important;
|
||||
border-radius: .3rem !important;
|
||||
}
|
||||
.setting-title{
|
||||
font-size: 1.3em;
|
||||
}
|
||||
span.navbar-toggler-icon {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user