Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/call.css @ 382:c573917ce388

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): redesign of call box: - hang up button has be moved next to other action buttons, and is now just an icon with no text, this save room and is coherent with usual A/V calls UIs - actions buttons (mute, desktop sharing, camera switching, hang up) and local video have been redesign to avoid overlapping on small screen. Local video is now a little higher. - remore video border has been suppressed
author Goffi <goffi@goffi.org>
date Fri, 18 Aug 2023 18:01:31 +0200
parents 5646df8bd391
children 9847e6dbeefa
comparison
equal deleted inserted replaced
381:387c8c5a3bee 382:c573917ce388
1 #containers_wrapper { 1 #containers_wrapper {
2 position: relative; 2 position: relative;
3 height: 100%; 3 height: 100%;
4 width: 100%; 4 width: 100%;
5
6 } 5 }
7 6
8 #call_container { 7 #call_container {
9 position: absolute; 8 position: absolute;
10 height: 100%; 9 height: 100%;
11 width: 100%; 10 width: 100%;
12 } 11 }
13 12
14 #remote_video, #local_video { 13 #remote_video, #local_video {
15 border: 3px solid #eee;
16 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
17 width: 100%; 14 width: 100%;
18 height: 100%; 15 height: 100%;
19 object-fit: contain; 16 object-fit: contain;
20 background-color: #000; 17 background-color: #000;
21 } 18 }
22 19
20 #local_video {
21 border: 3px solid #eee;
22 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
23 }
24
23 #remote_video { 25 #remote_video {
24 position: absolute; 26 position: absolute;
25 top: 0; 27 top: 0;
26 left: 0; 28 left: 0;
27 }
28
29 #hangup_btn {
30 padding-top: 2rem;
31 padding-bottom: 2rem;
32 } 29 }
33 30
34 .fullscreen-btn { 31 .fullscreen-btn {
35 position: absolute; 32 position: absolute;
36 top: 10px; 33 top: 10px;
38 z-index: 2; 35 z-index: 2;
39 } 36 }
40 37
41 #local_video { 38 #local_video {
42 position: absolute; 39 position: absolute;
43 bottom: 0; 40 /* We set some distance to the bottom to avoid overlap with action buttons */
44 right: 0; 41 bottom: 60px;
42 right: 10px;
45 width: 30%; 43 width: 30%;
46 height: 30%; 44 height: 30%;
47 } 45 }
48 46
49 .controls { 47 .call-controls {
50 position: absolute; 48 position: absolute;
51 bottom: 10px; 49 bottom: 10px;
52 left: 0; 50 left: 10px;
53 right: 0; 51 right: 10px;
54 display: flex;
55 justify-content: center;
56 align-items: center;
57 z-index: 2; 52 z-index: 2;
53 }
54
55 #hangup_btn svg {
56 transform: rotate(135deg);
58 } 57 }
59 58
60 .inactive::after { 59 .inactive::after {
61 content: "/"; 60 content: "/";
62 position: absolute; 61 position: absolute;
81 80
82 .dropdown-menu{ 81 .dropdown-menu{
83 min-width: 0; 82 min-width: 0;
84 } 83 }
85 84
86 /* Hide the call button by default on larger screens */
87 .card .dropdown-trigger { 85 .card .dropdown-trigger {
88 opacity: 0; 86 opacity: 0;
89 transition: opacity 0.3s; 87 transition: opacity 0.3s;
90 } 88 }
91 89
92 /* Show the button when the card is hovered */
93 .card:hover .dropdown-trigger { 90 .card:hover .dropdown-trigger {
94 opacity: 1; 91 opacity: 1;
95 } 92 }
96 93
97 /* Ensure it's always visible on smaller screens */
98 @media (max-width: 768px) { 94 @media (max-width: 768px) {
99 .card .dropdown-trigger { 95 .card .dropdown-trigger {
100 opacity: 1; 96 opacity: 1;
101 } 97 }
102 } 98 }
103 99
104 /* Position the button at the top right */
105 .level-right { 100 .level-right {
106 position: absolute; 101 position: absolute;
107 top: 0.5rem; 102 top: 0.5rem;
108 right: 0.5rem; 103 right: 0.5rem;
109 } 104 }
110 105
111 /* Add some spacing between the icon and the edges of the button */
112 .icon-dot-3-vert { 106 .icon-dot-3-vert {
113 margin: 0 0.5rem; 107 margin: 0 0.5rem;
114 } 108 }