Browse Source

Clean up filmstrip styles

j8
Ilya Daynatovich 9 years ago
parent
commit
24169743e7
3 changed files with 48 additions and 43 deletions
  1. 47
    11
      css/_filmstrip.scss
  2. 0
    31
      css/_videolayout_default.scss
  3. 1
    1
      modules/UI/videolayout/FilmStrip.js

+ 47
- 11
css/_filmstrip.scss View File

1
+%align-right {
2
+    @include flex();
3
+    flex-direction: row-reverse;
4
+    flex-wrap: nowrap;
5
+    justify-content: flex-start;
6
+}
7
+
1
 .filmstrip {
8
 .filmstrip {
2
-    &__videos {
9
+    position: absolute;
10
+    bottom: 0;
11
+    right: 0;
12
+    padding: 10px 10px 17px 5px;
13
+    @extend %align-right;
14
+
15
+    &__toolbar {
3
         @include flex();
16
         @include flex();
4
-        flex-direction: row-reverse;
17
+        flex-direction: column-reverse;
5
         flex-wrap: nowrap;
18
         flex-wrap: nowrap;
6
-        justify-content: flex-start;
19
+        position: relative;
20
+        z-index: 1;                     // Set z-index to make element visible
21
+        width: 20px;
22
+
23
+        button {
24
+            font-size: 14px;
25
+            line-height: 1.2;
26
+            text-align: center;
27
+            background: transparent;
28
+            opacity: 0.7;
29
+            height: auto;
30
+            width: 100%;
31
+            padding: 0;
32
+            margin: 0 1px;
33
+            border: none;
34
+            outline: none;
35
+
36
+            -webkit-appearance: none;
37
+
38
+            &:hover {
39
+                opacity: 1;
40
+            }
41
+
42
+            i {
43
+                cursor: pointer;
44
+            }
45
+        }
46
+    }
7
 
47
 
8
-        position:absolute;
9
-        text-align:right;
48
+    &__videos {
49
+        @extend %align-right;
50
+        position:relative;
10
         height:196px;
51
         height:196px;
11
-        padding: 10px 10px 17px 5px;
52
+        padding: 0;
12
         bottom: 0;
53
         bottom: 0;
13
-        right: 0;
14
         width:auto;
54
         width:auto;
15
         border: 2px solid transparent;
55
         border: 2px solid transparent;
16
         z-index: 5;
56
         z-index: 5;
69
             }
109
             }
70
         }
110
         }
71
     }
111
     }
72
-}
73
-
74
-.filmstripToolbar + #remoteVideos {
75
-    padding-right: 24px;
76
 }
112
 }

+ 0
- 31
css/_videolayout_default.scss View File

531
 
531
 
532
 .moveToCorner + .moveToCorner {
532
 .moveToCorner + .moveToCorner {
533
     right: 80px;
533
     right: 80px;
534
-}
535
-
536
-.filmstripToolbar {
537
-    width: 20px;
538
-    position: absolute;
539
-    right: 4px;
540
-    bottom: 20px;
541
-    z-index: 6;
542
-
543
-    button {
544
-        font-size: 14px;
545
-        line-height: 1.2;
546
-        text-align: center;
547
-        background: transparent;
548
-        opacity: 0.7;
549
-        height: auto;
550
-        width: 100%;
551
-        padding: 0;
552
-        margin: 0 1px;
553
-        border: none;
554
-
555
-        -webkit-appearance: none;
556
-
557
-        &:hover {
558
-            opacity: 1;
559
-        }
560
-
561
-        i {
562
-            cursor: pointer;
563
-        }
564
-    }
565
 }
534
 }

+ 1
- 1
modules/UI/videolayout/FilmStrip.js View File

39
     _generateFilmStripToolbar() {
39
     _generateFilmStripToolbar() {
40
         let container = document.createElement('div');
40
         let container = document.createElement('div');
41
         let isVisible = this.isFilmStripVisible();
41
         let isVisible = this.isFilmStripVisible();
42
-        container.className = 'filmstripToolbar';
42
+        container.className = 'filmstrip__toolbar';
43
 
43
 
44
         container.innerHTML = `
44
         container.innerHTML = `
45
             <button id="hideVideoToolbar">
45
             <button id="hideVideoToolbar">

Loading…
Cancel
Save