Mercurial > libervia-templates

annotate sat_templates/templates/bulma/static/call.css @ 372:a603cf0fa5d1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): add a button for screen sharing: - add a button for screen sharing, only on desktop - split `muted` state to `inactive` and `muted` where `muted` is only about the color - use the `inactive` state with an other color (in `screen-off` class) to indicate when screen is not shared rel 432
author Goffi <goffi@goffi.org>
date Mon, 14 Aug 2023 16:31:46 +0200
parents a5a80d761e3e
children 5646df8bd391
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 .dropdown .dropdown-menu {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
78 display: none;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
79 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
80
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
81 .dropdown.is-active .dropdown-menu {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
82 display: block;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
83 }
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
84
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
85 .call_status {
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
86 padding-top: 1.3rem;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
87 padding-bottom: 1.3rem;
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
88 }