Flashcards changes

1 files changed, 42 insertions, 19 deletions

diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 093b9c004..f3dc0f68c 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -5,6 +5,7 @@
     width: 100%;
     height: 100%;
     position: relative;
+    background: gray;
     z-index: 0;
     pointer-events: none;
     display: flex;
@@ -28,6 +29,7 @@
         padding-left: 5px;
         padding-right: 5px;
         width: 100%;
+        border-radius: 2px;
         height: 15%;
         display: flex;
 
@@ -39,8 +41,12 @@
     textarea {
         flex: 1;
         padding: 10px;
-        position: relative;
+        // position: relative;
         resize: none;
+        position: 'absolute';
+        width: '91%';
+        height: '80%';
+        z-index: '-1';
     }
 
     .clip-div {
@@ -119,6 +125,23 @@
             opacity: 0.5;
         }
     }
+
+    .loading-spinner {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 90%;
+        width: 93%;
+        font-size: 20px;
+        font-weight: bold;
+        color: #0b0a0a;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
 }
 
 .comparisonBox-interactive {
@@ -131,7 +154,7 @@
         }
     }
     // .input-box {
-    //     position: relative;
+    //     position: absolute;
     //     padding: 10px;
     // }
     // input[type='text'] {
@@ -219,23 +242,23 @@
             }
         }
 
-        .loading-circle {
-            position: relative;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: 3px solid #ccc;
-            border-top-color: #333;
-            animation: spin 1s infinite linear;
-        }
+        // .loading-circle {
+        //     position: relative;
+        //     width: 50px;
+        //     height: 50px;
+        //     border-radius: 50%;
+        //     border: 3px solid #ccc;
+        //     border-top-color: #333;
+        //     animation: spin 1s infinite linear;
+        // }
 
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
+        // @keyframes spin {
+        //     0% {
+        //         transform: rotate(0deg);
+        //     }
+        //     100% {
+        //         transform: rotate(360deg);
+        //     }
+        // }
     }
 }