theluyuan/jitsi-meet
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

init
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
Details

Browse Source
This commit is contained in:
theluyuan
2025-09-02 14:49:16 +08:00
commit 38ba663466
2885 changed files with 391107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
css/404.scss Normal file
View File

@@ -0,0 +1,15 @@
.error_page {
width: 60%;
margin: 20% auto;
text-align: center;
h2 {
font-size: 3rem;
color : #f2f2f2;
}
&__message {
font-size: 1.5rem;
margin-top: 20px;
}
}

190
css/_base.scss Normal file
View File

@@ -0,0 +1,190 @@
/**
* Safari will limit input in input elements to one character when user-select
* none is applied. Other browsers already support selecting within inputs while
* user-select is none. As such, disallow user-select except on inputs.
*/
* {
-webkit-user-select: none;
user-select: none;
// Firefox only
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, .5) transparent;
}
input,
textarea {
-webkit-user-select: text;
user-select: text;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0px;
width: 100%;
height: 100%;
font-size: 0.75rem;
font-weight: 400;
overflow: hidden;
color: #F1F1F1;
background: #040404; // should match DEFAULT_BACKGROUND from interface_config
}
/**
* This will hide the focus indicator if an element receives focus via the mouse,
* but it will still show up on keyboard focus, thus preserving accessibility.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
.jitsi-icon {
&-default svg {
fill: white;
}
}
.disabled .jitsi-icon svg {
fill: #929292;
}
.jitsi-icon.gray svg {
fill: #5E6D7A;
cursor: pointer;
}
p {
margin: 0;
}
body, input, textarea, keygen, select, button {
font-family: $baseFontFamily !important;
}
button, input, select, textarea {
margin: 0;
vertical-align: baseline;
font-size: 1em;
}
button, select, input[type="button"],
input[type="reset"], input[type="submit"] {
cursor: pointer;
}
textarea {
word-wrap: break-word;
resize: none;
line-height: 1.5em;
}
input[type='text'], input[type='password'], textarea {
outline: none; /* removes the default outline */
resize: none; /* prevents the user-resizing, adjust to taste */
}
button {
color: #FFF;
background-color: #44A5FF;
border-radius: $borderRadius;
&.no-icon {
padding: 0 1em;
}
}
button,
form {
display: block;
}
.watermark {
display: block;
position: absolute;
top: 15;
width: $watermarkWidth;
height: $watermarkHeight;
background-size: contain;
background-repeat: no-repeat;
z-index: $watermarkZ;
}
.leftwatermark {
max-width: 140px;
max-height:70px;
left: 32px;
top: 32px;
background-position: center left;
background-repeat: no-repeat;
background-size: contain;
&.no-margin {
left:0;
top:0;
}
}
.rightwatermark {
right: 32px;
top: 32px;
background-position: center right;
}
.poweredby {
position: absolute;
left: 25;
bottom: 7;
font-size: 0.875rem;
color: rgba(255,255,255,.50);
text-decoration: none;
z-index: $watermarkZ;
}
/**
* Re-style default OS scrollbar.
*/
::-webkit-scrollbar {
background: transparent;
width: 7px;
height: $scrollHeight;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-track-piece {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #3D3D3D;
border-radius: 4px;
}
/* Necessary for the new icons to work properly. */
.jitsi-icon svg path {
fill: inherit !important;
}
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}

220
css/_chat.scss Normal file
View File

@@ -0,0 +1,220 @@
@use './variables';
#chat-conversation-container {
// extract message input height
box-sizing: border-box;
height: calc(100% - 64px);
overflow: hidden;
position: relative;
}
#chatconversation {
box-sizing: border-box;
flex: 1;
font-size: 0.75rem;
height: calc(100% - 10px);
line-height: 1.25rem;
overflow: auto;
padding: 16px;
text-align: left;
word-wrap: break-word;
display: flex;
flex-direction: column;
&.focus-visible {
outline: 0;
margin: 4px;
border-radius: 0 0 variables.$borderRadius variables.$borderRadius;
box-shadow: 0px 0px 0px 2px #4687ed; // focus01/primary07
}
& > :first-child {
margin-top: auto;
}
a {
display: block;
}
a:link {
color: rgb(184, 184, 184);
}
a:visited {
color: white;
}
a:hover {
color: rgb(213, 213, 213);
}
a:active {
color: black;
}
}
.chat-input-container {
padding: 0 16px 24px;
}
#chat-input {
display: flex;
align-items: flex-end;
position: relative;
}
.chat-input {
flex: 1;
margin-right: 8px;
}
#nickname {
text-align: center;
color: #9d9d9d;
font-size: 1rem;
margin: auto 0;
padding: 0 16px;
label[for="nickinput"] {
> div > span {
color: #B8C7E0;
}
}
input {
height: 40px;
}
label {
line-height: 1.5rem;
}
}
.mobile-browser {
#nickname {
input {
height: 48px;
}
}
.chatmessage .usermessage {
font-size: 1rem;
}
}
.chatmessage {
&.error {
border-radius: 0px;
.timestamp,
.display-name {
display: none;
}
.usermessage {
color: #ffffff;
padding: 0;
}
}
.messagecontent {
max-width: 100%;
overflow: hidden;
}
}
#smileys {
font-size: 1.625rem;
margin: auto;
cursor: pointer;
}
#smileys img {
width: 22px;
padding: 2px;
}
.smiley-input {
display: flex;
position: absolute;
top: 0;
left: 0;
}
#smileysContainer .smiley {
font-size: 1.625rem;
}
.smileyContainer {
width: 40px;
height: 40px;
display: inline-block;
text-align: center;
}
.smileyContainer:hover {
background-color: rgba(255, 255, 255, 0.15);
border-radius: 5px;
cursor: pointer;
}
.chat-message-group {
&.local {
align-items: flex-end;
.display-name {
display: none;
}
.timestamp {
text-align: right;
}
}
&.error {
.display-name {
display: none;
}
}
}
.chat-dialog {
display: flex;
flex-direction: column;
height: 100%;
margin-top: -5px; // Margin set by atlaskit.
&-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 16px;
width: calc(100% - 32px);
box-sizing: border-box;
color: #fff;
font-weight: 600;
font-size: 1.5rem;
line-height: 2rem;
.jitsi-icon {
cursor: pointer;
}
}
#chatconversation {
width: 100%;
}
}
/**
* Make header close button more easily tappable on mobile.
*/
.mobile-browser .chat-dialog-header .jitsi-icon {
display: grid;
place-items: center;
height: 48px;
width: 48px;
background: #36383C;
border-radius: 3px;
}

93
css/_chrome-extension-banner.scss Normal file
View File

@@ -0,0 +1,93 @@
.chrome-extension-banner {
position: fixed;
width: 406px;
height: $chromeExtensionBannerHeight;
background: #FFF;
box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.25);
border-radius: 4px;
z-index: 1000;
float: right;
display: flex;
flex-direction: column;
padding: 20px 20px;
top: $chromeExtensionBannerTop;
right: $chromeExtensionBannerRight;
&__pos_in_meeting {
top: $chromeExtensionBannerTopInMeeting;
right: $chromeExtensionBannerRightInMeeeting;
}
&__container {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
&__button-container {
display: flex;
}
&__checkbox-container {
display: $chromeExtensionBannerDontShowAgainDisplay;
margin-left: 45px;
margin-top: 16px;
}
&__checkbox-label {
font-size: 0.875rem;
line-height: 1.125rem;
display: flex;
align-items: center;
letter-spacing: -0.006em;
color: #1C2025;
}
&__icon-container {
display: flex;
background: url('../images/chromeLogo.svg');
background-repeat: no-repeat;
width: 27px;
height: 27px;
}
&__text-container {
font-size: 0.875rem;
line-height: 1.125rem;
display: flex;
align-items: center;
letter-spacing: -0.006em;
color: #151531;
width: 329px;
}
&__close-container {
display: flex;
width: 12px;
height: 12px;
}
&__gray-close-icon {
fill: #5E6D7A;
width: 12px;
height: 12px;
cursor: pointer;
}
&__button-open-url {
background: #0A57EB;
border-radius: 24px;
margin-left: 45px;
width: 236px;
height: 40px;
cursor: pointer;
}
&__button-text {
font-weight: 600;
font-size: 0.875rem;
line-height: 2.5rem;
text-align: center;
letter-spacing: -0.006em;
color: #FFFFFF;
}
}

6
css/_functions.scss Normal file
View File

@@ -0,0 +1,6 @@
/* Functions */
/* Pixels to Ems function */
@function em($value, $base: 16) {
@return #{$value / $base}em;
}

30
css/_inlay.scss Normal file
View File

@@ -0,0 +1,30 @@
.inlay {
margin-top: 14%;
@include border-radius(4px);
padding: 40px 38px 44px;
color: #fff;
background: lighten(#474747, 20%);
text-align: center;
&__title {
margin: 17px 0;
padding-bottom: 17px;
color: #ffffff;
font-size: 1.25rem;
letter-spacing: 0.3px;
border-bottom: 1px solid lighten(#FFFFFF, 10%);
}
&__text {
color: #ffffff;
display: block;
margin-top: 22px;
font-size: 1rem;
}
&__icon {
margin: 0 10px;
font-size: 3.125rem;
}
}

4
css/_login_menu.scss Normal file
View File

@@ -0,0 +1,4 @@
a.disabled {
color: gray !important;
pointer-events: none;
}

185
css/_meetings_list.scss Normal file
View File

@@ -0,0 +1,185 @@
.meetings-list {
font-size: 0.875rem;
color: #253858;
line-height: 1.25rem;
text-align: left;
text-overflow: ellipsis;
display: flex;
flex-direction: column;
position: relative;
overflow-y: auto;
flex-grow: 1;
.meetings-list-empty {
text-align: center;
align-items: center;
justify-content: center;
display: flex;
flex-grow: 1;
flex-direction: column;
.description {
color: #2f3237;
font-size: 0.875rem;
line-height: 1.125rem;
margin-bottom: 16px;
max-width: 436px;
}
}
.meetings-list-empty-image {
text-align: center;
margin: 24px 0 20px 0;
}
.meetings-list-empty-button {
align-items: center;
color: #0163FF;
cursor: pointer;
display: flex;
font-size: 0.875rem;
line-height: 1.125rem;
margin: 24px 0 32px 0;
}
.meetings-list-empty-icon {
display: inline-block;
margin-right: 8px;
}
.button {
background: #0074E0;
border-radius: 4px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
cursor: pointer;
}
.calendar-action-buttons {
.button {
margin: 0px 10px;
}
}
.item {
background: #fff;
box-sizing: border-box;
border-radius: 4px;
display: inline-flex;
margin: 4px 4px 0 4px;
min-height: 60px;
width: calc(100% - 8px);
word-break: break-word;
display: flex;
flex-direction: row;
text-align: left;
&:first-child {
margin-top: 0px;
}
.left-column {
order: -1;
display: flex;
flex-direction: column;
flex-grow: 0;
padding-left: 16px;
padding-top: 13px;
}
.right-column {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
padding-left: 16px;
padding-top: 13px;
position: relative;
}
.title {
font-size: 0.75rem;
font-weight: 600;
line-height: 1rem;
margin-bottom: 4px;
}
.subtitle {
color: #5E6D7A;
font-weight: normal;
font-size: 0.75rem;
line-height: 1rem;
}
.actions {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 0;
margin-right: 16px;
}
&.with-click-handler {
cursor: pointer;
}
&.with-click-handler:hover,
&.with-click-handler:focus {
background-color: #c7ddff;
}
.add-button {
width: 30px;
height: 30px;
padding: 0px;
}
i {
cursor: inherit;
}
.join-button {
display: none;
}
&:hover .join-button {
display: block
}
}
.delete-meeting {
display: none;
margin-right: 16px;
position: absolute;
&>svg {
fill: #0074e0;
}
}
.item:hover,
.item:focus,
.item:focus-within {
.delete-meeting {
display: block;
}
.delete-meeting:hover {
&>svg {
fill: #4687ED;
}
}
}
@media (max-width: 1024px) { /* Targets iPads and smaller devices */
.item {
.delete-meeting {
display: block !important;
}
}
}
}

30
css/_meter.scss Normal file
View File

@@ -0,0 +1,30 @@
.jitsi-icon {
&.metr {
display: inline-block;
& > svg {
fill: #525252;
width: 38px;
}
}
&.metr--disabled {
& > svg {
fill: #525252;
}
}
}
.metr-l-0 {
rect:first-child {
fill: #1EC26A;
}
}
@for $i from 1 through 7 {
.metr-l-#{$i} {
rect:nth-child(-n+#{$i+1}) {
fill: #1EC26A;
}
}
}

30
css/_mini_toolbox.scss Normal file
View File

@@ -0,0 +1,30 @@
.always-on-top-toolbox {
background-color: $newToolbarBackgroundColor;
border-radius: 3px;
display: flex;
z-index: $toolbarZ;
.toolbox-icon {
cursor: pointer;
padding: 7px;
width: 22px;
height : 22px;
&.toggled {
background: none;
}
&.disabled {
cursor: initial;
}
}
}
.always-on-top-toolbox {
flex-direction: row;
left: 50%;
position: absolute;
bottom: 10px;
transform: translateX(-50%);
padding: 3px !important;
}

209
css/_mixins.scss Normal file
View File

@@ -0,0 +1,209 @@
/**
* Animation mixin.
*/
@mixin animation($animate...) {
$max: length($animate);
$animations: '';
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
-o-animation: $animations;
animation: $animations;
}
@mixin flex() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/**
* Keyframes mixin.
*/
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
@mixin circle($diameter) {
width: $diameter;
height: $diameter;
border-radius: 50%;
}
/**
* Absolute position the element at the top left corner
**/
@mixin topLeft() {
position: absolute;
top: 0;
left: 0;
}
@mixin absoluteAligning() {
top: 50%;
left: 50%;
position: absolute;
@include transform(translate(-50%, -50%));
}
/**
* Defines the maximum width and height
**/
@mixin maxSize($value) {
max-width: $value;
max-height: $value;
}
@mixin transform($func) {
-moz-transform: $func;
-ms-transform: $func;
-webkit-transform: $func;
-o-transform: $func;
transform: $func;
}
@mixin transition($transition...) {
-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
}
/**
* Mixin styling a placeholder.
**/
@mixin placeholder() {
$selectors: (
"::-webkit-input-placeholder",
"::-moz-placeholder",
":-moz-placeholder",
":-ms-input-placeholder"
);
@each $selector in $selectors {
#{$selector} {
@content;
}
}
}
/**
* Mixin styling a slider track for different browsers.
**/
@mixin slider() {
$selectors: (
"input[type=range]::-webkit-slider-runnable-track",
"input[type=range]::-moz-range-track",
"input[type=range]::-ms-track"
);
@each $selector in $selectors {
#{$selector} {
@content;
}
}
}
/**
* Mixin styling a slider thumb for different browsers.
**/
@mixin slider-thumb() {
$selectors: (
"input[type=range]::-webkit-slider-thumb",
"input[type=range]::-moz-range-thumb",
"input[type=range]::-ms-thumb"
);
@each $selector in $selectors {
#{$selector} {
@content;
}
}
}
@mixin box-shadow($h, $y, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow: inset $h $y $blur $color;
-moz-box-shadow: inset $h $y $blur $color;
box-shadow: inset $h $y $blur $color;
} @else {
-webkit-box-shadow: $h $y $blur $color;
-moz-box-shadow: $h $y $blur $color;
box-shadow: $h $y $blur $color;
}
}
@mixin no-box-shadow {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
@mixin box-sizing($box-model) {
-webkit-box-sizing: $box-model; // Safari <= 5
-moz-box-sizing: $box-model; // Firefox <= 19
box-sizing: $box-model;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
/* stops bg color from leaking outside the border: */
background-clip: padding-box;
}
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin text-truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/**
* Creates a semi-transparent background with the given color and alpha
* (opacity) value.
*/
@mixin transparentBg($color, $alpha) {
background-color: rgba(red($color), green($color), blue($color), $alpha);
}
/**
* Change the direction of the current element to LTR, but do not change the direction
* of its children; Keep them RTL.
*/
@mixin ltr {
body[dir=rtl] & {
direction: ltr;
& > * {
direction: rtl;
}
}
}

77
css/_navigate_section_list.scss Normal file
View File

@@ -0,0 +1,77 @@
%navigate-section-list-text {
width: 100%;
font-size: 0.875rem;
line-height: 1.25rem;
color: $welcomePageTitleColor;
text-align: left;
font-family: 'open_sanslight', Helvetica, sans-serif;
}
%navigate-section-list-tile-text {
@extend %navigate-section-list-text;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
.navigate-section-list-tile {
background-color: #1754A9;
border-radius: 4px;
box-sizing: border-box;
display: inline-flex;
margin-bottom: 8px;
margin-right: 8px;
min-height: 100px;
padding: 16px;
width: 100%;
&.with-click-handler {
cursor: pointer;
}
&.with-click-handler:hover {
background-color: #1a5dbb;
}
i {
cursor: inherit;
}
.element-after {
display: flex;
align-items: center;
justify-content: center;
}
.join-button {
display: none;
}
&:hover .join-button {
display: block
}
}
.navigate-section-tile-body {
@extend %navigate-section-list-tile-text;
font-weight: normal;
line-height: 1.5rem;
}
.navigate-section-list-tile-info {
flex: 1;
word-break: break-word;
}
.navigate-section-tile-title {
@extend %navigate-section-list-tile-text;
font-weight: bold;
line-height: 1.5rem;
}
.navigate-section-section-header {
@extend %navigate-section-list-text;
font-weight: bold;
margin-bottom: 16px;
display: block;
}
.navigate-section-list {
position: relative;
margin-top: 36px;
margin-bottom: 36px;
width: 100%;
}

6
css/_participants-pane.scss Normal file
View File

@@ -0,0 +1,6 @@
.jitsi-icon {
&-dominant-speaker {
background-color: #1EC26A;
border-radius: 3px;
}
}

0
css/_plan-limit.scss Normal file
View File

15
css/_policy.scss Normal file
View File

@@ -0,0 +1,15 @@
.policy {
&__logo {
display: block;
width: 200px;
height: 50px;
margin: 30px auto 0;
}
&__text {
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 300;
}
}

35
css/_popover.scss Normal file
View File

@@ -0,0 +1,35 @@
.popover {
z-index: 8;
.popover-content {
position: relative;
}
&.hover {
margin: -16px -24px;
.popover-content {
margin: 16px 24px;
&.top {
bottom: 8px;
}
&.bottom {
top: 4px;
}
&.left {
right: 4px;
}
&.right {
left: 4px;
}
}
}
}
.excalidraw .popover {
margin: 0;
}

19
css/_popup_menu.scss Normal file
View File

@@ -0,0 +1,19 @@
/**
* Initialize
**/
.popupmenu__contents {
.popupmenu__volume-slider {
&::-webkit-slider-runnable-track {
background-color: #246FE5;
}
&::-moz-range-track {
background-color: #246FE5;
}
&::-ms-fill-lower {
background-color: #246FE5;
}
}
}

1
css/_promotional-footer.scss Normal file
View File

@@ -0,0 +1 @@
/** Insert custom CSS for any additional content in the promotional footer **/

214
css/_reactions-menu.scss Normal file
View File

@@ -0,0 +1,214 @@
@use 'sass:math';
.reactions-menu {
width: 330px;
background: #242528;
box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
border-radius: 6px;
padding: 16px;
&.with-gif {
width: 380px;
.reactions-row .toolbox-button:last-of-type {
top: 3px;
& .toolbox-icon.toggled {
background-color: #000000;
}
}
}
&.overflow {
width: 100%;
.toolbox-icon {
width: 48px;
height: 48px;
span.emoji {
width: 48px;
height: 48px;
}
}
.reactions-row {
display: flex;
flex-direction: row;
justify-content: space-around;
.toolbox-button {
margin-right: 0;
}
.toolbox-button:last-of-type {
top: 0;
}
}
}
.toolbox-icon {
width: 40px;
height: 40px;
border-radius: 6px;
span.emoji {
width: 40px;
height: 40px;
font-size: 1.375rem;
display: flex;
align-items: center;
justify-content: center;
transition: font-size ease .1s;
@for $i from 1 through 12 {
&.increase-#{$i}{
font-size: calc(1.25rem + #{$i}px);
}
}
}
}
.reactions-row {
.toolbox-button {
margin-right: 8px;
touch-action: manipulation;
position: relative;
}
.toolbox-button:last-of-type {
margin-right: 0;
}
}
.raise-hand-row {
margin-top: 16px;
.toolbox-button {
width: 100%;
}
.toolbox-icon {
width: 100%;
flex-direction: row;
align-items: center;
span.text {
font-style: normal;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.5rem;
margin-left: 8px;
}
}
}
}
.reactions-animations-overflow-container {
position: absolute;
width: 20%;
bottom: 0;
left: 40%;
height: 0;
}
.reactions-menu-popup-container {
display: inline-block;
position: relative;
}
.reactions-animations-container {
left: 50%;
bottom: 0px;
display: inline-block;
position: absolute;
}
$reactionCount: 20;
@function random($min, $max) {
@return math.random() * ($max - $min) + $min;
}
.reaction-emoji {
position: absolute;
font-size: 1.5rem;
line-height: 2rem;
width: 32px;
height: 32px;
top: 0;
left: 20px;
opacity: 0;
z-index: 1;
&.reaction-0 {
animation: flowToRight 5s forwards ease-in-out;
}
@for $i from 1 through $reactionCount {
&.reaction-#{$i} {
animation: animation-#{$i} 5s forwards ease-in-out;
top: #{random(-40, 10)}px;
left: #{random(0, 30)}px;
}
}
}
@keyframes flowToRight {
0% {
transform: translate(0px, 0px) scale(0.6);
opacity: 1;
}
70% {
transform: translate(40px, -70dvh) scale(1.5);
opacity: 1;
}
75% {
transform: translate(40px, -70dvh) scale(1.5);
opacity: 1;
}
100% {
transform: translate(140px, -50dvh) scale(1);
opacity: 0;
}
}
@mixin animation-list {
@for $i from 1 through $reactionCount {
$topX: random(-100, 100);
$topY: random(65, 75);
$bottomX: random(150, 200);
$bottomY: random(40, 50);
@if $topX < 0 {
$bottomX: -$bottomX;
}
@keyframes animation-#{$i} {
0% {
transform: translate(0, 0) scale(0.6);
opacity: 1;
}
70% {
transform: translate(#{$topX}px, -#{$topY}dvh) scale(1.5);
opacity: 1;
}
75% {
transform: translate(#{$topX}px, -#{$topY}dvh) scale(1.5);
opacity: 1;
}
100% {
transform: translate(#{$bottomX}px, -#{$bottomY}dvh) scale(1);
opacity: 0;
}
}
}
}
@include animation-list;

199
css/_recording.scss Normal file
View File

@@ -0,0 +1,199 @@
.recording-dialog {
flex: 0;
flex-direction: column;
.recording-header {
align-items: center;
display: flex;
flex: 0;
flex-direction: row;
justify-content: space-between;
.recording-title {
display: inline-flex;
align-items: center;
font-size: 0.875rem;
margin-left: 16px;
max-width: 70%;
&-no-space {
margin-left: 0;
}
}
&.space-top {
margin-top: 10px;
}
}
.recording-header-line {
border-top: 1px solid #5e6d7a;
padding-top: 16px;
margin-top: 16px;
}
.local-recording-warning {
margin-top: 8px;
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
padding: 8px 16px;
&.text {
color: #fff;
background-color: #3D3D3D;
}
&.notification {
color: #040404;
background-color: #F8AE1A;
}
}
.recording-icon-container {
display: inline-flex;
align-items: center;
}
.file-sharing-icon-container {
background-color: #525252;
border-radius: 4px;
height: 40px;
justify-content: center;
width: 42px;
}
.cloud-content-recording-icon-container {
background-color: #FFFFFF;
border-radius: 4px;
height: 40px;
justify-content: center;
width: 40px;
}
.jitsi-recording-header {
margin-bottom: 16px;
}
.jitsi-content-recording-icon-container-with-switch {
background-color: #FFFFFF;
border-radius: 4px;
height: 40px;
width: 40px;
}
.jitsi-content-recording-icon-container-without-switch {
background-color: #FFFFFF;
border-radius: 4px;
height: 40px;
width: 46px;
}
.recording-icon {
height: 40px;
object-fit: contain;
width: 40px;
}
.content-recording-icon {
height: 18px;
margin: 10px 0 0 10px;
object-fit: contain;
width: 18px;
}
.recording-file-sharing-icon {
height: 18px;
object-fit: contain;
width: 18px;
}
.recording-info{
background-color: #FFD740;
color: black;
display: inline-flex;
margin: 32px 0;
width: 100%;
}
.recording-info-icon {
align-self: center;
height: 14px;
margin: 0 24px 0 16px;
object-fit: contain;
width: 14px;
}
.recording-info-title {
display: inline-flex;
font-size: 0.875rem;
width: 290px
}
.recording-switch {
margin-left: auto;
}
.authorization-panel {
display: flex;
flex-direction: column;
margin: 0 40px 10px 40px;
padding-bottom: 10px;
.logged-in-panel {
padding: 10px;
}
}
}
.live-stream-dialog {
/**
* Set font-size to be consistent with Atlaskit FieldText.
*/
font-size: 0.875rem;
.broadcast-dropdown {
text-align: left;
}
.form-footer {
display: flex;
margin-top: 5px;
text-align: right;
flex-direction: column;
.help-container {
display: flex;
}
}
.live-stream-cta {
a {
cursor: pointer;
}
}
.google-api {
margin-top: 10px;
min-height: 36px;
text-align: center;
width: 100%;
}
.google-error {
color: #c61600;
}
.google-panel {
align-items: center;
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
padding-bottom: 10px;
}
.warning-text {
color:#FFD740;
font-size: 0.75rem;
}
}

40
css/_redirect_page.scss Normal file
View File

@@ -0,0 +1,40 @@
.redirectPageMessage {
width: 30%;
margin: 20% auto;
text-align: center;
font-size: 1.5rem;
.thanks-msg {
border-bottom: 1px solid #FFFFFF;
padding-left: 30px;
padding-right: 30px;
p {
margin: 30px auto;
font-size: 1.5rem;
line-height: 1.5rem;
}
}
.hint-msg {
p {
margin: 26px auto;
font-weight: 600;
font-size: 1rem;
line-height: 1.125rem;
.hint-msg__holder{
font-weight: 200;
}
}
.happy-software{
width: 120px;
height: 86px;
margin: 0 auto;
background: transparent;
}
}
.forbidden-msg {
p {
font-size: 1rem;
margin-top: 15px;
}
}
}

231
css/_reset.scss Normal file
View File

@@ -0,0 +1,231 @@
/* Fonts and line heights */
/**
* RESET
*/
html,
body,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6,
img,
pre,
form,
fieldset {
margin: 0;
padding: 0;
}
ul,
ol,
dl {
margin: 0;
}
img,
fieldset {
border: 0;
}
@-moz-document url-prefix() {
img {
font-size: 0;
}
img:-moz-broken {
font-size: inherit;
}
}
/* https://github.com/necolas/normalize.css */
/* Customised to remove styles for unsupported browsers */
details,
main,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
transition: object-position 0.5s ease 0s;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: button;
}
/**
* TYPOGRAPHY - 14px base font size, agnostic font stack
*/
body {
color: #333;
font-family: Arial, sans-serif;
font-size: 0.875rem;
line-height: 1.42857142857143;
}
/* International Font Stacks*/
[lang|=en] {
font-family: Arial, sans-serif;
}
[lang|=ja] {
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, Arial, sans-serif;
}
/* Default margins */
p,
ul,
ol,
dl,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
pre {
margin: 10px 0 0 0;
}
/* No top margin to interfere with box padding */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
blockquote:first-child,
pre:first-child {
margin-top: 0;
}
/* Headings: desired line height in px / font size = unitless line height */
h1 {
color: #333;
font-size: 2rem;
font-weight: normal;
line-height: 1.25;
text-transform: none;
margin: 30px 0 0 0;
}
h2 {
color: #333;
font-size: 1.5rem;
font-weight: normal;
line-height: 1.25;
text-transform: none;
margin: 30px 0 0 0;
}
h3 {
color: #333;
font-size: 1.25rem;
font-weight: normal;
line-height: 1.5;
text-transform: none;
margin: 30px 0 0 0;
}
h4 {
font-size: 1rem;
font-weight: bold;
line-height: 1.25;
text-transform: none;
margin: 20px 0 0 0;
}
h5 {
color: #333;
font-size: 0.875rem;
font-weight: bold;
line-height: 1.42857143;
text-transform: none;
margin: 20px 0 0 0;
}
h6 {
color: #707070;
font-size: 0.75rem;
font-weight: bold;
line-height: 1.66666667;
text-transform: uppercase;
margin: 20px 0 0 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
/* Nice styles for using subheadings */
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
margin-top: 10px;
}
/* Other typographical elements */
small {
color: #707070;
font-size: 0.75rem;
line-height: 1.33333333333333;
}
code,
kbd {
font-family: monospace;
}
var,
address,
dfn,
cite {
font-style: italic;
}
cite:before {
content: "\2014 \2009";
}
blockquote {
border-left: 1px solid #ccc;
color: #707070;
margin-left: 19px;
padding: 10px 20px;
}
blockquote > cite {
display: block;
margin-top: 10px;
}
q {
color: #707070;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
abbr {
border-bottom: 1px #707070 dotted;
cursor: help;
}
a {
color: #44A5FF;
text-decoration: none;
font-weight: bold;
}
a:focus,
a:hover,
a:active {
text-decoration: underline;
}

62
css/_responsive.scss Normal file
View File

@@ -0,0 +1,62 @@
@media only screen and (max-width: $verySmallScreen) {
.welcome {
display: block;
#enter_room {
.welcome-page-button {
font-size: 1rem;
left: 0;
text-align: center;
width: 100%;
}
}
.header {
background-color: #002637;
.insecure-room-name-warning {
width: 100%;
}
#enter_room {
width: 100%;
.join-meeting-container {
padding: 0;
flex-direction: column;
background: transparent;
}
.enter-room-input-container {
padding-right: 0;
margin-bottom: 10px;
}
}
}
.header-text-title {
text-align: center;
}
.welcome-cards-container {
padding: 0;
}
&.without-content {
.header {
height: 100%;
}
}
#moderated-meetings {
display: none;
}
.welcome-footer-row-block {
display: flex;
flex-direction: column;
gap:12px;
align-items: center;
}
}
}

74
css/_settings-button.scss Normal file
View File

@@ -0,0 +1,74 @@
.settings-button-container {
position: relative;
.toolbox-icon {
align-items: center;
border-radius: 3px;
cursor: pointer;
display: flex;
justify-content: center;
&.disabled, .disabled & {
cursor: initial;
color: #929292;
background-color: #36383c;
&:hover {
background-color: #36383c;
}
}
}
}
.settings-button-small-icon {
background: #36383C;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
cursor: pointer;
padding: 1px;
position: absolute;
right: -4px;
top: -3px;
&:hover {
background: #F2F3F4;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
& svg {
fill: #040404;
}
&.settings-button-small-icon--disabled {
background: #36383C;
& svg {
fill: #929292;
}
}
}
& svg {
fill: #fff;
}
&--disabled {
background-color: #36383c;
cursor: default;
& svg {
fill: #929292;
}
}
}
.settings-button-small-icon-container {
position: absolute;
right: -4px;
top: -3px;
& .settings-button-small-icon {
position: relative;
top: 0;
right: 0;
}
}

64
css/_subject.scss Normal file
View File

@@ -0,0 +1,64 @@
.subject {
color: #fff;
transition: opacity .6s ease-in-out;
z-index: $toolbarZ + 2;
margin-top: 20px;
opacity: 0;
&.visible {
opacity: 1;
}
&#autoHide.with-always-on {
overflow: hidden;
animation: hideSubject forwards .6s ease-out;
& > .subject-info-container {
justify-content: flex-start;
}
&.visible {
animation: showSubject forwards .6s ease-out;
}
}
}
.subject-info-container {
display: flex;
justify-content: center;
margin: 0 auto;
height: 28px;
@media (max-width: 500px) {
flex-wrap: wrap;
}
}
.details-container {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
top: 0;
height: 48px;
}
@keyframes hideSubject {
0% {
max-width: 100%;
}
100% {
max-width: 0;
}
}
@keyframes showSubject {
0% {
max-width: 0%;
}
100% {
max-width: 100%;
}
}

204
css/_toolbars.scss Normal file
View File

@@ -0,0 +1,204 @@
/**
* Round badge.
*/
.badge-round {
background-color: #165ECC;
border-radius: 50%;
box-sizing: border-box;
color: #FFFFFF;
// Do not inherit the font-family from the toolbar button, because it's an
// icon style.
font-family: $baseFontFamily;
font-size: 0.5rem;
font-weight: 700;
line-height: 0.75rem;
min-width: 13px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
}
/**
* TODO: when the old filmstrip has been removed, remove the "new-" prefix.
*/
.new-toolbox {
bottom: calc((#{$newToolbarSize} * 2) * -1);
left: 0;
position: absolute;
right: 0;
transition: bottom .3s ease-in;
width: 100%;
pointer-events: none;
z-index: $toolbarZ + 2;
&.shift-up {
bottom: calc(((#{$newToolbarSize} + 30px) * 2) * -1);
.toolbox-content {
margin-bottom: 46px;
}
}
&.visible {
bottom: 0;
}
&.no-buttons {
display: none;
}
}
.toolbox-content {
align-items: center;
box-sizing: border-box;
display: flex;
margin-bottom: 16px;
position: relative;
z-index: $toolbarZ;
pointer-events: none;
.toolbox-button-wth-dialog {
display: inline-block;
}
}
.toolbar-button-with-badge {
display: inline-block;
position: relative;
.badge-round {
bottom: -5px;
font-size: 0.75rem;
line-height: 1.25rem;
min-width: 20px;
pointer-events: none;
position: absolute;
right: -5px;
}
}
.toolbox-content-wrapper {
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 100%;
pointer-events: all;
border-radius: 6px;
.toolbox-content-items {
@include ltr;
}
}
.toolbox-content-wrapper::after {
content: '';
background: $newToolbarBackgroundColor;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.overflow-menu-hr {
border-top: 1px solid #4C4D50;
border-bottom: 0;
margin: 8px 0;
}
div.hangup-button {
background-color: #CB2233;
@media (hover: hover) and (pointer: fine) {
&:hover {
background-color: #E04757;
}
&:active {
background-color: #A21B29;
}
}
svg {
fill: #fff;
}
}
div.hangup-menu-button {
background-color: #CB2233;
@media (hover: hover) and (pointer: fine) {
&:hover {
background-color: #E04757;
}
&:active {
background-color: #A21B29;
}
}
svg {
fill: #fff;
}
}
.profile-button-avatar {
align-items: center;
}
/**
* START of fade in animation for main toolbar
*/
.fadeIn {
opacity: 1;
@include transition(all .3s ease-in);
}
.fadeOut {
opacity: 0;
@include transition(all .3s ease-out);
}
/**
* Audio and video buttons do not have toggled state.
*/
.audio-preview,
.video-preview {
.toolbox-icon.toggled {
background: none;
&:hover {
background: rgba(255, 255, 255, 0.2);
}
}
}
/**
* On small mobile devices make the toolbar full width and pad the invite prompt.
*/
.toolbox-content-mobile {
@media (max-width: 500px) {
margin-bottom: 0;
.toolbox-content-wrapper {
width: 100%;
}
.toolbox-content-items {
@include ltr;
border-radius: 0;
display: flex;
justify-content: space-evenly;
padding: 8px 0;
width: 100%;
}
.invite-more-container {
margin: 0 16px 8px;
}
.invite-more-container.elevated {
margin-bottom: 52px;
}
}
}

58
css/_utils.scss Normal file
View File

@@ -0,0 +1,58 @@
.flip-x {
transform: scaleX(-1);
}
.hidden {
display: none;
}
/**
* Hides an element.
*/
.hide {
display: none !important;
}
.invisible {
visibility: hidden;
}
/**
* Shows an element.
*/
.show {
display: block !important;
}
/**
* resets default button styles,
* mostly intended to be used on interactive elements that
* differ from their default styles (e.g. <a>) or have custom styles
*/
.invisible-button {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
}
/**
* style an element the same as an <a>
* useful on some cases where we visually have a link but it's actually a <button>
*/
.as-link {
@extend .invisible-button;
display: inline;
color: #44A5FF;
text-decoration: none;
font-weight: bold;
&:focus,
&:hover,
&:active {
text-decoration: underline;
}
}

161
css/_variables.scss Normal file
View File

@@ -0,0 +1,161 @@
/**
* Style variables
*/
$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/**
* Size variables.
*/
// Video layout.
$thumbnailsBorder: 2px;
/**
* Toolbar
*/
$newToolbarBackgroundColor: #131519;
$newToolbarSize: 48px;
$newToolbarSizeMobile: 60px;
$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
/**
* Chat
*/
$chatBackgroundColor: #131519;
/**
* Misc.
*/
$borderRadius: 4px;
$scrollHeight: 7px;
/**
* Z-indexes. TODO: Replace this by a function.
*/
$zindex0: 0;
$zindex1: 1;
$zindex2: 2;
$zindex3: 3;
$toolbarZ: 250;
$watermarkZ: 253;
// Place filmstrip videos over toolbar in order
// to make connection info visible.
$filmstripVideosZ: $toolbarZ + 1;
/**
* Unsupported browser
*/
$primaryUnsupportedBrowserButtonBgColor: #0052CC;
$unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
$unsupportedBrowserTextColor: #4a4a4a;
$unsupportedBrowserTextSmallFontSize: 1rem;
$unsupportedBrowserTitleColor: #fff;
$unsupportedBrowserTitleFontSize: 1.5rem;
$unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
$unsupportedDesktopBrowserTextFontSize: 1.25rem;
/**
* The size of the default watermark.
*/
$watermarkWidth: 71px;
$watermarkHeight: 32px;
$welcomePageWatermarkWidth: 71px;
$welcomePageWatermarkHeight: 32px;
/**
* Welcome page variables.
*/
$welcomePageDescriptionColor: #fff;
$welcomePageFontFamily: inherit;
$welcomePageBackground: none;
$welcomePageTitleColor: #fff;
$welcomePageHeaderBackground: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/welcome-background.png');
$welcomePageHeaderBackgroundPosition: center;
$welcomePageHeaderBackgroundRepeat: none;
$welcomePageHeaderBackgroundSize: cover;
$welcomePageHeaderPadding: 1rem;
$welcomePageHeaderTitleMaxWidth: initial;
$welcomePageHeaderTextAlign: center;
$welcomePageButtonBg: #0074E0;
$welcomePageButtonHoverBg: #4687ED;
$welcomePageButtonFocusOutline: #00225A;
$welcomePageHeaderContainerMarginTop: 104px;
$welcomePageHeaderContainerDisplay: flex;
$welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
$welcomePageHeaderTextTitleMarginBottom: 0;
$welcomePageHeaderTextTitleFontSize: 2.625rem;
$welcomePageHeaderTextTitleFontWeight: normal;
$welcomePageHeaderTextTitleLineHeight: 3.125rem;
$welcomePageHeaderTextTitleOpacity: 1;
$welcomePageEnterRoomDisplay: flex;
$welcomePageEnterRoomWidth: calc(100% - 32px);
$welcomePageEnterRoomPadding: 4px;
$welcomePageEnterRoomMargin: 0 auto;
$welcomePageTabContainerDisplay: flex;
$welcomePageTabContentDisplay: inherit;
$welcomePageTabButtonsDisplay: flex;
$welcomePageTabDisplay: block;
/**
* Deep-linking page variables.
*/
$deepLinkingMobileLogoHeight: 40px;
$deepLinkingMobileHeaderBackground: #f1f2f5;
$deepLinkingMobileLinkColor: inherit;
$deepLinkingMobileTextFontSize: inherit;
$deepLinkingMobileTextLineHeight: inherit;
$deepLinkingDialInConferenceIdMargin: 10px 0 10px 0;
$deepLinkingDialInConferenceIdPadding: inherit;
$deepLinkingDialInConferenceIdBackgroundColor: inherit;
$deepLinkingDialInConferenceIdBorderRadius: inherit;
$deepLinkingDialInConferenceDescriptionFontSize: 0.8em;
$deepLinkingDialInConferenceDescriptionLineHeight: inherit;
$deepLinkingDialInConferenceDescriptionMarginBottom: none;
$deepLinkingDialInConferencePinFontSize: inherit;
$deepLinkingDialInConferencePinLineHeight: inherit;
$depLinkingMobileHrefLineHeight: 2.2857142857142856em;
$deepLinkingMobileHrefFontWeight: bolder;
$deepLinkingMobileHrefFontSize: inherit;
$deepLinkingMobileButtonHeight: 2.2857142857142856em;
$deepLinkingMobileButtonLineHeight: 2.2857142857142856em;
$deepLinkingMobileButtonMargin: 18px auto 10px;
$deepLinkingMobileButtonWidth: auto;
$deepLinkingMobileButtonFontWeight: bold;
$deepLinkingMobileButtonFontSize: inherit;
$primaryDeepLinkingMobileButtonBorderRadius: inherit;
/**
* Chrome extension banner variables.
*/
$chromeExtensionBannerDontShowAgainDisplay: flex;
$chromeExtensionBannerHeight: 128px;
$chromeExtensionBannerTop: 80px;
$chromeExtensionBannerRight: 16px;
$chromeExtensionBannerTopInMeeting: 10px;
$chromeExtensionBannerRightInMeeeting: 10px;
/**
* media type thresholds
*/
$verySmallScreen: 500px;
/**
* Prejoin / premeeting screen
*/
$prejoinDefaultContentWidth: 336px;

355
css/_videolayout_default.scss Normal file
View File

@@ -0,0 +1,355 @@
#videoconference_page {
min-height: 100%;
position: relative;
transform: translate3d(0, 0, 0);
width: 100%;
}
#layout_wrapper {
@include ltr;
display: flex;
height: 100%;
}
#videospace {
display: block;
height: 100%;
width: 100%;
min-height: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
overflow: hidden;
}
#largeVideoBackgroundContainer,
.large-video-background {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
#largeVideoBackground {
min-height: 100%;
min-width: 100%;
}
}
#largeVideoBackgroundContainer {
filter: blur(40px);
}
.videocontainer {
position: relative;
text-align: center;
overflow: 'hidden';
}
#localVideoWrapper {
display:inline-block;
}
.flipVideoX {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
}
#localVideoWrapper video,
#localVideoWrapper object {
border-radius: $borderRadius !important;
cursor: hand;
object-fit: cover;
}
#largeVideo,
#largeVideoWrapper,
#largeVideoContainer {
overflow: hidden;
text-align: center;
&.transition {
transition: width 1s, height 1s, top 1s;
}
}
.animatedFadeIn {
opacity: 0;
animation: fadeInAnimation 0.3s ease forwards;
}
@keyframes fadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animatedFadeOut {
opacity: 1;
animation: fadeOutAnimation 0.3s ease forwards;
}
@keyframes fadeOutAnimation {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#largeVideoContainer {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0 !important;
}
#largeVideoWrapper {
box-shadow: 0 0 20px -2px #444;
}
#largeVideo,
#largeVideoWrapper
{
object-fit: cover;
}
#sharedVideo video {
width: 100%;
height: 100%;
}
#sharedVideo.disable-pointer {
pointer-events: none;
}
#sharedVideo,
#etherpad,
#localVideoWrapper video,
#localVideoWrapper object,
#localVideoWrapper,
#largeVideoWrapper,
#largeVideoWrapper>video,
#largeVideoWrapper>object,
.videocontainer>video,
.videocontainer>object {
position: absolute;
left: 0;
top: 0;
z-index: $zindex1;
width: 100%;
height: 100%;
}
#etherpad {
text-align: center;
}
#etherpad {
z-index: $zindex0;
}
#alwaysOnTop .displayname {
font-size: 0.875rem;
position: inherit;
width: 100%;
left: 0px;
top: 0px;
margin-top: 10px;
}
/**
* Audio indicator on video thumbnails.
*/
.videocontainer>span.audioindicator,
.videocontainer>.audioindicator-container {
position: absolute;
display: inline-block;
left: 6px;
top: 50%;
margin-top: -17px;
width: 6px;
height: 35px;
z-index: $zindex2;
border: none;
.audiodot-top,
.audiodot-bottom,
.audiodot-middle {
opacity: 0;
display: inline-block;
@include circle(5px);
background: rgba(9, 36, 77, 0.9);
margin: 1px 0 1px 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
}
span.audiodot-top::after,
span.audiodot-bottom::after,
span.audiodot-middle::after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
-webkit-filter: blur(0.5px);
filter: blur(0.5px);
background: #44A5FF;
}
}
#dominantSpeaker {
visibility: hidden;
width: 300px;
height: 300px;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#dominantSpeakerAvatarContainer,
.dynamic-shadow {
width: 200px;
height: 200px;
}
#dominantSpeakerAvatarContainer {
top: 50px;
margin: auto;
position: relative;
overflow: hidden;
visibility: inherit;
}
.dynamic-shadow {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
transition: box-shadow 0.3s ease;
}
.avatar-container {
@include maxSize(60px);
@include absoluteAligning();
display: flex;
justify-content: center;
height: 50%;
width: auto;
overflow: hidden;
.userAvatar {
height: 100%;
object-fit: cover;
width: 100%;
top: 0px;
left: 0px;
position: absolute;
}
}
#videoNotAvailableScreen {
text-align: center;
#avatarContainer {
border-radius: 50%;
display: inline-block;
height: 50dvh;
margin-top: 25dvh;
overflow: hidden;
width: 50dvh;
#avatar {
height: 100%;
object-fit: cover;
width: 100%;
}
}
}
.sharedVideoAvatar {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
object-fit: cover;
}
#remotePresenceMessage,
#remoteConnectionMessage {
position: absolute;
width: auto;
z-index: $zindex2;
font-weight: 600;
font-size: 0.875rem;
text-align: center;
color: #FFF;
left: 50%;
transform: translate(-50%, 0);
}
#remotePresenceMessage .presence-label,
#remoteConnectionMessage {
opacity: .80;
text-shadow: 0px 0px 1px rgba(0,0,0,0.3),
0px 1px 1px rgba(0,0,0,0.3),
1px 0px 1px rgba(0,0,0,0.3),
0px 0px 1px rgba(0,0,0,0.3);
background: rgba(0,0,0,.5);
border-radius: 5px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#remoteConnectionMessage {
display: none;
}
.display-video {
.avatar-container {
visibility: hidden;
}
video {
visibility: visible;
}
}
.display-avatar-only {
.avatar-container {
visibility: visible;
}
video {
visibility: hidden;
}
}
.presence-label {
color: #fff;
font-size: 0.75rem;
font-weight: 100;
left: 0;
margin: 0 auto;
overflow: hidden;
pointer-events: none;
right: 0;
text-align: center;
text-overflow: ellipsis;
top: calc(50% + 30px);
white-space: nowrap;
width: 100%;
}

354
css/_welcome_page.scss Normal file
View File

@@ -0,0 +1,354 @@
body.welcome-page {
background: inherit;
overflow: auto;
}
.welcome {
background-image: $welcomePageBackground;
background-color: #fff;
display: flex;
flex-direction: column;
font-family: $welcomePageFontFamily;
justify-content: space-between;
min-height: 100dvh;
position: relative;
.header {
background-image: $welcomePageHeaderBackground;
background-position: $welcomePageHeaderBackgroundPosition;
background-repeat: $welcomePageHeaderBackgroundRepeat;
background-size: $welcomePageHeaderBackgroundSize;
padding: $welcomePageHeaderPadding;
background-color: #131519;
overflow: hidden;
position: relative;
.header-container {
display: $welcomePageHeaderContainerDisplay;
flex-direction: column;
margin: $welcomePageHeaderContainerMargin;
z-index: $zindex2;
align-items: center;
position: relative;
max-width: 688px;
}
.header-watermark-container {
position: absolute;
width: 100%;
height: 100%;
margin-top: calc(20px - #{$welcomePageHeaderContainerMarginTop});
}
.header-text-title {
color: $welcomePageTitleColor;
font-size: $welcomePageHeaderTextTitleFontSize;
font-weight: $welcomePageHeaderTextTitleFontWeight;
line-height: $welcomePageHeaderTextTitleLineHeight;
margin-bottom: $welcomePageHeaderTextTitleMarginBottom;
max-width: $welcomePageHeaderTitleMaxWidth;
opacity: $welcomePageHeaderTextTitleOpacity;
text-align: $welcomePageHeaderTextAlign;
}
.header-text-subtitle {
color: #fff;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.625rem;
margin: 16px 0 32px 0;
text-align: $welcomePageHeaderTextAlign;
}
.not-allow-title-character-div {
color: #f03e3e;
background-color: #fff;
font-size: 0.75rem;
font-weight: 600;
margin: 10px 0px 5px 0px;
text-align: $welcomePageHeaderTextAlign;
border-radius: 5px;
padding: 5px;
.not-allow-title-character-text {
float: right;
line-height: 1.9;
};
.jitsi-icon {
margin-right: 9px;
float: left;
svg {
fill:#f03e3e;
& > *:first-child {
fill: none !important;
}
}
}
}
.insecure-room-name-warning {
align-items: center;
color: rgb(215, 121, 118);
font-weight: 600;
display: flex;
flex-direction: row;
margin-top: 15px;
max-width: 480px;
width: $welcomePageEnterRoomWidth;
.jitsi-icon {
margin-right: 15px;
svg {
fill: rgb(215, 121, 118);
& > *:first-child {
fill: none !important;
}
}
}
}
::placeholder {
color: #253858;
}
#enter_room {
display: $welcomePageEnterRoomDisplay;
align-items: center;
max-width: 480px;
width: $welcomePageEnterRoomWidth;
z-index: $zindex2;
height: fit-content;
.join-meeting-container {
margin: $welcomePageEnterRoomMargin;
padding: $welcomePageEnterRoomPadding;
border-radius: 4px;
background-color: #fff;
display: flex;
width: 100%;
text-align: left;
color: #253858;
}
.enter-room-input-container {
flex-grow: 1;
padding-right: 4px;
.enter-room-input {
border-radius: 4px;
border: 0;
background: #fff;
display: inline-block;
height: 50px;
width: 100%;
font-size: 0.875rem;
padding-left: 10px;
&.focus-visible {
outline: auto 2px #005fcc;
}
}
}
}
#moderated-meetings {
max-width: calc(100% - 40px);
padding: 16px 0 0;
width: $welcomePageEnterRoomWidth;
text-align: center;
a {
color: inherit;
font-weight: 600;
}
}
}
.tab-container {
font-size: 1rem;
position: relative;
text-align: left;
display: $welcomePageTabContainerDisplay;
flex-direction: column;
.tab-content{
display: $welcomePageTabContentDisplay;
height: 250px;
margin: 5px 0px;
overflow: hidden;
flex-grow: 1;
position: relative;
}
.tab-buttons {
background-color: #c7ddff;
border-radius: 6px;
color: #0163FF;
font-size: 0.875rem;
line-height: 1.125rem;
margin: 4px;
display: $welcomePageTabButtonsDisplay;
[role="tab"] {
background-color: #c7ddff;
border-radius: 7px;
cursor: pointer;
display: $welcomePageTabDisplay;
flex-grow: 1;
margin: 2px;
padding: 7px 0;
text-align: center;
color: inherit;
border: 0;
&[aria-selected="true"] {
background-color: #FFF;
}
}
}
}
.welcome-page-button {
border: 0;
font-size: 0.875rem;
background: $welcomePageButtonBg;
border-radius: 3px;
color: #FFFFFF;
cursor: pointer;
padding: 16px 20px;
transition: all 0.2s;
&:focus-within {
outline: auto 2px $welcomePageButtonFocusOutline;
}
&:hover {
background-color: $welcomePageButtonHoverBg;
}
}
.welcome-page-settings {
background: rgba(255, 255, 255, 0.38);
border-radius: 3px;
color: $welcomePageDescriptionColor;
padding: 4px;
position: absolute;
top: calc(35px - #{$welcomePageHeaderContainerMarginTop});
right: 0;
z-index: $zindex2;
* {
cursor: pointer;
font-size: 2rem;
}
.toolbox-icon {
height: 24px;
width: 24px;
}
}
.welcome-watermark {
position: absolute;
width: 100%;
height: 100%;
.watermark.leftwatermark {
width: $welcomePageWatermarkWidth;
height: $welcomePageWatermarkHeight;
}
}
&.without-content {
.welcome-card {
max-width: 100dvw;
}
}
&.without-footer {
justify-content: start;
}
.welcome-cards-container {
color:#131519;
padding-top: 40px;
}
.welcome-card-column {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
max-width: 688px;
margin: auto;
> div {
margin-bottom: 16px;
}
}
.welcome-card-text {
padding: 32px;
}
.welcome-card {
width: 100%;
border-radius: 8px;
&--dark {
background: #444447;
color: #fff;
}
&--blue {
background: #D5E5FF;
}
&--grey {
background: #F2F3F4;
}
}
.welcome-footer {
background: #131519;
color: #fff;
margin-top: 40px;
position: relative;
}
.welcome-footer-centered {
max-width: 688px;
margin: 0 auto;
}
.welcome-footer-padded {
padding: 0px 16px;
}
.welcome-footer-row-block {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #424447;
&:last-child {
border-bottom: none;
}
}
.welcome-footer--row-1 {
padding: 40px 0 24px 0;
}
.welcome-footer-row-1-text {
max-width: 200px;
text-align: center;
}
}

1
css/_welcome_page_content.scss Normal file
View File

@@ -0,0 +1 @@
/** Insert custom CSS for any additional content in the welcome page **/

1
css/_welcome_page_settings_toolbar.scss Normal file
View File

@@ -0,0 +1 @@
/** Insert custom CSS for any additional content in the welcome page settings toolbar **/

43
css/components/_input-slider.scss Normal file
View File

@@ -0,0 +1,43 @@
$rangeInputThumbSize: 14;
/**
* Disable the default webkit styles for range inputs (sliders).
*/
input[type=range]{
-webkit-appearance: none;
background: none;
}
/**
* Show focus for keyboard accessibility.
*/
input[type=range]:focus {
outline: 1px solid white !important;
}
/**
* Include the mixin for a range input style.
*/
@include slider {
background: #474747;
border: none;
border-radius: 3px;
cursor: pointer;
height: 6px;
width: 100%;
}
/**
* Include the mixin for a range input thumb style.
*/
@include slider-thumb {
-webkit-appearance: none;
background: white;
border: 1px solid #3572b0;
border-radius: 50%;
box-shadow: 0px 0px 1px #3572b0;
cursor: pointer;
height: 14px;
margin-top: -4px;
width: 14px;
}

81
css/deep-linking/_desktop.scss Normal file
View File

@@ -0,0 +1,81 @@
.deep-linking-desktop {
background-color: #fff;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
.header {
width: 100%;
height: 55px;
background-color: #f1f2f5;
padding-top: 15px;
padding-left: 50px;
display: flex;
flex-flow: row;
flex: 0 0 55px;
.logo {
height: 40px;
}
}
.content {
padding-top: 40px;
padding-bottom: 40px;
left: 0px;
right: 0px;
display: flex;
width: 100%;
height: 100%;
flex-flow: row;
.leftColumn {
left: 0px;
width: 50%;
min-height: 156px;
display: flex;
flex-flow: column;
.leftColumnContent{
padding: 20px;
display: flex;
flex-flow: column;
height: 100%;
.image {
background-image: url('../images/deep-linking-image.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
height: 100%;
width: 100%;
}
}
}
.rightColumn {
top: 0px;
width: 50%;
min-height: 156px;
display: flex;
flex-flow: row;
align-items: center;
.rightColumnContent {
display: flex;
flex-flow: column;
padding: 20px 20px 20px 60px;
.title {
color: #1c2946;
}
.description {
color: #606a80;
margin-top: 8px;
}
.buttons {
margin-top: 16px;
display: flex;
align-items: center;
&>button:first-child {
margin-right: 8px;
}
}
}
}
}
}

3
css/deep-linking/_main.scss Normal file
View File

@@ -0,0 +1,3 @@
@import 'desktop';
@import 'mobile';
@import 'no-mobile-app';

160
css/deep-linking/_mobile.scss Normal file
View File

@@ -0,0 +1,160 @@
.deep-linking-mobile {
background-color: #fff;
height: 100dvh;
overflow: auto;
position: relative;
width: 100vw;
.header {
width: 100%;
height: 70px;
background-color: $deepLinkingMobileHeaderBackground;
text-align: center;
.logo {
margin-top: 15px;
margin-left: auto;
margin-right: auto;
height: $deepLinkingMobileLogoHeight;
}
}
a {
text-decoration: none;
color: $deepLinkingMobileLinkColor;
}
&__body {
color: $unsupportedBrowserTextColor;
margin: auto;
max-width: 40em;
padding: 35px 0 40px 0;
text-align: center;
width: 90%;
a:active {
text-decoration: none;
}
.image {
max-width: 80%;
}
}
&__text {
font-weight: bolder;
font-size: $deepLinkingMobileTextFontSize;
line-height: $deepLinkingMobileTextLineHeight;
padding: 10px 10px 0px 10px;
}
&__text,
.deep-linking-dial-in {
font-size: 1em;
line-height: em(29px, 21px);
margin-bottom: 0.65em;
&_small {
font-size: 1.5em;
margin-bottom: 1em;
margin-top: em(21, 18);
strong {
font-size: em(21, 18);
}
}
table {
font-size: 1em;
}
.dial-in-conference-id {
text-align: center;
min-width: 200px;
margin-top: 40px;
}
.dial-in-conference-id {
margin: $deepLinkingDialInConferenceIdMargin;
padding: $deepLinkingDialInConferenceIdPadding;
background-color: $deepLinkingDialInConferenceIdBackgroundColor;
border-radius: $deepLinkingDialInConferenceIdBorderRadius;
}
.dial-in-conference-description {
font-size: $deepLinkingDialInConferenceDescriptionFontSize;
line-height: $deepLinkingDialInConferenceDescriptionLineHeight;
margin-bottom: $deepLinkingDialInConferenceDescriptionMarginBottom;
}
.toll-free-list {
min-width: 80px;
}
.numbers-list {
min-width: 150px;
}
li.toll-free:empty:before {
content: '.';
visibility: hidden;
}
}
&__href {
height: 2.2857142857142856em;
line-height: $depLinkingMobileHrefLineHeight;
margin: 18px auto 20px;
max-width: 300px;
width: auto;
font-weight: $deepLinkingMobileHrefFontWeight;
font-size: $deepLinkingMobileHrefFontSize;
}
&__button {
border: 0;
height: $deepLinkingMobileButtonHeight;
line-height: $deepLinkingMobileButtonLineHeight;
margin: $deepLinkingMobileButtonMargin;
padding: 0px 10px 0px 10px;
max-width: 300px;
width: $deepLinkingMobileButtonWidth;
@include border-radius(3px);
background-color: $unsupportedBrowserButtonBgColor;
color: #505F79;
font-weight: $deepLinkingMobileButtonFontWeight;
font-size: $deepLinkingMobileButtonFontSize;
&:active {
background-color: $unsupportedBrowserButtonBgColor;
}
&_primary {
background-color: $primaryUnsupportedBrowserButtonBgColor;
color: #FFFFFF;
border-radius: $primaryDeepLinkingMobileButtonBorderRadius;
&:active {
background-color: $primaryUnsupportedBrowserButtonBgColor;
}
}
}
.deep-linking-dial-in {
display: none;
&.has-numbers {
align-items: center;
display: flex;
flex-direction: column;
}
.dial-in-numbers-list {
color: $unsupportedBrowserTextColor;
padding-left: 20px;
}
.dial-in-numbers-body {
vertical-align: top;
}
}
}

21
css/deep-linking/_no-mobile-app.scss Normal file
View File

@@ -0,0 +1,21 @@
.no-mobile-app {
margin: 30% auto 0;
max-width: 25em;
text-align: center;
width: auto;
&__title {
border-bottom: 1px solid lighten(#FFFFFF, 10%);
color: $unsupportedBrowserTitleColor;
font-weight: 400;
letter-spacing: 0.5px;
padding-bottom: em(17, 24);
}
&__description {
font-size: $unsupportedBrowserTextSmallFontSize;
font-weight: 300;
letter-spacing: 1px;
margin-top: 1em;
}
}

89
css/filmstrip/_horizontal_filmstrip.scss Normal file
View File

@@ -0,0 +1,89 @@
%align-right {
@include flex();
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: flex-start;
}
.horizontal-filmstrip .filmstrip {
padding: 10px 5px;
@extend %align-right;
z-index: $filmstripVideosZ;
box-sizing: border-box;
width: 100%;
position: fixed;
/*
* Firefox sets flex items to min-height: auto and min-width: auto,
* preventing flex children from shrinking like they do on other browsers.
* Setting min-height and min-width 0 is a workaround for the issue so
* Firefox behaves like other browsers.
* https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
*/
@mixin minHWAutoFix() {
min-height: 0;
min-width: 0;
}
&.reduce-height {
bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight});
}
&__videos {
position:relative;
padding: 0;
/* The filmstrip should not be covered by the left toolbar. */
bottom: 0;
width:auto;
&#remoteVideos {
border: $thumbnailsBorder solid transparent;
transition: bottom 2s;
flex-grow: 1;
display: flex;
flex-direction: row-reverse;
@include minHWAutoFix()
}
/**
* The local video identifier.
*/
&#filmstripLocalVideo,
&#filmstripLocalScreenShare {
align-self: flex-end;
display: block;
margin-bottom: 8px;
}
&.hidden {
bottom: calc(-196px - #{$newToolbarSizeWithPadding} + 50px);
}
}
.remote-videos {
overscroll-behavior: contain;
& > div {
transition: opacity 1s;
position: absolute;
}
&.is-not-overflowing > div {
right: 2px;
}
}
&.hide-videos {
.remote-videos {
& > div {
opacity: 0;
pointer-events: none;
}
}
}
.videocontainer {
margin-bottom: 10px;
}
}

24
css/filmstrip/_small_video.scss Normal file
View File

@@ -0,0 +1,24 @@
.filmstrip__videos .videocontainer {
display: inline-block;
position: relative;
background-size: contain;
border: 2px solid transparent;
border-radius: $borderRadius;
margin: 0 2px;
&:hover {
cursor: hand;
}
& > video {
cursor: hand;
border-radius: $borderRadius;
object-fit: cover;
overflow: hidden;
}
.presence-label {
position: absolute;
z-index: $zindex3;
}
}

93
css/filmstrip/_tile_view.scss Normal file
View File

@@ -0,0 +1,93 @@
/**
* CSS styles that are specific to the filmstrip that shows the thumbnail tiles.
*/
.tile-view {
.remote-videos {
align-items: center;
box-sizing: border-box;
overscroll-behavior: contain;
}
.filmstrip__videos .videocontainer {
&:not(.active-speaker),
&:hover:not(.active-speaker) {
border: none;
box-shadow: none;
}
}
#remoteVideos {
/**
* Height is modified with an inline style in horizontal filmstrip mode
* so !important is used to override that.
*/
height: 100% !important;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: margin-bottom .3s ease-in;
}
.filmstrip {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
&.collapse {
#remoteVideos {
height: calc(100% - #{$newToolbarSizeMobile}) !important;
margin-bottom: $newToolbarSizeMobile;
}
.remote-videos {
// !important is needed here as overflow is set via element.style in a FixedSizeGrid.
overflow: hidden auto !important;
}
}
}
/**
* Regardless of the user setting, do not let the filmstrip be in a hidden
* state.
*/
.filmstrip__videos.hidden {
display: block;
}
.filmstrip__videos.has-scroll {
padding-left: 7px;
}
.remote-videos {
box-sizing: border-box;
/**
* The size of the thumbnails should be set with javascript, based on
* desired column count and window width. The rows are created using flex
* and allowing the thumbnails to wrap.
*/
& > div {
align-content: center;
align-items: center;
box-sizing: border-box;
display: flex;
margin-top: auto;
margin-bottom: auto;
justify-content: center;
.videocontainer {
border: 0;
box-sizing: border-box;
display: block;
margin: 2px;
}
}
}
}

38
css/filmstrip/_tile_view_overrides.scss Normal file
View File

@@ -0,0 +1,38 @@
/**
* Various overrides outside of the filmstrip to style the app to support a
* tiled thumbnail experience.
*/
.tile-view,
.whiteboard-container,
.stage-filmstrip {
/**
* Let the avatar grow with the tile.
*/
.avatar-container {
max-height: initial;
max-width: initial;
}
/**
* Hide various features that should not be displayed while in tile view.
*/
#dominantSpeaker,
#largeVideoElementsContainer,
#sharedVideo {
display: none;
}
/**
* The follow styling uses !important to override inline styles set with
* javascript.
*
* TODO: These overrides should be more easy to remove and should be removed
* when the components are in react so their rendering done declaratively,
* making conditional styling easier to apply.
*/
#largeVideoElementsContainer,
#remoteConnectionMessage,
#remotePresenceMessage {
display: none !important;
}
}

177
css/filmstrip/_vertical_filmstrip.scss Normal file
View File

@@ -0,0 +1,177 @@
.vertical-filmstrip, .stage-filmstrip {
span:not(.tile-view) .filmstrip {
&.hide-videos {
.remote-videos {
& > div {
opacity: 0;
pointer-events: none;
}
}
}
/*
* Firefox sets flex items to min-height: auto and min-width: auto,
* preventing flex children from shrinking like they do on other browsers.
* Setting min-height and min-width 0 is a workaround for the issue so
* Firefox behaves like other browsers.
* https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
*/
@mixin minHWAutoFix() {
min-height: 0;
min-width: 0;
}
@extend %align-right;
align-items: flex-end;
bottom: 0;
box-sizing: border-box;
display: flex;
flex-direction: column-reverse;
height: 100%;
width: 100%;
padding: 0;
/**
* fixed positioning is necessary for remote menus and tooltips to pop
* out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
* a library called popper which will position its elements fixed if
* any parent is also fixed.
*/
position: fixed;
top: 0;
right: 0;
z-index: $filmstripVideosZ;
&.no-vertical-padding {
padding: 0;
}
/**
* Hide videos by making them slight to the right.
*/
.filmstrip__videos {
@extend %align-right;
bottom: 0;
padding: 0;
position:relative;
right: 0;
width: auto;
/**
* An id selector is used to match id specificity with existing
* filmstrip styles.
*/
&#remoteVideos {
border: $thumbnailsBorder solid transparent;
padding-left: 0;
border-left: 0;
width: 100%;
height: 100%;
justify-content: center;
}
}
/**
* Re-styles the local Video to better fit vertical filmstrip layout.
*/
#filmstripLocalVideo {
align-self: initial;
margin-bottom: 5px;
display: flex;
flex-direction: column-reverse;
height: auto;
justify-content: flex-start;
width: 100%;
#filmstripLocalVideoThumbnail {
width: calc(100% - 15px);
.videocontainer {
height: 0px;
width: 100%;
}
}
}
#filmstripLocalScreenShare {
align-self: initial;
margin-bottom: 5px;
display: flex;
flex-direction: column-reverse;
height: auto;
justify-content: flex-start;
width: 100%;
#filmstripLocalScreenShareThumbnail {
width: calc(100% - 15px);
.videocontainer {
height: 0px;
width: 100%;
}
}
}
/**
* Remove unnecessary padding that is normally used to prevent horizontal
* filmstrip from overlapping the left edge of the screen.
*/
#filmstripLocalVideo,
#filmstripLocalScreenShare,
.remote-videos {
padding: 0;
}
#remoteVideos {
@include minHWAutoFix();
flex-direction: column;
flex-grow: 1;
}
.resizable-filmstrip #remoteVideos .videocontainer {
border-left: 0;
margin: 0;
}
&.reduce-height {
height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
}
.filmstrip__videos.vertical-view-grid#remoteVideos {
align-items: 'center';
border: 0px;
padding-right: 7px;
&.has-scroll {
padding-right: 0px;
}
.remote-videos > div {
left: 0px; // fixes an issue on FF - the div is aligned to the right by default for some reason
}
.videocontainer {
border: 0px;
margin: 2px;
}
}
.remote-videos {
display: flex;
overscroll-behavior: contain;
&.height-transition {
transition: height .3s ease-in;
}
& > div {
position: absolute;
transition: opacity 1s;
}
&.is-not-overflowing > div {
bottom: 0px;
}
}
}
}

57
css/filmstrip/_vertical_filmstrip_overrides.scss Normal file
View File

@@ -0,0 +1,57 @@
/**
* Overrides for video containers that should not be centered aligned to avoid=
* clashing with the filmstrip.
*/
.vertical-filmstrip #etherpad,
.stage-filmstrip #etherpad,
.vertical-filmstrip #sharedvideo,
.stage-filmstrip #sharedvideo {
text-align: left;
}
/**
* Overrides for small videos in vertical filmstrip mode.
*/
.vertical-filmstrip .filmstrip__videos .videocontainer,
.stage-filmstrip .filmstrip__videos .videocontainer {
.self-view-mobile-portrait video {
object-fit: contain;
}
}
/**
* Overrides for quality labels in filmstrip only mode. The styles adjust the
* labels' positioning as the filmstrip itself or filmstrip's remote videos
* appear and disappear.
*
* The class with-filmstrip is for when the filmstrip is visible.
* The class without-filmstrip is for when the filmstrip has been toggled to
* be hidden.
* The class opening is for when the filmstrip is transitioning from hidden
* to visible.
*/
.vertical-filmstrip .large-video-labels,
.stage-filmstrip .large-video-labels {
&.with-filmstrip {
right: 150px;
}
&.with-filmstrip.opening {
transition: 0.9s;
transition-timing-function: ease-in-out;
}
&.without-filmstrip {
transition: 1.2s ease-in-out;
transition-delay: 0.1s;
}
}
/**
* Overrides for self view when in portrait mode on mobile.
* This is done in order to keep the aspect ratio.
*/
.vertical-filmstrip .self-view-mobile-portrait #localVideo_container,
.stage-filmstrip .self-view-mobile-portrait #localVideo_container {
object-fit: contain;
}

80
css/main.scss Normal file
View File

@@ -0,0 +1,80 @@
/* Functions BEGIN */
@import 'functions';
/* Functions END */
/* Variables BEGIN */
@import 'variables';
/* Variables END */
/* Mixins BEGIN */
@import "mixins";
/* Mixins END */
/* Animations END */
/* Flags BEGIN */
$flagsImagePath: "../images/";
@import "../node_modules/bc-css-flags/dist/css/bc-css-flags.scss";
/* Flags END */
/* Modules BEGIN */
@import 'reset';
@import 'base';
@import 'utils';
@import 'overlay/overlay';
@import 'inlay';
@import 'reload_overlay/reload_overlay';
@import 'mini_toolbox';
@import 'modals/desktop-picker/desktop-picker';
@import 'modals/dialog';
@import 'modals/invite/info';
@import 'modals/screen-share/share-audio';
@import 'modals/screen-share/share-screen-warning';
@import 'modals/whiteboard';
@import 'videolayout_default';
@import 'subject';
@import 'popup_menu';
@import 'recording';
@import 'login_menu';
@import 'chat';
@import 'ringing/ringing';
@import 'welcome_page';
@import 'welcome_page_content';
@import 'welcome_page_settings_toolbar';
@import 'toolbars';
@import 'redirect_page';
@import 'components/input-slider';
@import '404';
@import 'policy';
@import 'popover';
@import 'filmstrip/horizontal_filmstrip';
@import 'filmstrip/small_video';
@import 'filmstrip/tile_view';
@import 'filmstrip/tile_view_overrides';
@import 'filmstrip/vertical_filmstrip';
@import 'filmstrip/vertical_filmstrip_overrides';
@import 'unsupported-browser/main';
@import 'deep-linking/main';
@import '_meetings_list.scss';
@import 'navigate_section_list';
@import 'third-party-branding/google';
@import 'third-party-branding/microsoft';
@import 'promotional-footer';
@import 'chrome-extension-banner';
@import 'settings-button';
@import 'meter';
@import 'premeeting/main';
@import 'modals/invite/invite_more';
@import 'modals/security/security';
@import 'responsive';
@import 'participants-pane';
@import 'reactions-menu';
@import 'plan-limit';
/* Modules END */

26
css/modals/_dialog.scss Normal file
View File

@@ -0,0 +1,26 @@
.modal-dialog-form {
margin-top: 5px !important;
.input-control {
background: #fafbfc;
border: 1px solid #f4f5f7;
color: inherit;
}
&-error {
margin-bottom: 8px;
}
}
/**
* Styling shared video dialog errors.
*/
.shared-video-dialog-error {
color: #E04757;
margin-top: 2px;
display: block;
}
.dialog-bottom-margin {
margin-bottom: 5px;
}

7
css/modals/_whiteboard.scss Normal file
View File

@@ -0,0 +1,7 @@
.whiteboard {
.excalidraw-wrapper {
height: 100vh;
width: 100vw;
}
}

70
css/modals/desktop-picker/_desktop-picker.scss Normal file
View File

@@ -0,0 +1,70 @@
.desktop-picker-pane {
height: 320px;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
&.source-type-screen {
.desktop-picker-source {
margin-left: auto;
margin-right: auto;
width: 50%;
}
.desktop-source-preview-thumbnail {
width: 100%;
}
.desktop-source-preview-label {
display: none;
}
}
&.source-type-window {
.desktop-picker-source {
display: inline-block;
width: 30%;
}
}
&-spinner {
justify-content: center;
display: flex;
height: 100%;
align-items: center;
}
}
.desktop-picker-source {
margin-top: 10px;
text-align: center;
&.is-selected {
.desktop-source-preview-image-container {
background: rgba(255,255,255,0.3);
border-radius: $borderRadius;
}
}
}
.desktop-source-preview-label {
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desktop-source-preview-thumbnail {
box-shadow: 5px 5px 5px grey;
height: auto;
max-width: 100%;
}
.desktop-source-preview-image-container {
padding: 10px;
}
.desktop-picker-tabs-container {
width: 65%;
margin-top: 3px;
}

43
css/modals/invite/_add-people.scss Normal file
View File

@@ -0,0 +1,43 @@
/**
* Styles errors and links in the AddPeopleDialog.
*/
.modal-dialog-form {
.add-people-form-wrap {
margin-top: 8px;
.error {
padding-left: 5px;
a {
padding-left: 5px;
}
}
.add-telephone-icon {
display: flex;
height: 28px;
transform: scaleX(-1);
width: 28px;
i {
line-height: 1.75rem;
margin: auto;
}
}
.footer-text-wrap {
display: flex;
}
.footer-telephone-icon {
display: flex;
transform: scaleX(-1);
padding-left: 10px;
i {
line-height: 1.25rem;
margin: auto;
}
}
}
}

137
css/modals/invite/_info.scss Normal file
View File

@@ -0,0 +1,137 @@
.info-dialog {
cursor: default;
display: flex;
font-size: 0.875rem;
.info-dialog-column {
margin-right: 10px;
overflow: hidden;
a,
a:active,
a:focus,
a:hover {
text-decoration: none;
}
}
.info-dialog-password,
.info-password,
.info-password-form {
align-items: baseline;
display: flex;
}
.info-label {
font-weight: bold;
}
.info-password-field {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 5px;
}
.info-password-none,
.info-password-remote {
color: #fff;
}
.info-password-local {
user-select: text;
}
}
.dial-in-number {
display: flex;
justify-content: space-between;
padding-right: 8px;
}
.dial-in-numbers-list {
max-width: 334px;
width: 100%;
margin-top: 20px;
font-size: 0.75rem;
line-height: 1.5rem;
border-collapse: collapse;
* {
user-select: text;
}
thead {
text-align: left;
}
.flag-cell {
vertical-align: top;
width: 30px;
}
.flag {
display: block;
margin: 5px 5px 0px 5px;
}
.country {
font-weight: bold;
vertical-align: top;
padding: 0 20px 0 0;
}
ul {
padding: 0px 0px 0px 0px;
}
.numbers-list {
list-style: none;
padding: 0 20px 0 0;
}
.toll-free-list {
font-weight: bold;
list-style: none;
vertical-align: top;
text-align: right;
}
li.toll-free:empty:before {
content: '.';
visibility: hidden;
}
}
.dial-in-page {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-size: 0.75rem;
max-height: 100%;
overflow: auto;
padding: 15pt;
position: absolute;
transform: translateY(-50%);
top: 50%;
width: 100%;
.dial-in-conference-id {
text-align: center;
min-width: 200px;
margin-top: 40px;
}
.dial-in-conference-description {
margin: 12px;
}
}
.info-dialog,
.dial-in-page {
* {
user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
}
}

54
css/modals/invite/_invite_more.scss Normal file
View File

@@ -0,0 +1,54 @@
.invite-more {
&-dialog {
color: #fff;
font-size: 0.875rem;
line-height: 1.5rem;
&.separator {
margin: 24px 0 24px -20px;
padding: 0 20px;
width: 100%;
height: 1px;
background: #5E6D7A;
}
&.stream {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 8px 8px 16px;
margin-top: 8px;
width: calc(100% - 26px);
height: 22px;
background: #2A3A4B;
border: 1px solid #5E6D7A;
border-radius: 3px;
cursor: pointer;
&:hover {
font-weight: 600;
}
&-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 292px;
&.selected {
font-weight: 600;
}
}
&.clicked {
background: #31B76A;
border: 1px solid #31B76A;
}
& > div > svg > path {
fill: #fff;
}
}
}
}

20
css/modals/screen-share/_share-audio.scss Normal file
View File

@@ -0,0 +1,20 @@
.share-audio-dialog {
.share-audio-animation {
width: 100%;
height: 90%;
object-fit: contain;
margin-bottom: 10px;
}
.separator-line {
margin: 24px 0 24px -20px;
padding: 0 20px;
width: 100%;
height: 1px;
background: #5E6D7A;
&:last-child {
display: none;
}
}
}

23
css/modals/screen-share/_share-screen-warning.scss Normal file
View File

@@ -0,0 +1,23 @@
.share-screen-warn-dialog {
font-size: 0.875rem;
.separator-line {
margin: 24px 0 24px -20px;
padding: 0 20px;
width: 100%;
height: 1px;
background: #5E6D7A;
&:last-child {
display: none;
}
}
.header {
font-weight: 600;
}
.description {
margin-top: 16px;
}
}

58
css/modals/security/_security.scss Normal file
View File

@@ -0,0 +1,58 @@
.security {
&-dialog {
color: #fff;
font-size: 0.875rem;
line-height: 1.5rem;
&.password-section {
display: flex;
flex-direction: column;
.description {
font-size: 0.75rem;
}
.password {
align-items: flex-start;
display: flex;
justify-content: flex-start;
margin-top: 15px;
flex-direction: column;
&-actions {
margin-top: 10px;
button {
cursor: pointer;
text-decoration: none;
font-size: 0.875rem;
color: #6FB1EA;
}
& > :not(:last-child) {
margin-right: 24px;
}
}
}
}
.separator-line {
margin: 24px 0 24px -20px;
padding: 0 20px;
width: 100%;
height: 1px;
background: #5E6D7A;
&:last-child {
display: none;
}
}
}
}
.new-toolbox .toolbox-content .toolbox-icon.toggled.security-toolbar-button {
border-width: 0;
&:not(:hover) {
background: unset;
}
}

44
css/overlay/_overlay.scss Normal file
View File

@@ -0,0 +1,44 @@
.overlay {
&__container,
&__container-light {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1016;
background: #474747;
}
&__container-light {
@include transparentBg(#474747, 0.7);
}
&__content {
position: absolute;
margin: 0 auto;
height: 100%;
width: 56%;
left: 50%;
@include transform(translateX(-50%));
&_bottom {
position: absolute;
bottom: 0;
}
}
&__policy {
position: absolute;
bottom: 24px;
width: 100%;
}
&__spinner-container {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
}

233
css/premeeting/_lobby.scss Normal file
View File

@@ -0,0 +1,233 @@
.lobby-screen {
font-size: 1rem;
font-weight: 400;
line-height: 1.625rem;
&-content {
align-items: center;
display: flex;
flex-direction: column;
.spinner {
margin: 8px;
}
.lobby-chat-container {
background-color: $chatBackgroundColor;
width: 100%;
height: 314px;
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: 16px;
border-radius: 5px;
.lobby-chat-header {
display: none;
}
}
.joining-message {
color: white;
margin: 24px auto;
text-align: center;
}
.open-chat-button {
display: none;
}
}
}
#lobby-section {
display: flex;
flex-direction: column;
.description {
font-size: 0.75rem;
}
.control-row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 15px;
label {
font-size: 0.875rem;
font-weight: bold;
}
}
}
#notification-participant-list {
background-color: $newToolbarBackgroundColor;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 8px;
left: 0;
margin: 20px;
max-height: 600px;
overflow: hidden;
overflow-y: auto;
position: fixed;
top: 30px;
z-index: $toolbarZ + 1;
&:empty {
border: none;
}
&.toolbox-visible {
// Same as toolbox subject position
top: 120px;
}
&.avoid-chat {
left: 315px;
}
.title {
background-color: rgba(0, 0, 0, .2);
font-size: 1.2em;
padding: 15px
}
button {
align-self: stretch;
margin-bottom: 8px 0;
padding: 12px;
transition: .2s transform ease;
&:disabled {
opacity: .5;
}
&:hover {
transform: scale(1.05);
&:disabled {
transform: none;
}
}
&.borderLess {
background-color: transparent;
border-width: 0;
}
&.primary {
background-color: rgb(3, 118, 218);
border-width: 0;
}
}
}
.knocking-participants-container {
list-style-type: none;
padding: 0 15px 15px 15px;
}
.knocking-participant {
align-items: center;
display: flex;
flex-direction: row;
margin: 8px 0;
.details {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-evenly;
margin: 0 30px 0 10px;
}
button {
align-self: unset;
margin: 0 5px;
}
}
@media (max-width: 300px) {
#knocking-participant-list {
margin: 0;
text-align: center;
width: 100%;
.avatar {
display: none;
}
}
.knocking-participant {
flex-direction: column;
.details {
margin: 0;
}
}
}
@media (max-width: 1000px) {
.lobby-screen-content {
.lobby-chat-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 255;
&.hidden {
display: none;
}
.lobby-chat-header {
display: flex;
flex-direction: row;
padding-top: 20px;
padding-left: 16px;
padding-right: 16px;
.title {
flex: 1;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.75rem;
letter-spacing: -1.2%;
}
}
}
.open-chat-button {
display: block;
}
}
}
.lobby-button-margin {
margin-bottom: 16px;
}
.lobby-prejoin-error {
background-color: #E04757;
border-radius: 6px;
box-sizing: border-box;
color: white;
font-size: 0.75rem;
line-height: 1rem;
margin-bottom: 16px;
margin-top: -8px;
padding: 4px;
text-align: center;
width: 100%;
}
.lobby-prejoin-input {
margin-bottom: 16px;
width: 100%;
& input {
text-align: center;
}
}

3
css/premeeting/_main.scss Normal file
View File

@@ -0,0 +1,3 @@
@import 'lobby';
@import 'premeeting-screens';
@import 'prejoin-third-party';

42
css/premeeting/_prejoin-third-party.scss Normal file
View File

@@ -0,0 +1,42 @@
$sidePanelWidth: 300px;
.prejoin-third-party {
flex-direction: column-reverse;
z-index: auto;
align-items: center;
.content {
height: auto;
margin: 0 auto;
width: auto;
.new-toolbox {
width: auto;
}
}
#preview {
background-color: transparent;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
.avatar {
display: none;
}
}
&.splash {
.content {
margin-left: calc((100% - #{$prejoinDefaultContentWidth} + #{$sidePanelWidth}) / 2)
}
}
&.guest {
.content {
margin-bottom: auto;
}
}
}

133
css/premeeting/_premeeting-screens.scss Normal file
View File

@@ -0,0 +1,133 @@
.premeeting-screen {
.action-btn {
border-radius: 6px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.5rem;
margin-bottom: 16px;
padding: 7px 16px;
position: relative;
text-align: center;
width: 100%;
&.primary {
background: #0376DA;
border: 1px solid #0376DA;
}
&.secondary {
background: #3D3D3D;
border: 1px solid transparent;
}
&.text {
width: auto;
font-size: 0.75rem;
margin: 0;
padding: 0;
}
&.disabled {
background: #5E6D7A;
border: 1px solid #5E6D7A;
color: #AFB6BC;
cursor: initial;
.icon {
& > svg {
fill: #AFB6BC;
}
}
}
.options {
border-radius: 3px;
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 36px;
&:hover {
background-color: #0262B6;
}
svg {
pointer-events: none;
}
}
}
#new-toolbox {
bottom: 0;
position: relative;
transition: none;
.toolbox-content {
margin-bottom: 4px;
}
.toolbox-content-items {
@include ltr;
background: transparent;
box-shadow: none;
display: flex;
justify-content: space-between;
padding: 8px 0;
}
.toolbox-content,
.toolbox-content-wrapper,
.toolbox-content-items {
box-sizing: border-box;
width: auto;
}
}
@media (max-width: 400px) {
.device-status-error {
border-radius: 0;
margin: 0 -16px;
}
.action-btn {
font-size: 1rem;
margin-bottom: 8px;
padding: 11px 16px;
}
}
}
#preview {
background: #040404;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
.avatar {
text {
fill: white;
}
}
video {
height: 100%;
object-fit: cover;
width: 100%;
}
}
@mixin flex-centered() {
align-items: center;
display: flex;
justify-content: center;
}

26
css/reload_overlay/_reload_overlay.scss Normal file
View File

@@ -0,0 +1,26 @@
.reload_overlay_title {
display: block;
font-size: 1rem;
line-height: 1.25rem;
}
.reload_overlay_text {
display: block;
font-size: 0.75rem;
line-height: 1.875rem;
}
#reloadProgressBar {
background: #e9e9e9;
border-radius: 3px;
height: 5px;
margin: 5px auto;
overflow: hidden;
width: 180px;
.progress-indicator-fill {
background: #0074E0;
height: 100%;
transition: width .5s;
}
}

45
css/ringing/_ringing.scss Normal file
View File

@@ -0,0 +1,45 @@
.ringing {
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 300;
@include transparentBg(#283447, 0.95);
&.solidBG {
background: #040404;
}
&__content {
position: absolute;
width: 400px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -125px;
text-align: center;
font-weight: normal;
color: #FFFFFF;
}
&__avatar {
width: 128px;
height: 128px;
border-radius: 50%;
border: 2px solid #1B2638;
}
&__status{
margin-top: 15px;
font-size: 0.875rem;
line-height: 1.25rem;
}
&__name {
font-size: 1.5rem;
line-height: 2rem;
}
}

32
css/third-party-branding/google.scss Normal file
View File

@@ -0,0 +1,32 @@
/**
* The Google sign in button must follow Google's design guidelines.
* See: https://developers.google.com/identity/branding-guidelines
*/
.google-sign-in {
background-color: #4285f4;
border-radius: 2px;
cursor: pointer;
display: inline-flex;
font-family: Roboto, arial, sans-serif;
font-size: 0.875rem;
padding: 1px;
.google-cta {
color: white;
display: inline-block;
/**
* Hack the line height for vertical centering of text.
*/
line-height: 2rem;
margin: 0 15px;
}
.google-logo {
background-color: white;
border-radius: 2px;
display: inline-block;
padding: 8px;
height: 18px;
width: 18px;
}
}

28
css/third-party-branding/microsoft.scss Normal file
View File

@@ -0,0 +1,28 @@
/**
* The Microsoft sign in button must follow Microsoft's brand guidelines.
* See: https://docs.microsoft.com/en-us/azure/active-directory/
* develop/active-directory-branding-guidelines
*/
.microsoft-sign-in {
align-items: center;
background: #FFFFFF;
border: 1px solid #8C8C8C;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
font-family: Segoe UI, Roboto, arial, sans-serif;
height: 41px;
padding: 12px;
.microsoft-cta {
display: inline-block;
color: #5E5E5E;
font-size: 0.875rem;
line-height: 2.5rem;
}
.microsoft-logo {
display: inline-block;
margin-right: 12px;
}
}

1
css/unsupported-browser/_main.scss Normal file
View File

@@ -0,0 +1 @@
@import 'unsupported-desktop-browser';

39
css/unsupported-browser/_unsupported-desktop-browser.scss Normal file
View File

@@ -0,0 +1,39 @@
.unsupported-desktop-browser {
@include absoluteAligning();
display: block;
text-align: center;
&__title {
color: $unsupportedBrowserTitleColor;
font-weight: 300;
font-size: $unsupportedBrowserTitleFontSize;
letter-spacing: 1px;
}
&__description {
color: $unsupportedDesktopBrowserTextColor;
font-size: $unsupportedDesktopBrowserTextFontSize;
font-weight: 300;
letter-spacing: 1px;
margin-top: 16px;
&_small {
@extend .unsupported-desktop-browser__description;
font-size: $unsupportedBrowserTextSmallFontSize;
}
}
&__link {
color: #489afe;
@include transition(color .1s ease-out);
&:hover {
color: #287ade;
cursor: pointer;
text-decoration: none;
@include transition(color .1s ease-in);
}
}
}