summaryrefslogtreecommitdiffstats
path: root/webapp/sass
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass')
-rw-r--r--webapp/sass/components/_module.scss1
-rw-r--r--webapp/sass/components/_webrtc.scss297
-rw-r--r--webapp/sass/layout/_content.scss3
-rw-r--r--webapp/sass/layout/_headers.scss3
-rw-r--r--webapp/sass/layout/_sidebar-right.scss9
-rw-r--r--webapp/sass/responsive/_desktop.scss9
-rw-r--r--webapp/sass/responsive/_mobile.scss6
-rw-r--r--webapp/sass/responsive/_tablet.scss12
-rw-r--r--webapp/sass/routes/_print.scss3
-rw-r--r--webapp/sass/utils/_mixins.scss72
-rw-r--r--webapp/sass/utils/_variables.scss10
11 files changed, 410 insertions, 15 deletions
diff --git a/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss
index 8c2c575c2..3e587707d 100644
--- a/webapp/sass/components/_module.scss
+++ b/webapp/sass/components/_module.scss
@@ -19,3 +19,4 @@
@import 'tooltip';
@import 'tutorial';
@import 'videos';
+@import 'webrtc';
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
new file mode 100644
index 000000000..b8fc64442
--- /dev/null
+++ b/webapp/sass/components/_webrtc.scss
@@ -0,0 +1,297 @@
+@charset 'UTF-8';
+
+.webrtc__user-profile {
+ @include webrtc-button;
+ text-align: center;
+
+ #webrtc-btn {
+ display: inherit;
+ }
+}
+
+.webrtc__header {
+ @include webrtc-button;
+ float: left;
+ margin-right: 10px;
+ position: relative;
+ top: 13px;
+}
+
+.webrtc__notification--rhs {
+ background: $button--ready;
+ border-radius: 3px 0 0 3px;
+ bottom: 10px;
+ color: $white;
+ cursor: pointer;
+ padding: 10px 15px;
+ position: absolute;
+ right: 0;
+ z-index: 9999;
+
+ &:empty {
+ display: none;
+ }
+
+ .fa {
+ margin-right: 6px;
+ }
+}
+
+.webrtc__error {
+ padding: 0 20px;
+ text-align: center;
+
+ .control-label {
+ @include border-radius(3px);
+ background: #f2f2f2;
+ font-size: 14px;
+ font-weight: normal;
+ margin: 1em 0 -1em;
+ padding: .7em 1em;
+ width: 100%;
+ }
+
+ .has-error {
+ .control-label {
+ color: #a94442;
+ font-size: .95em;
+
+ &:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ color: #a94442;
+ content: '\F071';
+ display: inline-block;
+ font: normal normal normal 14px/1 FontAwesome;
+ margin-right: 4px;
+ text-rendering: auto;
+ transform: translate(0, 0);
+ }
+ }
+ }
+}
+
+#videos {
+ background: $black;
+ font-size: 0;
+ left: 0;
+ pointer-events: none;
+ position: relative;
+ text-align: center;
+ transition: all 1s;
+ width: 100%;
+
+ #main-video video {
+ width: 100%;
+ }
+
+ #local-video {
+ border: 1px solid gray;
+ max-width: 30%;
+ opacity: 1;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ transition: opacity 1s;
+ z-index: 2;
+
+ video {
+ -moz-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ -webkit-transform: scale(-1, 1);
+ height: 100%;
+ max-height: 100%;
+ max-width: 100%;
+ object-fit: cover;
+ transform: scale(-1, 1);
+ transition: opacity 1s;
+ width: 100%;
+ }
+ }
+
+ .webrtc__local-image {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ z-index: 2;
+
+ img {
+ border-radius: 50%;
+ height: 64px;
+ max-width: 100%;
+ width: 64px;
+ }
+ }
+
+ .webrtc__remote-image {
+ background-color: $black;
+ border: 1px solid alpha-color($black, .2);
+ padding: 40px 0;
+
+ img {
+ border-radius: 50%;
+ max-height: 128px;
+ max-width: 128px;
+ width: 100%;
+ }
+ }
+
+ .webrtc__remote-mute {
+ bottom: 0;
+ position: absolute;
+ right: 10px;
+ z-index: 9999;
+ }
+}
+
+.webrtc-buttons {
+ margin-top: 1.2em;
+ text-align: center;
+
+ .webrtc-icons__call {
+ border-radius: 48px;
+
+ circle {
+ fill: $button--ready;
+ }
+
+ &:hover {
+ cursor: pointer;
+
+ circle {
+ fill: darken($button--ready, 5%);
+ }
+ }
+
+ &[disabled] {
+ circle {
+ fill: $video-circle-offline;
+ }
+ }
+ }
+
+ .webrtc-icons__cancel {
+ border-radius: 48px;
+
+ circle {
+ fill: $button--cancel;
+ }
+
+ &:hover {
+ cursor: pointer;
+
+ circle {
+ fill: darken($button--cancel, 5%);
+ }
+ }
+ }
+}
+
+.webrtc-icons {
+ &.active {
+ svg {
+ transform: translateY(0);
+ }
+ }
+
+ svg {
+ border-radius: 48px;
+ margin: 5px;
+
+ path {
+ &.on {
+ display: block;
+ }
+
+ &.off {
+ display: none;
+ }
+ }
+ }
+}
+
+.connecting {
+ position: absolute;
+ top: 0;
+ width: 100%;
+
+ .loading-screen {
+ background-color: rgba(0,0,0, .3);
+ color: $connecting;
+ margin-left: 5px;
+ padding: 20px;
+ position: relative;
+ top: 75px;
+ width: 97%;
+
+ .loading__content {
+ .round {
+ background: $connecting !important;
+ }
+ }
+ }
+}
+
+.webrtc-notification {
+ background-color: $webrtc-notification-bg;
+ color: $white;
+ left: calc(50% - 200px);
+ padding: 20px 30px 10px;
+ position: absolute;
+ text-align: center;
+ top: calc(50% - 115px);
+ width: 400px;
+ z-index: 99999;
+
+ .webrtc-buttons {
+ margin-top: 1.2em;
+ text-align: center;
+
+ .webrtc-icons__pickup {
+ circle {
+ fill: $button--pickup;
+ }
+
+ &:hover {
+ cursor: pointer;
+
+ circle {
+ fill: darken($button--pickup, 3%);
+ }
+ }
+ }
+ }
+}
+
+.sidebar--right--expanded {
+ #videos {
+ height: 100%;
+ position: absolute;
+
+ #main-video {
+ height: 100%;
+
+ video {
+ height: 100%;
+ width: auto;
+ }
+ }
+ }
+
+ .webrtc-buttons {
+ bottom: 5px;
+ position: absolute;
+ width: 100%;
+ }
+
+ #videos {
+ #local-video {
+ max-width: 200px;
+ }
+ }
+
+ #videos.small {
+ position: relative;
+ }
+}
diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss
index 514093f1f..22e8a5369 100644
--- a/webapp/sass/layout/_content.scss
+++ b/webapp/sass/layout/_content.scss
@@ -1,7 +1,8 @@
@charset 'UTF-8';
.inner-wrap {
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
.search-bar__container {
display: none;
}
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index c3a5f8fda..7e1ccc554 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -388,7 +388,8 @@
}
}
- .channel__wrap.move--left & {
+ .channel__wrap.move--left &,
+ .channel__wrap.webrtc--show & {
position: absolute;
right: -400px;
top: 14px;
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index a70c30b16..915bb2d09 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -8,7 +8,11 @@
position: fixed;
right: 0;
width: 400px;
- z-index: 5;
+ z-index: 6;
+
+ &.webrtc {
+ z-index: 5;
+ }
.sidebar--right__bg {
@include single-transition(background-color, .5s, ease);
@@ -20,7 +24,8 @@
width: 300%;
}
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
.sidebar--right__bg {
left: -100%;
}
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index d891fe17f..50df5ba02 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -2,7 +2,8 @@
@media screen and (max-width: 1800px) {
.inner-wrap {
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
.date-separator,
.new-separator {
&.hovered--comment {
@@ -18,7 +19,8 @@
@media screen and (max-width: 1440px) {
.inner-wrap {
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
.help__format-text {
display: none;
}
@@ -53,7 +55,8 @@
}
.inner-wrap {
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
.file-overlay {
font-size: em(18px);
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index e00b818e7..c39870bd8 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -779,7 +779,8 @@
display: block;
width: 290px;
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
@include translate3d(0, 0, 0);
}
}
@@ -958,7 +959,8 @@
}
}
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
margin: 0;
@include translate3d(-100%, 0, 0);
}
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 36b6af851..45fc4fad4 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -17,7 +17,8 @@
@include single-transition(all, .5s, ease);
@include translateX(100%);
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
-webkit-transform: translateX(0) !important;
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
@@ -53,7 +54,8 @@
margin-right: 0 !important;
}
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
margin-right: 0 !important;
.channel-header__links {
@@ -72,7 +74,8 @@
}
.sidebar--right {
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
@include translateX(0);
}
@@ -106,7 +109,8 @@
}
.inner-wrap {
- &.move--left {
+ &.move--left,
+ &.webrtc--show {
margin-right: 400px;
}
}
diff --git a/webapp/sass/routes/_print.scss b/webapp/sass/routes/_print.scss
index e7380e21c..079fc200e 100644
--- a/webapp/sass/routes/_print.scss
+++ b/webapp/sass/routes/_print.scss
@@ -78,7 +78,8 @@
margin-left: 0;
}
- #channel_view .inner-wrap.move--left {
+ #channel_view .inner-wrap.move--left,
+ #channel_view .inner-wrap.webrtc--show {
margin-right: 0;
}
diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss
index 6e4488fca..e252086ae 100644
--- a/webapp/sass/utils/_mixins.scss
+++ b/webapp/sass/utils/_mixins.scss
@@ -26,4 +26,74 @@
@mixin cursor($value) {
cursor: -webkit-$value;
cursor: zoom-$value;
-} \ No newline at end of file
+}
+
+// Webrtc button
+@mixin webrtc-button {
+ .webrtc__button {
+ @include border-radius(50px);
+ display: block;
+ height: 32px;
+ width: 32px;
+
+ &.on,
+ &:hover {
+ background: darken($button--ready, 5%);
+ }
+
+ &:hover circle {
+ fill: darken($button--ready, 5%);
+ }
+
+ circle {
+ fill: $button--ready;
+
+ &.offline {
+ fill: $video-circle-offline;
+ }
+ }
+
+ path {
+ .on {
+ display: none;
+ }
+
+ .off {
+ display: block;
+ }
+ }
+
+ &.on {
+ path {
+ .on {
+ display: block;
+ }
+
+ .off {
+ display: none;
+ }
+ }
+
+ circle {
+ fill-opacity: 0;
+ }
+ }
+ }
+
+ a {
+ &[disabled] {
+ .webrtc__button {
+ &:hover {
+ background: none;
+ box-shadow: none;
+ }
+
+ &:hover {
+ circle {
+ fill: $video-circle-offline;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss
index 53004520e..ffbcc847e 100644
--- a/webapp/sass/utils/_variables.scss
+++ b/webapp/sass/utils/_variables.scss
@@ -17,3 +17,13 @@ $border-gray: 1px solid #ddd;
// Random variables
$border-rad: 1px;
+
+// Webrtc Variables
+$button--ready: #00A6EE;
+$video-circle-btn: #2f81b7;
+$video-circle-hover: #56C303;
+$video-circle-offline: #aaa;
+$button--cancel: #E41020;
+$button--pickup: #73B001;
+$connecting: $white;
+$webrtc-notification-bg: rgba(112, 128, 144, .8); \ No newline at end of file
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-08-02 11:28:05 +0000