issue#1 Support error screen. Support notification balloon for neflix service preparing. Going on tune up UI.

This commit is contained in:
Paul Kim
2022-06-08 02:22:39 +09:00
parent 8b0160bfda
commit cf95ff42b0
16 changed files with 628 additions and 250 deletions

View File

@@ -473,7 +473,7 @@
.popup .amenity>.items {
/* width: 100%; */
height: 390px;
background-color: rgba(48, 48, 48, 1.0);
/* background-color: rgba(48, 48, 48, 1.0); */
/* overflow-y: auto; */
overflow-y: hidden;
overflow-x: hidden;
@@ -484,11 +484,13 @@
.popup .amenity>.items table {
width: 100%;
border-collapse: collapse;
}
.popup .amenity>.items .table tr {
width: 100%;
height: 130px;
border-bottom: 1px solid rgb(52, 52, 52);
/* background-color: rgb(0, 0, 128); */
}
@@ -586,7 +588,7 @@
}
.popup .amenity>.items .table tr.active {
background-color: rgba(67, 67, 67, 1);
background-color: rgba(48, 48, 48, 1.0);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}
@@ -658,6 +660,7 @@
.popup .amenity>.order-details>.items table {
width: 100%;
border-collapse: collapse;
}
.popup .amenity>.order-details>.items .table tr {
@@ -740,7 +743,8 @@
}
.popup .amenity>.order-details>.items .table tr.active {
background-color: rgba(67, 67, 67, 1);
/* background-color: rgba(67, 67, 67, 1); */
background-color: rgba(48, 48, 48, 1.0);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}
@@ -807,7 +811,6 @@
border-color: rgb(96, 96, 96);
vertical-align: top;
/* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); */
background-color: rgba(67, 67, 67, 1);
/* box-shadow: 0px 0px 30px rgba(0, 0, 0, 1); */
}
@@ -839,7 +842,7 @@
.popup .roomservice .menu>.items {
/* width: 100%; */
height: 390px;
background-color: rgba(48, 48, 48, 1.0);
/* background-color: rgba(48, 48, 48, 1.0); */
/* overflow-y: auto; */
overflow-y: hidden;
overflow-x: hidden;
@@ -850,11 +853,13 @@
.popup .roomservice .menu>.items table {
width: 100%;
border-collapse: collapse;
}
.popup .roomservice .menu>.items .table tr {
width: 100%;
height: 106px;
border-bottom: 1px solid rgb(52, 52, 52);
/* background-color: rgb(0, 0, 128); */
}
@@ -882,7 +887,7 @@
height: 70px;
margin: 0px 5px 0px 5px;
display: block;
vertical-align: top;
/* vertical-align: top; */
font-size: 18px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
/* background-color: rgba(124, 124, 0, 1); */
@@ -929,7 +934,8 @@
}
.popup .roomservice .menu>.items .table tr.active {
background-color: rgba(67, 67, 67, 1);
/* background-color: rgba(67, 67, 67, 1); */
background-color: rgba(48, 48, 48, 1.0);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}
@@ -1267,4 +1273,72 @@
background-position: right center;
background-size: contain;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
}
/* Notification Style */
.popup>.notification {
display: none;
position: absolute;
top: 10%;
left: 73%;
width: 26%;
height: 10%;
}
.popup>.notification>.balloon {
position: relative;
display: inline-block;
}
.popup>.notification>.balloon span {
display: inline-block;
padding: 10px;
color: #fff;
background: #ad1e51;
border-radius: 20px;
font-size: 28px;
}
.popup>.notification>.balloon:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.popup>.notification>.balloon.right:after,
.popup>.notification>.balloon.left:after {
border-width: 10px 15px;
top: 50%;
margin-top: -10px;
}
.popup>.notification>.balloon.top:after,
.popup>.notification>.balloon.bottom:after {
border-width: 15px 10px;
left: 50%;
margin-left: -10px;
}
.popup>.notification>.balloon.top:after {
border-color: #ad1e51 transparent transparent transparent;
bottom: -25px;
}
.popup>.notification>.balloon.bottom:after {
border-color: transparent transparent #ad1e51 transparent;
top: -25px;
}
.popup>.notification>.balloon.left:after {
border-color: transparent #ad1e51 transparent transparent;
left: -25px;
}
.popup>.notification>.balloon.right:after {
border-color: transparent transparent transparent #ad1e51;
right: -25px;
}