Browse Source

Updated calculation of offset

master
Ilya Daynatovich 8 years ago
parent
commit
1d1d8defda
3 changed files with 11 additions and 6 deletions
  1. 5
    5
      css/_filmstrip.scss
  2. 2
    1
      css/_toastr.scss
  3. 4
    0
      css/_variables.scss

+ 5
- 5
css/_filmstrip.scss View File

18
         flex-wrap: nowrap;
18
         flex-wrap: nowrap;
19
         position: relative;
19
         position: relative;
20
         z-index: 1;                     // Set z-index to make element visible
20
         z-index: 1;                     // Set z-index to make element visible
21
-        width: 17px;
21
+        width: $hideFilmstripButtonWidth;
22
 
22
 
23
         button {
23
         button {
24
             font-size: 14px;
24
             font-size: 14px;
53
         padding-left: 17px;
53
         padding-left: 17px;
54
         bottom: 0;
54
         bottom: 0;
55
         width:auto;
55
         width:auto;
56
-        border: 2px solid transparent;
56
+        border: $thumbnailsBorder solid transparent;
57
         z-index: 5;
57
         z-index: 5;
58
         transition: bottom 2s;
58
         transition: bottom 2s;
59
         overflow: visible !important;
59
         overflow: visible !important;
67
             display: none;
67
             display: none;
68
             position: relative;
68
             position: relative;
69
             background-size: contain;
69
             background-size: contain;
70
-            border: 2px solid transparent;
70
+            border: $thumbnailVideoBorder solid transparent;
71
             border-radius:1px;
71
             border-radius:1px;
72
             margin: 0 $thumbnailVideoMargin;
72
             margin: 0 $thumbnailVideoMargin;
73
 
73
 
84
                 -webkit-animation-name: greyPulse;
84
                 -webkit-animation-name: greyPulse;
85
                 -webkit-animation-duration: 2s;
85
                 -webkit-animation-duration: 2s;
86
                 -webkit-animation-iteration-count: 1;
86
                 -webkit-animation-iteration-count: 1;
87
-                border: 2px solid $videoThumbnailSelected !important;
87
+                border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
88
                 box-shadow: inset 0 0 3px $videoThumbnailSelected,
88
                 box-shadow: inset 0 0 3px $videoThumbnailSelected,
89
                 0 0 3px $videoThumbnailSelected !important;
89
                 0 0 3px $videoThumbnailSelected !important;
90
             }
90
             }
98
             */
98
             */
99
             &:hover {
99
             &:hover {
100
                 cursor: hand;
100
                 cursor: hand;
101
-                border: 2px solid $videoThumbnailHovered;
101
+                border: $thumbnailVideoBorder solid $videoThumbnailHovered;
102
                 box-shadow: inset 0 0 3px $videoThumbnailHovered,
102
                 box-shadow: inset 0 0 3px $videoThumbnailHovered,
103
                 0 0 3px $videoThumbnailHovered;
103
                 0 0 3px $videoThumbnailHovered;
104
 
104
 

+ 2
- 1
css/_toastr.scss View File

92
 }
92
 }
93
 
93
 
94
 #toast-container.notification-bottom-right {
94
 #toast-container.notification-bottom-right {
95
+  $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
95
   bottom: 135px;
96
   bottom: 135px;
96
-  right: 28px;
97
+  right: $hideFilmstripButtonWidth + $videoOffset;
97
 }
98
 }
98
 
99
 
99
 #toast-container * {
100
 #toast-container * {

+ 4
- 0
css/_variables.scss View File

17
 $thumbnailIndicatorBorder: 0px;
17
 $thumbnailIndicatorBorder: 0px;
18
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
18
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
19
 $thumbnailVideoMargin: 2px;
19
 $thumbnailVideoMargin: 2px;
20
+$thumbnailsBorder: 2px;
21
+$thumbnailVideoBorder: 2px;
22
+$hideFilmstripButtonWidth: 17px;
23
+
20
 
24
 
21
 /**
25
 /**
22
  * Color variables.
26
  * Color variables.

Loading…
Cancel
Save