<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="box">
<mat-card-content>
<mat-card-title>
Llamada entrante
<button type="button" class="close" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</mat-card-title>
<div class="img">
<img src="{{imgUrl}}">
</div>
<p class="name-company"> {{nombreCompany}}</p>
</mat-card-content>
<mat-card-content>
<h2>
<span>
<mat-card-title style="float: center">Cliente </mat-card-title>
<a style="float: center"> Nombre: {{iCCalls.nombre}}</a> <br>
Numero entrante: {{iCCalls.numero_origen}}</span></h2>
</mat-card-content>
<span>
<mat-card-actions (click)="takePhoneCall(iCCalls)">
<button class="btn-ver" mat-raised-button matTooltip="Constestar"> <mat-icon class="colorIcon"> call</mat-icon> <a> Contestar </a> </button>
</mat-card-actions>
</span>
</div>
.backgroundOpacity {
height: 100%;
width: 100%;
position: absolute;
// background-color: rgba(0, 0, 0, 0.1);
}
.mainPage {
position: relative;
height: 100vh;
// background-image: url("https://firebasestorage.googleapis.com/v0/b/miasistema.appspot.com/o/sidebar.jpeg?alt=media&token=efbb2a0f-3c69-452c-87b1-320767a2b7d3");
background-repeat: no-repeat;
background-size: cover;
}
.container {
height: 600px;
width: 500px;
background: aliceblue;
border-radius: 1%;
position: relative;
top: 15%;
margin-left: 94px;
}
.bodycontainer {
height: 180px;
width: 70%;
position: relative;
left: 35px;
top: 40px;
}
button {
margin-top: 1%;
opacity: 1;
border-radius: 5%;
}
input {
margin-top: 1%;
text-align: center;
}
.imagelogo img {
padding: 10% 26%;
}
.modal-header-ICC {
background: #2d4059;
border-radius: 0px;
color: white;
}
.btn-ICC {
position: relative;
left: 30%;
background-color: #f07b3f;
}
.btn-ver {
background: #4caf50;
a {
color: white !important;
}
}
.colorIcon {
color: white;
}
.modal-body {
font-size: medium;
font-weight: bold;
}
.companiesCard img {
width: 160px;
height: 160px;
}
.pop {
align-content: center;
}
.pop img {
width: 160px;
height: 160px;
align-content: center;
}
.card {
position: absolute;
top: 500%;
left: 50%;
transform: translate(-50%, 10%);
width: 300px;
min-height: 400px;
background: #fff;
box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
border-radius: 10px;
transition: 0.5s;
}
.card:hover {
box-shadow: 0 30px 70px rgba(0, 0, 0, .2);
}
.card .box {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
text-align: center;
padding: 20px;
box-sizing: border-box;
width: 100%;
}
.card .box .img {
width: 120px;
height: 120px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
.card .box .img img {
width: 100%;
height: 100%;
}
.card .box h2 {
font-size: 20px;
color: #262626;
margin: 20px auto;
}
.card .box h2 span {
font-size: 17px;
background: #212529;
color: #fff;
display: inline-block;
padding: 4px 10px;
border-radius: 15px;
}
.card .box p {
color: #262626;
}
.card .box span {
display: inline-flex;
}
.card .box ul {
margin: 0;
padding: 0;
}
.card .box ul li {
list-style: none;
float: left;
}
.card .box ul li a {
display: block;
color: #aaa;
margin: 0 10px;
font-size: 20px;
transition: 0.5s;
text-align: center;
}
.card .box ul li:hover a {
color: #e91e63;
transform: rotateY(360deg);
}
.modal-content {
border: 0px solid rgba(0, 0, 0, 0.2) !important;
}
.shakeit {
animation: shake 3s infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
.name-company {
font-size: 125%;
}
.llamada {
background: rgb(221, 220, 218);
}
.llamada h2 {
text-align: center;
font-size: 20px;
margin-top: 0px;
height: 30px;
padding: 8px;
}
.pop .card {
width: 330px;
height: 430px;
border-radius: 8px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
margin: 20px;
text-align: center;
transition: all 0.25s;
background: rgb(238, 235, 235);
}
.pop .card img {
width: 150px;
height: 150px;
border-radius: 100px;
border-color: white;
border-width: 3px;
border-style: solid;
}
.pop .card h4 {
font-weight: 600;
}
.pop .card p {
padding: 0 1rem;
font-size: 16px;
font-weight: 300;
}
.pop {
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
cursor: pointer;
a {
font-weight: 500;
text-decoration: none;
color: black;
font-size: 19px;
}
}
.button3 {
background-color: #f44336;
width: 310px;
height: 40px;
border-radius: 5px;
border-color: black;
border-width: 1px;
border-style: solid;
padding: 8px;
}
.button2 {
background-color: white;
width: 310px;
height: 40px;
border-radius: 5px;
color: black;
padding: 8px;
}
.button1 {
background-color: rgb(221, 220, 218);
color: rgb(179, 177, 177);
text-decoration: none;
display: inline-block;
font-size: 15px;
cursor: pointer;
margin-left: 130px;
margin-top: -50px;
position: absolute;
}
hr.style1 {
border-top: 1px solid #8c8b8b;
margin-left: 15px;
margin-right: 15px;
}
