Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/call.css @ 371:a5a80d761e3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
370:281d1c958d56 371:a5a80d761e3e
1 #containers_wrapper {
2 position: relative;
3 height: 100%;
4 width: 100%;
1 5
2 .call_box { 6 }
7
8 #call_container {
9 position: absolute;
10 height: 100%;
3 width: 100%; 11 width: 100%;
4 height: 500px;
5 position: relative;
6 overflow: hidden;
7 border: 1px solid #ddd;
8 margin-bottom: 15px;
9 } 12 }
10 13
11 #remote_video, #local_video { 14 #remote_video, #local_video {
12 border: 3px solid #eee; 15 border: 3px solid #eee;
13 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); 16 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
14 width: 100%; 17 width: 100%;
15 height: 100%; 18 height: 100%;
16 object-fit: cover; 19 object-fit: contain;
20 background-color: #000;
17 } 21 }
18 22
19 #remote_video { 23 #remote_video {
20 position: absolute; 24 position: absolute;
21 top: 0; 25 top: 0;
22 left: 0; 26 left: 0;
23 } 27 }
24 28
29 #hangup_btn {
30 padding-top: 2rem;
31 padding-bottom: 2rem;
32 }
33
34 .fullscreen-btn {
35 position: absolute;
36 top: 10px;
37 right: 10px;
38 z-index: 2;
39 }
40
25 #local_video { 41 #local_video {
26 position: absolute; 42 position: absolute;
27 bottom: 10px; 43 bottom: 0;
28 right: 10px; 44 right: 0;
29 width: 30%; 45 width: 30%;
30 height: 30%; 46 height: 30%;
31 } 47 }
32 48
49 .controls {
50 position: absolute;
51 bottom: 10px;
52 left: 0;
53 right: 0;
54 display: flex;
55 justify-content: center;
56 align-items: center;
57 z-index: 2;
58 }
59
60 .muted::after {
61 content: "/";
62 position: absolute;
63 font-size: 50px;
64 color: red;
65 top: 43%;
66 left: 52%;
67 transform: translate(-50%, -50%) rotate(45deg);
68 }
69
70 .dropdown .dropdown-menu {
71 display: none;
72 }
73
74 .dropdown.is-active .dropdown-menu {
75 display: block;
76 }
77
78 .call_status {
79 padding-top: 1.3rem;
80 padding-bottom: 1.3rem;
81 }