init

css/modals/_dialog.scss

@@ -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;
+}

css/modals/_whiteboard.scss

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

css/modals/desktop-picker/_desktop-picker.scss

@@ -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;
+}

css/modals/invite/_add-people.scss

@@ -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;
+            }
+        }
+    }
+}

css/modals/invite/_info.scss

@@ -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;
+    }
+}

css/modals/invite/_invite_more.scss

@@ -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;
+            }
+        }
+    }
+}

css/modals/screen-share/_share-audio.scss

@@ -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;
+        }
+    }
+}

css/modals/screen-share/_share-screen-warning.scss

@@ -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;
+    }
+}

css/modals/security/_security.scss

@@ -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;
+    }
+}