diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss index ca1672b83..519ffaa69 100644 --- a/css/_atlaskit_overrides.scss +++ b/css/_atlaskit_overrides.scss @@ -32,6 +32,18 @@ .dropdown-menu div[style*="transform"] { outline: 1px solid #455166; } + .dropdown-menu button:not(:active):not(:hover) > span { + color: #B8C7E0; + } + + /** + * Override @atlaskit/tab styling when in a modal because the + * tab text color clash with the modal backgrounds. + */ + div[role="tablist"] > div:not([data-selected]):not(:hover), + label > div > span { + color: #B8C7E0 !important; + } } /** diff --git a/css/_audio-preview.scss b/css/_audio-preview.scss index a0140f57f..5be14b2e0 100644 --- a/css/_audio-preview.scss +++ b/css/_audio-preview.scss @@ -9,6 +9,11 @@ max-height: 456px; overflow: auto; width: 300px; + &-ul { + margin:0; + padding:0; + list-style-type: none; + } } &-header { @@ -64,7 +69,13 @@ &-speaker { position: relative; - &:hover { + &-ul { + margin:0; + padding:0; + list-style-type: none; + } + + &:hover, &:focus-within, &:focus { .audio-preview-entry { background: #36383C; margin-left: 0; @@ -81,7 +92,7 @@ } .audio-preview-entry-text { - max-width: 196px; + max-width: 178px; } } @@ -90,7 +101,7 @@ } .audio-preview-entry-text { - max-width: 256px; + max-width: 238px; } } @@ -150,8 +161,9 @@ color: #1C2025; cursor: pointer; font-weight: 600; + font-size: 0.8rem; line-height: 24px; - padding: 2px 16px; + padding: 2px 8px; position: absolute; right: 16px; top: 5px; @@ -162,4 +174,10 @@ right: 16px; top: 14px; } + + // Override @atlaskit/InlineDialog container which is made with styled components + & > div:nth-child(2) { + outline: none; + padding: 0; + } } diff --git a/css/_aui_reset.scss b/css/_aui_reset.scss index 66716cca3..3f36131fa 100644 --- a/css/_aui_reset.scss +++ b/css/_aui_reset.scss @@ -219,8 +219,9 @@ abbr { } a { - color: #3572b0; + color: #44A5FF; text-decoration: none; + font-weight: bold; } a:focus, a:hover, diff --git a/css/_avatar.scss b/css/_avatar.scss index 9c0d88bdd..a66816213 100644 --- a/css/_avatar.scss +++ b/css/_avatar.scss @@ -1,7 +1,7 @@ .avatar { background-color: #AAA; border-radius: 50%; - color: rgba(255, 255, 255, 0.6); + color: rgba(255, 255, 255, 1); font-weight: 100; object-fit: cover; @@ -25,10 +25,6 @@ width: 100%; } -.defaultAvatar { - opacity: 0.6 -} - .avatar-badge { position: relative; diff --git a/css/_chat.scss b/css/_chat.scss index 16b5ee225..b884bd9ff 100644 --- a/css/_chat.scss +++ b/css/_chat.scss @@ -99,18 +99,19 @@ div { svg { cursor: pointer; - fill: white + fill: white; } } } + .chat-header { height: 70px; position: relative; width: 100%; z-index: 1; display: flex; - justify-content: flex-end; + justify-content: space-between; padding: 16px; align-items: center; box-sizing: border-box; @@ -132,6 +133,7 @@ .send-button { background: #1B67EC; cursor: pointer; + margin-left: 0.3rem; @media (hover: hover) and (pointer: fine) { &:hover { @@ -188,8 +190,9 @@ display: flex; align-items: center; justify-content: center; - height: 40px; - width: 40px; + height: 38px; + width: 38px; + margin: 2px; border-radius: 3px; } @@ -226,6 +229,11 @@ border: 0px none; box-shadow: none; } +#usermsg:focus, +#usermsg:active { + border-bottom: 1px solid white; + padding-bottom: 8px; + } #nickname { text-align: center; @@ -234,6 +242,16 @@ margin: auto 0; padding: 0 16px; + #nickname-title { + margin-bottom: 5px; + display: block; + } + + label[for="nickinput"] { + > div > span { + color: #B8C7E0; + } + } input { height: 40px; } @@ -254,7 +272,7 @@ cursor: pointer; &.disabled { - color: #757575; + color: #AFB6BC; background: #11336E; pointer-events: none; } @@ -301,6 +319,19 @@ } } +.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; +} + .chatmessage { background-color: $chatRemoteMessageBackgroundColor; border-radius: 0px 6px 6px 6px; @@ -350,10 +381,6 @@ color: #757575; } -.smiley { - font-size: 14pt; -} - #smileys { font-size: 20pt; margin: auto; @@ -382,7 +409,7 @@ box-sizing: border-box; background-color: rgba(0, 0, 0, .6) !important; height: auto; - max-height: 0; + display: none; overflow: hidden; position: absolute; width: calc(#{$sidebarWidth} - 32px); @@ -398,6 +425,7 @@ transition: max-height 0.3s; &.show-smileys { + display: flex; max-height: 500%; } @@ -413,7 +441,7 @@ .smileyContainer { width: 40px; - height: 36px; + height: 40px; display: inline-block; text-align: center; } @@ -509,7 +537,7 @@ &-header { display: flex; - justify-content: flex-end; + justify-content: space-between; align-items: center; margin: 16px; width: calc(100% - 32px); diff --git a/css/_e2ee.scss b/css/_e2ee.scss index eadd577d8..8b25562b2 100644 --- a/css/_e2ee.scss +++ b/css/_e2ee.scss @@ -8,7 +8,10 @@ .read-more { cursor: pointer; - opacity: .7; + opacity: .9; + color: #fff; + font-size: 0.8rem; + font-weight: bold; } } diff --git a/css/_meetings_list.scss b/css/_meetings_list.scss index 2555d6ba6..ecbc76f7f 100644 --- a/css/_meetings_list.scss +++ b/css/_meetings_list.scss @@ -125,7 +125,8 @@ cursor: pointer; } - &.with-click-handler:hover { + &.with-click-handler:hover, + &.with-click-handler:focus { background-color: #c7ddff; } @@ -158,7 +159,7 @@ } } - .item:hover { + .item:hover, .item:focus, .item:focus-within { .delete-meeting { display: block; } diff --git a/css/_prejoin.scss b/css/_prejoin.scss index f67f5f1c8..e5084b1ab 100644 --- a/css/_prejoin.scss +++ b/css/_prejoin.scss @@ -3,6 +3,15 @@ &-input-area { margin: 0 auto; text-align: center; + + &-label { + display: block; + margin-bottom: 5px; + color: #ffffff; + font-weight: 300; + font-size: 15px; + line-height: 24px; + } } &-title { @@ -74,10 +83,10 @@ z-index: 1; &--warning { - background: rgba(241, 173, 51, 0.7) + background: rgba(241, 173, 51, 1); } &--ok { - background: rgba(49, 183, 106, 0.7); + background: rgba(49, 183, 106, 1); } } @@ -92,6 +101,8 @@ &-error-desc { margin-right: 4px; + color: #fff; + font-weight: bold; } .settings-button-container { diff --git a/css/_premeeting-screens.scss b/css/_premeeting-screens.scss index 3c2f8b0cd..928a91df8 100644 --- a/css/_premeeting-screens.scss +++ b/css/_premeeting-screens.scss @@ -113,7 +113,7 @@ cursor: pointer; color: #fff; display: flex; - flex-direction: row; + flex-direction: column; font-size: 15px; font-weight: 300; justify-content: center; @@ -139,6 +139,9 @@ margin-left: 10px; } } + .copy-button{ + width: 298px; + } .copy-meeting-text { width: 266px; @@ -177,7 +180,7 @@ } &.focused { - box-shadow: 0px 0px 4px 3px #0376DA; + box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px white; } } } @@ -249,6 +252,10 @@ fill: transparent; } + label { + cursor: pointer; + } + &:hover { background: rgba(255, 255, 255, 0.1); diff --git a/css/_recording.scss b/css/_recording.scss index cff7846e6..866cbccf6 100644 --- a/css/_recording.scss +++ b/css/_recording.scss @@ -105,6 +105,7 @@ .helper-link { cursor: pointer; + font-weight: bold; display: inline-block; flex-shrink: 0; margin-left: auto; diff --git a/css/_toolbars.scss b/css/_toolbars.scss index ffa430173..023f9237b 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -54,6 +54,7 @@ margin-bottom: 16px; position: relative; z-index: $toolbarZ; + pointer-events: none; .button-group-center, .button-group-left, @@ -103,6 +104,7 @@ flex-direction: column; margin: 0 auto; max-width: 100%; + pointer-events: all; } .toolbox-content-items { @@ -112,6 +114,7 @@ margin: 0 auto; padding: 6px; text-align: center; + pointer-events: all; >div { margin-left: 8px; diff --git a/css/_video-preview.scss b/css/_video-preview.scss index 200402d21..0b4754eea 100644 --- a/css/_video-preview.scss +++ b/css/_video-preview.scss @@ -79,4 +79,8 @@ white-space: nowrap; } } + // Override @atlaskit/InlineDialog container which is made with styled components + & > div:nth-child(2) { + padding: 0; + } } diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index f82fb31fd..5cd3462a7 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -428,7 +428,7 @@ right: 0; z-index: $zindex2; width: 18px; - height: 13px; + height: 18px; color: #FFF; font-size: 10pt; margin-right: $remoteVideoMenuIconMargin; diff --git a/css/buttons/copy.scss b/css/buttons/copy.scss index 20867ce51..b381c09ae 100644 --- a/css/buttons/copy.scss +++ b/css/buttons/copy.scss @@ -3,7 +3,7 @@ justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; - margin-top: 8px; + margin-top: 5px; width: calc(100% - 24px); height: 24px; diff --git a/css/components/_input-slider.scss b/css/components/_input-slider.scss index 57c518fc7..80263c6f9 100644 --- a/css/components/_input-slider.scss +++ b/css/components/_input-slider.scss @@ -9,10 +9,10 @@ input[type=range]{ } /** - * Disable the default focus styles for webkit range inputs (sliders). + * Show focus for keyboard accessibility. */ input[type=range]:focus { - outline: none; + outline: 1px solid white !important; } /** diff --git a/css/filmstrip/_filmstrip_toolbar.scss b/css/filmstrip/_filmstrip_toolbar.scss index 13f99f945..852dabdfd 100644 --- a/css/filmstrip/_filmstrip_toolbar.scss +++ b/css/filmstrip/_filmstrip_toolbar.scss @@ -16,7 +16,6 @@ padding: 0; margin: 0; border: none; - outline: none; -webkit-appearance: none; diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index 4469deba7..4c5d07ec9 100644 --- a/css/filmstrip/_tile_view.scss +++ b/css/filmstrip/_tile_view.scss @@ -7,7 +7,7 @@ * see. */ .active-speaker { - box-shadow: 0 0 5px 3px $videoThumbnailSelected + box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px $videoThumbnailSelected; } #filmstripRemoteVideos { diff --git a/css/filmstrip/_vertical_filmstrip_overrides.scss b/css/filmstrip/_vertical_filmstrip_overrides.scss index 1c06c80df..5d6c58638 100644 --- a/css/filmstrip/_vertical_filmstrip_overrides.scss +++ b/css/filmstrip/_vertical_filmstrip_overrides.scss @@ -81,7 +81,7 @@ .local-video-menu-trigger, .remote-video-menu-trigger { - margin-bottom: 7px; + margin-bottom: 3px; margin-left: $remoteVideoMenuIconMargin; } } diff --git a/css/modals/device-selection/_device-selection.scss b/css/modals/device-selection/_device-selection.scss index 2902868cb..a7d48c042 100644 --- a/css/modals/device-selection/_device-selection.scss +++ b/css/modals/device-selection/_device-selection.scss @@ -103,7 +103,7 @@ font-size: 14px; a { - color: #2684FF; + color: #6FB1EA; cursor: pointer; text-decoration: none; } @@ -119,7 +119,7 @@ height: 8px; .audio-input-preview-level { - background: #4C9AFF; + background: #75B1FF; border-radius: 5px; height: 100%; -webkit-transition: width .1s ease-in-out; diff --git a/css/modals/feedback/_feedback.scss b/css/modals/feedback/_feedback.scss index 29977fe88..05ee41e7b 100644 --- a/css/modals/feedback/_feedback.scss +++ b/css/modals/feedback/_feedback.scss @@ -94,5 +94,9 @@ }; } + .star-btn:focus, + .star-btn:active { + outline: 1px solid #B8C7E0; + } } } diff --git a/css/modals/invite/_info.scss b/css/modals/invite/_info.scss index a021c5d30..9eed4e5b6 100644 --- a/css/modals/invite/_info.scss +++ b/css/modals/invite/_info.scss @@ -30,20 +30,26 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + margin-right: 5px; } .info-password-none, .info-password-remote { - opacity: 0.5; + color: #fff; } .info-password-input { width: 100%; - background-color: transparent; - border: none; + background-color: #0E1624; + border-radius: 3px; + border: 2px solid #202B3D; color: inherit; padding-left: 0; } + .info-password-input:focus , + .info-password-input:active { + border: 2px solid #B8C7E0; + } .info-password-local { user-select: text; diff --git a/css/modals/invite/_invite_more.scss b/css/modals/invite/_invite_more.scss index 606aca520..0b0198fee 100644 --- a/css/modals/invite/_invite_more.scss +++ b/css/modals/invite/_invite_more.scss @@ -130,6 +130,7 @@ display: inline-block; vertical-align: middle; cursor: pointer; + height: 24px; } } @@ -141,7 +142,7 @@ & > a { display: inline-block; height: 24px; - width: 48px; + min-width: 48px; border-radius: 3px; text-align: center; text-decoration: none; diff --git a/css/modals/settings/_settings.scss b/css/modals/settings/_settings.scss index 1b4d730ff..78019c37c 100644 --- a/css/modals/settings/_settings.scss +++ b/css/modals/settings/_settings.scss @@ -16,12 +16,19 @@ } .mock-atlaskit-label { - color: #56637A; + color: #b8c7e0; font-size: 12px; font-weight: 600; line-height: 1.33; padding: 20px 0px 4px 0px; } + input[type="checkbox"]:checked + svg { + --checkbox-background-color: #6492e7; + --checkbox-border-color: #6492e7; + } + input[type="checkbox"] + svg + span { + color: #b8c7e0; + } input[type="checkbox"] + svg + span { color: #9FB0CC; @@ -65,4 +72,14 @@ .sign-out-cta { margin-bottom: 20px; } + + @media only screen and (max-width: $smallScreen) { + .device-selection { + display: flex; + flex-direction: column; + } + .more-tab { + flex-direction: column; + } + } } diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss index b83d564ca..855f584b3 100644 --- a/css/modals/video-quality/_video-quality.scss +++ b/css/modals/video-quality/_video-quality.scss @@ -86,6 +86,7 @@ .video-quality-dialog-label-container.active { color: $videoQualityActive; + font-weight: bold; &::before { background: $videoQualityActive; diff --git a/css/modals/virtual-background/_virtual-background.scss b/css/modals/virtual-background/_virtual-background.scss index 6871b53f8..afe97bd50 100644 --- a/css/modals/virtual-background/_virtual-background.scss +++ b/css/modals/virtual-background/_virtual-background.scss @@ -7,9 +7,7 @@ grid-template-columns: auto auto auto auto auto; column-gap: 9px; cursor: pointer; - .desktop-share:hover, .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{ - height: 56px; - width: 103px; + .desktop-share:hover, .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{ opacity: .5; border: 2px solid #99bbf3; @media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) { @@ -21,152 +19,75 @@ width: 56px; } } - .thumbnail { + .background-option { margin-top: 8px; border-radius: 6px; - object-fit: cover; height: 60px; width: 107px; + text-align: center; + justify-content: center; + font-weight: bold; + box-sizing: border-box; + display: flex; + align-items: center; + } + .thumbnail { + object-fit: cover; } .thumbnail:hover ~ .delete-image-icon { display: block; } .thumbnail-selected { - margin-top: 8px; - border-radius: 6px; object-fit: cover; - height: 56px; - width: 103px; border: 2px solid #246FE5; } .blur{ box-shadow: inset 0 0 12px #000000; - margin-top: 8px; background: #7E8287; - font-weight: bold; - height: 60px; - width: 107px; - border-radius: 6px; - text-align: center; - vertical-align: middle; - line-height: 60px; + padding: 0 10px; } .blur-selected { box-shadow: inset 0 0 12px #000000; - margin-top: 8px; background: #7E8287; - font-weight: bold; - height: 56px; - width: 103px; - border-radius: 6px; border: 2px solid #246FE5; - text-align: center; - vertical-align: middle; - line-height: 60px; + padding: 0 10px; } .slight-blur{ box-shadow: inset 0 0 12px #000000; - margin-top: 8px; background: #A4A4A4; - font-weight: bold; - height: 60px; - width: 107px; - border-radius: 6px; - text-align: center; - vertical-align: middle; - line-height: 60px; + padding: 0 10px; } .slight-blur-selected{ box-shadow: inset 0 0 12px #000000; - margin-top: 8px; background: #A4A4A4; - font-weight: bold; - height: 56px; - width: 103px; - border-radius: 6px; border: 2px solid #246FE5; - text-align: center; - vertical-align: middle; - line-height: 60px; + padding: 0 10px; } .virtual-background-none { - margin-top: 8px; background: #525252; - font-weight: bold; - height: 60px; - width: 107px; - border-radius: 6px; - text-align: center; - vertical-align: middle; - line-height: 60px; + padding: 0 10px; } .none-selected { - margin-top: 8px; background: #525252; - font-weight: bold; - height: 56px; - width: 103px; - border-radius: 6px; border: 2px solid #246FE5; - text-align: center; - vertical-align: middle; - line-height: 60px; + padding: 0 10px; } + .desktop-share{ - margin-top: 8px; background: #525252; - font-weight: bold; - height: 60px; - width: 107px; - border-radius: 6px; - text-align: center; - vertical-align: middle; - line-height: 60px; } .desktop-share-selected{ - margin-top: 8px; background: #525252; - font-weight: bold; - height: 56px; - width: 103px; - border-radius: 6px; border: 2px solid #246FE5; - text-align: center; - vertical-align: middle; - line-height: 60px; - } - .share-desktop-icon{ - margin-top: 15%; + padding: 0 10px; } @media (min-width: 432px) and (max-width: 632px) { font-size: 1.5vw; - .share-desktop-icon{ - margin-top: 25%; - } - .desktop-share, .virtual-background-none, .thumbnail, .blur, .slight-blur{ - height: 60px; - width: 60px; - } - .desktop-share-selected, .thumbnail-selected, .none-selected, .blur-selected, .slight-blur-selected{ - height: 56px; - width: 56px; - } } @media (max-width: 432px){ - .share-desktop-icon{ - margin-top: 25%; - } font-size: 1.5vw; - .desktop-share, .virtual-background-none, .thumbnail, .blur, .slight-blur{ - height: 60px; - width: 60px; - } - .desktop-share-selected, .thumbnail-selected, .none-selected, .blur-selected, .slight-blur-selected{ - height: 56px; - width: 56px; - } } } @@ -205,12 +126,18 @@ left: 51px } } + .delete-image-icon:hover { display: block; } .thumbnail-container { position: relative; + &:focus-within { + .thumbnail ~ .delete-image-icon{ + display: block; + } + } } .add-background{ diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 21cc759fa..49854d8f5 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -107,4 +107,4 @@ $selectActiveItemBg: darken($controlBackground, 20%); /** * TODO: Replace by themed component. */ -$videoQualityActive: #4C9AFF; +$videoQualityActive: #57A0ff; diff --git a/index.html b/index.html index a1f9bdbca..361239fb8 100644 --- a/index.html +++ b/index.html @@ -186,10 +186,10 @@
-