diff --git a/src/styles/components/_audiovideo.scss b/src/styles/components/_audiovideo.scss index a8b71207..b985a3ab 100644 --- a/src/styles/components/_audiovideo.scss +++ b/src/styles/components/_audiovideo.scss @@ -129,7 +129,7 @@ max-width: 100%; } .localVideo { - background: rgba(0,0,0,.4); + background: $video-background; display: block; max-height: 100%; opacity: 0; @@ -156,7 +156,7 @@ } .audiovideo .remoteVideo{ - background: rgba(0,0,0,.4); + background: $video-background; display: inline-block; max-height: 100%; max-width: 100%; @@ -169,11 +169,11 @@ visibility: visible; } &.onlyaudio { - background: #666; + background: $video-onlyaudio-background; visibility: visible; } .onlyaudio { - color: rgba(255,255,255,.3); + color: $video-onlyaudio; display: none; font-size: 80px; left: 0; @@ -226,7 +226,7 @@ } .audiovideo .overlayActions { - background: rgba(0,0,0,.9); + background: $video-overlayactions; bottom: 0; height: 70px; left: 0; @@ -249,7 +249,7 @@ .remoteVideo { &.talking .peerLabel { - color: #9dd53a; + color: $audiovideolevel; } .peerLabel { transition: color 500ms ease-out; @@ -272,7 +272,7 @@ .miniContainer { &.talking video { - border: 1px solid #9dd53a; + border: 1px solid $audiovideolevel; } video { border: 1px solid transparent; @@ -307,7 +307,7 @@ .renderer-conferencekiosk { .remoteVideos { - background: rgba(0,0,0,.4); + background: $video-background; bottom: 2px; min-height: 108px; pointer-events: auto; @@ -327,7 +327,7 @@ font-size: 1.1em; } .peerLabel { - background: rgba(0,0,0,.9); + background: $video-overlayactions; } } .miniContainer { diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss index fb41a0ae..b24989c6 100644 --- a/src/styles/global/_variables.scss +++ b/src/styles/global/_variables.scss @@ -40,6 +40,11 @@ $grey4: rgba(0,0,0,.4); $dgrey: rgb(34,34,34); $red: rgb(219,79,57); +$video-background: rgba(0,0,0,.4); +$video-onlyaudio-background: #666; +$video-onlyaudio: rgba(255,255,255,.3); +$video-overlayactions: rgba(0,0,0,.9); + $breakpoint-small: 480px; $breakpoint-medium: 700px; $breakpoint-large: 1280px;