|
|
| * { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| body { |
| max-width: 100vw; |
| max-height: 100vh; |
| color: white; |
| } |
|
|
| #container { |
|
|
| position: absolute; |
| z-index: 0; |
|
|
| width: 100vw; |
| height: 100vh; |
|
|
| background: darkblue |
|
|
| } |
|
|
| #headerArea { |
|
|
| width: 95vw; |
| height: 13vh; |
|
|
| position: absolute; |
| top: 2vh; |
| left: 2vw; |
| |
| border-radius: 1vh; |
| |
| overflow-wrap: unset; |
| overflow-y: auto; |
| |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| |
| background: rgb(100,100,100); |
| font-size: 1.5rem; |
| |
| } |
|
|
| #headIcon { |
| display: block; |
| |
| width: 8vh; |
| height: 8vh; |
| border-radius: 50%; |
| |
| margin-right: 2vh; |
| |
| background-color: blue; |
| background-image: url('./img/avatar.jpg'); |
| background-position: 50% 50%; |
| background-size: 100% 100%; |
| background-repeat: no-repeat; |
| |
| border: solid rgb(200,150,250) 0.5vh; |
| |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| |
| } |
|
|
|
|
|
|
| |
|
|
| #outputArea { |
|
|
| width: 95vw; |
| height: 60vh; |
|
|
| position: absolute; |
| top: 20vh; |
| left: 2vw; |
|
|
| background: none; |
|
|
| overflow-wrap: unset; |
| overflow-y: auto; |
|
|
| } |
|
|
| |
| .chatBubble { |
|
|
| min-height: 6vh; |
| width: 70vw; |
| |
| padding: 0.5em; |
| margin: 1vh; |
|
|
| border: solid 2px grey; |
|
|
| overflow-wrap: break-word; |
|
|
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .sended { |
| margin-left: 7vw; |
| background: rgb(50,70,200); |
| ; |
| border-radius: 15px 15px 0px 15px; |
|
|
| border-right-color: darkblue; |
| border-bottom-color: darkblue; |
|
|
| } |
|
|
| .received { |
| margin-left: 3vw; |
| background: rgb(20,100,230); |
| border-radius: 15px 15px 15px 0px; |
|
|
| border-left-color: darkblue; |
| border-bottom-color: darkblue; |
| |
| } |
|
|
| .error { |
|
|
| width: 80vw; |
|
|
| margin-left: 4vw; |
| background: rgb(200,30,30); |
| border-radius: 5px 5px 5px 5px; |
|
|
| border-left-color: darkred; |
| border-bottom-color: darkred; |
|
|
| } |
|
|
| .message { |
|
|
| width: 80vw; |
| |
| margin-left: 4vw; |
| background: rgb(100,100,130); |
| border-radius: 5px 5px 5px 5px; |
|
|
| border-color: white; |
| text-align: center; |
| |
| } |
|
|
| .messageBox { |
| display: block; |
| } |
|
|
| .controlBox { |
|
|
| width: 100%; |
| height: 4vh; |
|
|
| display: flex; |
| justify-content: end; |
| align-items: stretch; |
|
|
| } |
|
|
| .message .controlBox { |
| display: none; |
| } |
|
|
| .deleteButton { |
|
|
| display: block; |
| width: 1.2rem; |
| height: 1.2rem; |
|
|
| margin-right: 1vw; |
|
|
| background: none; |
| background-repeat: no-repeat; |
| background-size: 80% 80%; |
| background-position: 50% 50%; |
| |
| background-image: url('img/delete-blank.png'); |
| |
| border-radius: 0.3rem; |
| border: none; |
| |
| } |
|
|
| .deleteButton:hover { |
| background-color: #307; |
| border: solid white 1px; |
| } |
|
|
| .statusIcon { |
|
|
| display: block; |
| width: 1.2rem; |
| height: 1.2rem; |
|
|
| margin-right: 1vw; |
|
|
| background: none; |
| background-repeat: no-repeat; |
| background-image: url('img/delete-message.svg'); |
| background-size: 80% 80%; |
| background-position: 50% 50%; |
|
|
| border: none; |
| } |
|
|
| .statusSended { |
| background-image: url('img/clock.svg'); |
| } |
|
|
| .statusChecked { |
| background-image: url('img/check.svg'); |
| } |
|
|
| .satusError { |
| background-image: url('img/error.svg'); |
| } |
|
|
| |
|
|
| #inputArea { |
|
|
| width: 95vw; |
| height: 15vh; |
|
|
| position: absolute; |
| bottom: 2vh; |
| left: 2vw; |
|
|
| display: flex; |
| justify-content: center; |
| align-items: center; |
|
|
| border: solid 2px grey; |
| border-radius: 5vh; |
|
|
| background: gray; |
|
|
| } |
|
|
| #inputComand { |
|
|
| width: 75vw; |
| height: 11vh; |
|
|
| margin: 1vh; |
|
|
| font-size: 1.5em; |
| text-align: start; |
| vertical-align: top; |
|
|
| border: solid 2px grey; |
| border-radius: 2vh; |
|
|
| background-color: rgb(0,0,100); |
| color: white; |
|
|
| } |
|
|
| #clearButton { |
|
|
| width: 7vh; |
| height: 7vh; |
|
|
| margin: 1vh; |
|
|
| font-size: 0.7em; |
| text-align: center; |
|
|
| background-color: white; |
|
|
| border: solid 2px rgb(150, 100, 100); |
| border-radius: 1vh; |
|
|
| display: flex; |
| align-items: center; |
| justify-content: center; |
|
|
| } |
|
|
| #clearButton .svg-icon { |
| width: 5vh; |
| height: 5vh; |
| } |
|
|
| #clearButton .svg-icon-path { |
| fill: rgb(150, 100, 100); |
| } |
|
|
| #clearButton:hover .svg-icon-path { |
| fill: red; |
| } |
|
|
|
|
| #sendButton { |
|
|
| width: 10vh; |
| height: 10vh; |
|
|
| margin: 1vh; |
|
|
| font-size: 0.7em; |
| text-align: center; |
|
|
| background-color: rgb(0,0,100); |
| background-image: linear-gradient(135deg, fuchsia, blue, cyan); |
| background-size: 300% 100%; |
|
|
| animation: background-default 5s ease infinite; |
|
|
| border: solid 5px; |
| border-radius: 50%; |
|
|
| display: flex; |
| align-items: center; |
| justify-content: center; |
|
|
| color: white; |
| |
| } |
|
|
| #sendButton:hover { |
|
|
| background-color: rgb(0,0,50); |
| background-image: linear-gradient(45deg, blue, cyan); |
|
|
| animation: background-hover 5s ease infinite; |
| |
| border: solid 5px cyan; |
| } |
|
|
| #sendButton .svg-icon { |
| width: 7vh; |
| height: 7vh; |
| } |
|
|
| #sendButton .svg-icon-path { |
| fill: white; |
| } |
|
|
| #sendButton:hover .svg-icon-path { |
| fill: white; |
| } |
|
|
| |
|
|
| @keyframes background-default { |
| 0% { |
| background-position: 0% 50%; |
| border-color: cyan; |
|
|
| } |
| 50% { |
| background-position: 100% 50%; |
| border-color: fuchsia; |
|
|
| } |
| 100% { |
| background-position: 0% 50%; |
| border-color: cyan; |
|
|
| } |
| } |
|
|
| @keyframes background-hover { |
| 0% { |
| background-position: 0% 50%; |
| border-color: cyan; |
|
|
| } |
| 50% { |
| background-position: 100% 50%; |
| border-color: blue; |
|
|
| } |
| 100% { |
| background-position: 0% 50%; |
| border-color: cyan; |
|
|
| } |
| } |
|
|
|
|
| @keyframes icon-gradient { |
| 0% { |
| fill: #FFFFAB; |
| } |
| 50% { |
| fill: white; |
| } |
| 100% { |
| fill: #FFFFAB; |
| } |
| } |
|
|
| @keyframes vibrate { |
| 0%{ |
| rotation: 45deg; |
| } |
| |
| 100% { |
| rotation: 360deg; |
| } |
| } |
