Mercurial > libervia-templates

annotate sat_templates/templates/bulma/static/call.css @ 400:140690a18b63 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
call: group call design: Design for group call (which is used for both group call and A/V conferences) has been improved to: - have a working fullscreen button; - have a better display of peer users in grid, with responsive design; - have a nicer design for peer user, and adding avatar/nickname as overlay on the bottom of the video stream; - add a way to (un)pin a peer user, which make is appear on the whole width on top of the grid. rel 448 HG<S-Insert>: changed sat_templates/templates/bulma/call/group_peer.html
author Goffi <goffi@goffi.org>
date Tue, 06 Aug 2024 23:50:17 +0200
parents 9847e6dbeefa
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
1 #containers_wrapper {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
2 position: relative;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
3 height: 100%;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
4 width: 100%;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
5 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
6
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
7 #call_container {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
8 position: absolute;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
9 height: 100%;
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
10 width: 100%;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
11 }
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
12
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
13 #remote_video, #local_video {
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
14 width: 100%;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
15 height: 100%;
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
16 object-fit: contain;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
17 background-color: #000;
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
18 }
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
19
382
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
20 #local_video {
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
21 border: 3px solid #eee;
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
22 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
23 }
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
24
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
25 #remote_video {
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
26 position: absolute;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
27 top: 0;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
28 left: 0;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
29 }
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
30
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
31 .fullscreen-btn {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
32 position: absolute;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
33 top: 10px;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
34 right: 10px;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
35 z-index: 2;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
36 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
37
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
38 #local_video {
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
39 position: absolute;
382
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
40 /* We set some distance to the bottom to avoid overlap with action buttons */
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
41 bottom: 60px;
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
42 right: 10px;
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
43 width: 30%;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
44 height: 30%;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
45 }
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
46
382
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
47 .call-controls {
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
48 position: absolute;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
49 bottom: 10px;
382
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
50 left: 10px;
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
51 right: 10px;
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
52 z-index: 2;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
53 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
54
396
9847e6dbeefa bulma (call): add group call related templates.
Goffi <goffi@goffi.org>
parents: 382
diff changeset
55 .is-rotated-135 svg {
382
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
56 transform: rotate(135deg);
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
57 }
c573917ce388 bulma (call): redesign of call box:
Goffi <goffi@goffi.org>
parents: 374
diff changeset
58
372
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
59 .inactive::after {
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
60 content: "/";
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
61 position: absolute;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
62 font-size: 50px;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
63 top: 43%;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
64 left: 52%;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
65 transform: translate(-50%, -50%) rotate(45deg);
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
66 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
67
372
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
68 .muted::after {
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
69 color: red;
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
70 }
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
71
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
72 .screen-off::after {
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
73 color: #999;
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
74 }
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
75
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
76 .call_status {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
77 padding-top: 1.3rem;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
78 padding-bottom: 1.3rem;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
79 }
374
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
80
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
81 .dropdown-menu{
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
82 min-width: 0;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
83 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
84
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
85 .card .dropdown-trigger {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
86 opacity: 0;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
87 transition: opacity 0.3s;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
88 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
89
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
90 .card:hover .dropdown-trigger {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
91 opacity: 1;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
92 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
93
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
94 @media (max-width: 768px) {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
95 .card .dropdown-trigger {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
96 opacity: 1;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
97 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
98 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
99
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
100 .level-right {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
101 position: absolute;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
102 top: 0.5rem;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
103 right: 0.5rem;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
104 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
105
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
106 .icon-dot-3-vert {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
107 margin: 0 0.5rem;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
108 }