Mercurial > libervia-templates

annotate sat_templates/templates/bulma/static/call.css @ 374:5646df8bd391

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): calling mode improvments: - instead of a "switch" button, there are now 2 button with only an icon, one for video call and the other for audio call, they appear on the same row as the search bar - search item can now be extended using "call" blocks, and options are used - call search items don't show group, and now display an "extra" menu (3 dots menu) with a dropdown to select audio or video call.
author Goffi <goffi@goffi.org>
date Tue, 15 Aug 2023 17:12:18 +0200
parents a603cf0fa5d1
children c573917ce388
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%;
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
5
371
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
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
8 #call_container {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
9 position: absolute;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
10 height: 100%;
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
11 width: 100%;
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
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
14 #remote_video, #local_video {
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
15 border: 3px solid #eee;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
16 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
17 width: 100%;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
18 height: 100%;
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
19 object-fit: contain;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
20 background-color: #000;
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
21 }
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
22
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
23 #remote_video {
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
24 position: absolute;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
25 top: 0;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
26 left: 0;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
27 }
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
28
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
29 #hangup_btn {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
30 padding-top: 2rem;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
31 padding-bottom: 2rem;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
32 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
33
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
34 .fullscreen-btn {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
35 position: absolute;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
36 top: 10px;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
37 right: 10px;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
38 z-index: 2;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
39 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
40
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
41 #local_video {
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
42 position: absolute;
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
43 bottom: 0;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
44 right: 0;
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
45 width: 30%;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
46 height: 30%;
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
47 }
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
48
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
49 .controls {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
50 position: absolute;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
51 bottom: 10px;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
52 left: 0;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
53 right: 0;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
54 display: flex;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
55 justify-content: center;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
56 align-items: center;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
57 z-index: 2;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
58 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
59
372
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
60 .inactive::after {
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
61 content: "/";
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
62 position: absolute;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
63 font-size: 50px;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
64 top: 43%;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
65 left: 52%;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
66 transform: translate(-50%, -50%) rotate(45deg);
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
67 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
68
372
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
69 .muted::after {
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
70 color: red;
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
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
73 .screen-off::after {
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
74 color: #999;
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
75 }
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
76
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
77 .call_status {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
78 padding-top: 1.3rem;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
79 padding-bottom: 1.3rem;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
80 }
374
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
81
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
82 .dropdown-menu{
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
83 min-width: 0;
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
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
86 /* Hide the call button by default on larger screens */
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
87 .card .dropdown-trigger {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
88 opacity: 0;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
89 transition: opacity 0.3s;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
90 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
91
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
92 /* Show the button when the card is hovered */
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
93 .card:hover .dropdown-trigger {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
94 opacity: 1;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
95 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
96
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
97 /* Ensure it's always visible on smaller screens */
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
98 @media (max-width: 768px) {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
99 .card .dropdown-trigger {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
100 opacity: 1;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
101 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
102 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
103
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
104 /* Position the button at the top right */
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
105 .level-right {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
106 position: absolute;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
107 top: 0.5rem;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
108 right: 0.5rem;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
109 }
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
110
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
111 /* Add some spacing between the icon and the edges of the button */
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
112 .icon-dot-3-vert {
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
113 margin: 0 0.5rem;
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
114 }