merged with master + cleanup of carousel code

1 files changed, 36 insertions, 10 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss
index b402a7a32..c40f471d6 100644
--- a/src/client/views/collections/CollectionCarouselView.scss
+++ b/src/client/views/collections/CollectionCarouselView.scss
@@ -23,6 +23,21 @@
     }
 }
 
+.collectionCarouselView-addFlashcards {
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+}
+.collectionCarouselView-recentlyMissed {
+    color: red;
+    z-index: 999;
+    position: relative;
+    left: 10px;
+    top: 10px;
+    pointer-events: none;
+}
 .carouselView-back,
 .carouselView-fwd,
 .carouselView-star,
@@ -68,41 +83,52 @@
     right: 52%;
 }
 .carouselView-quiz {
-    position: absolute;
+    position: relative;
     display: flex;
-    top: 5px;
-    right: 8px;
+    flex-direction: column;
+    height: 20px;
+    align-items: center;
+    margin: auto;
     &:hover {
         color: white;
     }
 }
 
 .carouselView-practice {
-    position: absolute;
+    position: relative;
     display: flex;
-    top: 22px;
-    right: 8px;
+    flex-direction: column;
+    height: 20px;
+    align-items: center;
+    margin: auto;
     &:hover {
         color: white;
     }
 }
 .carouselView-starFilter {
-    position: absolute;
+    position: relative;
     display: flex;
-    top: 40px;
-    right: 7px;
+    height: 20px;
+    align-items: center;
     &:hover {
         color: white;
     }
 }
 
+.carouselView-practiceModes {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    flex-direction: column;
+}
 .carouselView-menu {
     position: absolute;
+    flex-direction: column;
+    align-items: center;
     display: flex;
     top: 2px;
     right: 2px;
     width: 30;
-    height: 60;
     border-radius: 5px;
     color: rgba(255, 255, 255, 0.5);
     background: rgba(0, 0, 0, 0.1);