Mercurial > libervia-templates
diff sat_templates/templates/bulma/static/call.css @ 371:a5a80d761e3e
bulma (call): update template to integrate call features:
previously, call template was a minimum UI for testing implementation. This commit
introduce a usable UI with search interface, mute and full screen button, animations, and
other UI/UX improvments.
rel 423
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 09 Aug 2023 00:11:39 +0200 |
parents | c98a0a4a3fd0 |
children | a603cf0fa5d1 |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/static/call.css Mon Jul 10 15:43:49 2023 +0200 +++ b/sat_templates/templates/bulma/static/call.css Wed Aug 09 00:11:39 2023 +0200 @@ -1,11 +1,14 @@ +#containers_wrapper { + position: relative; + height: 100%; + width: 100%; -.call_box { +} + +#call_container { + position: absolute; + height: 100%; width: 100%; - height: 500px; - position: relative; - overflow: hidden; - border: 1px solid #ddd; - margin-bottom: 15px; } #remote_video, #local_video { @@ -13,7 +16,8 @@ box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); width: 100%; height: 100%; - object-fit: cover; + object-fit: contain; + background-color: #000; } #remote_video { @@ -22,11 +26,56 @@ left: 0; } +#hangup_btn { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.fullscreen-btn { + position: absolute; + top: 10px; + right: 10px; + z-index: 2; +} + #local_video { position: absolute; - bottom: 10px; - right: 10px; + bottom: 0; + right: 0; width: 30%; height: 30%; } +.controls { + position: absolute; + bottom: 10px; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} + +.muted::after { + content: "/"; + position: absolute; + font-size: 50px; + color: red; + top: 43%; + left: 52%; + transform: translate(-50%, -50%) rotate(45deg); +} + +.dropdown .dropdown-menu { + display: none; +} + +.dropdown.is-active .dropdown-menu { + display: block; +} + +.call_status { + padding-top: 1.3rem; + padding-bottom: 1.3rem; +}