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>
SIMPAN PERUBAHAN