Edit: chatCSS.css

Editing: chatCSS.css

Kembali

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
	  .korPassenger{
		font-size:8px;
		color:rgba(171,171,171,1);
		}
		.korDriver{
		font-size:8px;
		font-style:italic;
		color:rgba(0,128,255,1);
		}
		.LetraOras{
		font-size:10px;
		font-style:italic;
		color:rgba(255,0,0,1);
		}
	   .subarDiv {
		display:none;
		}
		#idD {
		display:none;
		}
		#messOK {
			width:100%
		}
		#nameD {
		display:none;
		}
		#idP {
		display:none;
		}
		.topdiv {
		background-color:transparent;
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-size: 12px;
        font-weight: 100;
        height: auto;
        margin-left: 0px;
        margin-top: 0px;
        outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: auto;
		border: 1px solid #CCC;
      }
	  .messageBox {
		background-color:transparent;
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-size: 14px;
        outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: auto;
		border: 1px solid #CCC;
      }
	  .messageBox:focus {
		 -ms-transform: scale(1.5); /* IE 9 */
		  -webkit-transform: scale(1.5); /* Safari 3-8 */
		  transform: scale(1.5);
		  margin-left:auto;
		  background:rgba(255,255,255,1);
      }
	  .messageON {
		background-color:rgba(0,255,64,1);
        border-radius: 2px;
        border: 1px solid transparent;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-size: 10px;
        font-weight: 100;
        height: auto;
        margin-left: 0px;
        margin-top: 0px;
        outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: auto;
		border: 1px solid #CCC;
	  }
	  .messageON:hover{
		   -ms-transform: scale(2); /* IE 9 */
		  -webkit-transform: scale(2); /* Safari 3-8 */
		  transform: scale(1.7);
	  }
	  .hareFOTO:hover{
		   -ms-transform: scale(2); /* IE 9 */
		  -webkit-transform: scale(2); /* Safari 3-8 */
		  transform: scale(1.7);
	  	}
	  .topupJava {
        border-radius: 2px;
        border: 1px solid transparent;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-size: 9px;
		width:100%;
		height:50%
		size:10px;
      }
	   .controls {
        /*background-color: #fff; */
		background-color:transparent;
        border-radius: 2px;
        border: 1px solid transparent;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        height: 29px;
        margin-left: 17px;
        margin-top: 10px;
        outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: auto;
      }
      #map {
	height: 100%;
	width: 100%;
	float: left;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
		width:auto;
      }
      #floating-panel {
	position: fixed;
	top: auto;
	left: 0px;;
	z-index: 5;
	padding: 2px;
	/* border: 1px solid #CCC; */
	text-align: center;
	font-family: 'Roboto','sans-serif';
	line-height: 2px;
	padding-left: 5px;
	/*background-color:rgba(233,233,233,1); */
	background-color:transparent;
	height: auto;
	width:100%;
      }
		#hmess {
		position:absolute;
		margin-top:100px;
		margin-left:0px;
        height: auto;
        width: auto;
        overflow:auto;
		font-size:13px;
		position:fixed;
		background-color:#C8C5C5;
      }
	#bMensagem {
	position: absolute;
	width: 200px;
	height: 115px;
	z-index: 1;
	left: 80%;
	top: 5%;
	text-overflow: ellipsis;
	font-size:10px;
	}
body {font-family: Arial, Helvetica, sans-serif;}
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button:hover {
    opacity: 0.8;
}
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}
img.avatar {
    width: 60%;
    border-radius: 10%;
}
.container {
    padding: 16px;
}
.container:focus {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Safari 3-8 */
  transform: scale(2);
  margin-left:auto;
}
span.psw {
    float: right;
    padding-top: 16px;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}
.modal1 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
	background:rgba(234,234,234,1);
    padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}
.animate1 {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s;
	font-size:14px;
	width:45%;
	background-color:rgba(255,255,255,1);
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing:content-box;
	 outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
		background-color:rgba(255,255,255,1);
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-weight: 200;
        margin-left: 0px;
        margin-top: 0px;
        outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
		border: 1px solid #CCC;
}
.animate1:focus {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Safari 3-8 */
  transform: scale(2);
  margin-left:30%;
  margin-right:30%;
  margin-top:10%;
}
.animateMessage {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s;
	font-size:14px;
	width: 100%;
	background-color:rgba(255,255,255,1);
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing:content-box;
	 outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
		background-color:rgba(255,255,255,1);
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-weight: 200;
        margin-left: 0px;
        margin-top: 0px;
        outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
		border: 1px solid #CCC;
}
.animateMessage:focus {
  -ms-transform: scale(1.7); /* IE 9 */
  -webkit-transform: scale(1.7); /* Safari 3-8 */
  transform: scale(1.7);
  margin-left:30%;
  margin-bottom:10%;
}
.fotozoom{
	height:64px;
	width:50px;
}

.txtjrk{
	width:50px;
	border:#FFF;
	font-size:12px;
	color:#090;
}

.fotozoom:hover {
  -ms-transform: scale(4); /* IE 9 */
  -webkit-transform: scale(4); /* Safari 3-8 */
  transform: scale(4);
  margin-top:60%;
}
.fotokareta{
	height:24px;
	width:50px;
}
.fotokareta:hover {
  -ms-transform: scale(4); /* IE 9 */
  -webkit-transform: scale(4); /* Safari 3-8 */
  transform: scale(4);
  margin-top:60%;
}
/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media print {
        #map {
          height: auto;
		  width: auto;
          margin: 0;
        }}
	  @media (max-width:800px){
		#idD {
		display:none;
		}
		#idP {
		display:none;
		}
		#nameD {
		display:none;
		}
	    #bMensagem {
		position: absolute;
		width: auto;
		height: auto;
		z-index: 1;
		left: auto;
		top: 60%;
		font-size:9px;
		background-color:#FFF;
		}
	  }
    td {
		text-align:left;
}
@media only screen and (max-width: 320px) and (min-width: 100px){
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
	#map {
          height: 100%;
          margin: 0;
		  width:100%;
        }
		.topupJava {
        font-size: 9px;
		height:25%;
		width:50%;
		size:10px;
      }
		#nameD {
		display:none;
		}
		#idP {
		display:none;
		}
	  #idD {
		display:none;
		}
	    #bMensagem {
		position: absolute;
		width: 20%;
		height: auto;
		z-index: 1;
		left: 70%;
		top: 80%;
		font-size:9px;
		background-color:#FFF;
		}
		#oFoto {
		position: absolute;
		width: 20%;
		height: auto;
		z-index: 1;
		left: 70%;
		top: 80%;
		font-size:9px;
		background-color:#FFF;
		}
		 #floating-panel {
        position:absolute;
        top: 0px;
        left: 0px;
        z-index: 5;
        padding: 4px;
        border: 1px solid #F5F5F5;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 2px;
        padding-left: 5px;
		background-color:#F5F5F5; */
		/*background-color:transparent;*/
		height:auto;
		color:rgba(0,0,255,1);
      	}
    </style>