mobile view change : suseendhiran

This commit is contained in:
suseendhiran17 2022-09-19 10:59:42 +05:30
parent a2dac392ae
commit 7573347b6c

View File

@ -15,6 +15,10 @@
}, 300000);
</script>
<style>
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
b {
font-family: Arial, Helvetica, sans-serif;
color: #3bd671 !important;
@ -234,7 +238,234 @@
}
.xd-content .xd-button.xd-ok {
background: #734caf;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
b {
font-family: Arial, Helvetica, sans-serif;
color: #3bd671 !important;
}
b1 {
font-family: Arial, Helvetica, sans-serif;
color: red
}
.dot {
height: 25px;
width: 25px;
background-color: lightgreen;
border-radius: 90%;
display: inline-block;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.dot:hover {
animation: none;
}
.dot1 {
height: 25px;
width: 25px;
background-color: red;
border-radius: 90%;
display: inline-block;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.dot1:hover {
animation: none;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
.header {
background: rgb(3, 37, 37);
padding: 10px 0;
height: 13%;
width: 120%;
}
.with-in-header{
color: white;
text-align: right;
position: relative;
right: 70px;
padding-left: 2em;
}
.last-update{
color: white;
font-size: large;
text-align: right;
position: relative;
right: 70px;
padding-left: 2em;
}
.header1 {
background: white;
border-radius: 6px;
/* border: 2px solid #1f221c; */
text-align: left;
padding: 10px 0;
padding-top: 2em;
padding-left: 2em;
height: 40%;
width: 88%;
position: relative;
left: 70px;
top: 65px;
}
.header2 {
background: white;
text-align: left;
padding: 10px 0;
width: 80%;
position: relative;
left: 70px;
top: 100px;
}
.header3 {
background: white;
text-align: left;
padding: 10px 0;
width: 120%;
position: relative;
left: 60px;
top: 100px;
}
.header4 {
background: white;
text-align: left;
padding: 10px 0;
width: 80%;
position: relative;
left: 70px;
top: 100px;
}
.header5 {
background: white;
text-align: left;
padding: 10px 0;
width: 120%;
position: relative;
left: 70px;
top: 100px;
}
.header6 {
background: white;
text-align: left;
padding: 10px 0;
width: 80%;
position: relative;
left: 70px;
top: 100px;
}
.header7 {
background: white;
text-align: left;
padding: 10px 0;
width: 120%;
position: relative;
left: 70px;
top: 100px;
}
.uk-text-primary {
color: #3bd671 !important;
}
.uk-text-primary1 {
color: red;
font-family: Arial, Helvetica, sans-serif;
}
#tab-des {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 87%;
}
#tab-des th , #tab-des td {
border: 1px solid #ddd;
width: 0em;
padding: 8px;
text-align: center;
}
#tab-des tr:nth-child(even){background-color: #f2f2f2;}
#tab-des tr:hover {
background-color: #ddd;
}
#tab-des th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #04AA6D;
color: white;
}
#tab-des-2 {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 87%;
top: 100px;
}
#tab-des-2 td, #tab-des-2 th {
border: 1px solid #ddd;
width: 0em;
padding: 8px;
text-align: center;
}
#tab-des-2 tr:nth-child(even){background-color: #f2f2f2;}
#tab-des-2 tr:hover {background-color: #ddd;}
#tab-des-2 th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #04AA6D;
color: white;
}
.xd-content .xd-body .xd-body-inner {
max-height: unset;
}
.xd-content .xd-body p {
color: #f0f;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
}
.xd-content .xd-button.xd-ok {
background: #734caf;
}
}
</style>
<title class="bi-alarm">Status</title>
<% if ( down == 0) { %>