Video conferencing skeleton.

css/base.css

@@ -309,6 +309,11 @@ ul.menu > li.separator:hover {
   background-color: #ccc;
 }
 
+ul.menu > li.disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
 /* The down arrow head - trigger for context menu */
 .menuTrigger {
   position: absolute;
@@ -3242,3 +3247,87 @@ ul.phone-country-selector span.country {
     width: unset;
   }
 }
+
+/* Video conferencing. */
+.call-party-speaking {
+  border: 2px solid red;
+}
+
+.call-party.carousel-item .caller-name.inactive {
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.25rem;
+}
+
+.call-party.carousel-item .muted {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+}
+
+.avatar-box.carousel-item {
+  /* Center the avatar in parent view. */
+  width: 45px;
+  height: 45px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#carousel-wrapper {
+  width: 100%;
+  max-width: 800px;
+  position: relative;
+  align-self: center;
+  padding-top: 1rem;
+}
+
+#carousel {
+  overflow: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+#carousel-prev, #carousel-next {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  background: white;
+  border: none;
+  padding: 8px;
+  border-radius: 50%;
+  outline: 0;
+  cursor: pointer;
+  position: absolute;
+  min-width: unset;
+  height: unset;
+}
+
+#carousel-prev {
+  top: 50%;
+  left: 0;
+  transform: translate(50%, -50%);
+  display: none;
+}
+
+#carousel-next {
+  top: 50%;
+  right: 0;
+  transform: translate(-50%, -50%);
+}
+
+#carousel-content {
+  display: grid;
+  justify-content: center;
+  grid-gap: 16px;
+  grid-auto-flow: column;
+  margin: auto;
+  box-sizing: border-box;
+}
+
+.carousel-item {
+  width: 180px;
+  height: 100px;
+  position: relative;
+}