Merge #46: Css cleanup

798b324 mobile menu icons changed to font awesome (Daniel Petersen) e5ea636 copy button rows styling cleaned up (Daniel Petersen) 2c4ee57 navbar mobile menu added (Daniel Petersen) e8565f0 unused css removed, css restructured (Daniel Petersen) 532f509 font backup (monospace) added to textarea for offline use (Daniel Petersen) Pull request description: Old css removed, mobile styling added ACKs for top commit: uncomputable: ACK 798b324 Tree-SHA512: 3865cd8081073bc5f398167a2f4884fe84733ec15642d51c997ac5f86192afdd56b8fcc58a7e17b0cf077c92e5bd42a6b34a023f773e5f1e9506139799d56d63
uncomputable · Nov 20, 2024 · 4081252 · 4081252
2 parents 1dea701 + 798b324
commit 4081252
Show file tree

Hide file tree

Showing 12 changed files with 332 additions and 669 deletions.
diff --git a/src/assets/style/button_effects.scss b/src/assets/style/button_effects.scss
diff --git a/src/assets/style/components/navbar.scss b/src/assets/style/components/navbar.scss
@@ -29,21 +29,32 @@
         }
     }
 
+    @keyframes run-button-success {
+        0%, 100% { background-color: initial; }
+        50% { background-color: MediumSeaGreen; }
+    }
+
+    @keyframes run-button-failure {
+        0%, 100% { background-color: initial; }
+        50% { background-color: red; }
+    }
+
     .run-button{
         background: #b26e0f;
         margin-right: 2px;
-    }
-
-    .share-button{
 
+        &.success {
+            animation-name: run-button-success;
+            animation-duration: 0.5s;
+        }
+
+        &.failure {
+            animation-name: run-button-failure;
+            animation-duration: 0.5s;
+        }
     }
 
     .dropdown {
-
-        .dropdown-button {
-
-        }
-
         .dropdown-content {
             display: none; // Hide dropdown by default
             position: absolute;
@@ -84,17 +95,66 @@
         }
     }
 
-    .beta-tag{
-        color: #ea9606;
+    .hamburger{
+        display: none;
         position: absolute;
-        right:40px;
-        top: 20px;
+        top: 10px;
+        right: 10px;
+
+        &:before{
+            font-size: 34px;
+        }
+
+        @media screen and (max-width: 1000px) {
+            display: inline-block;
+        }
     }
-}
 
-.tab-content{
-    padding: 10px;
-    background: #1d2127;
-    margin-bottom: 20px;
-    min-height: 470px;
+    .hamburger-close{
+        display: none;
+        position: absolute;
+        top: 10px;
+        right: 14px;
+
+        &:before{
+            font-size: 34px;
+        }
+
+        @media screen and (max-width: 1000px) {
+            display: inline-block;
+        }
+    }
+
+    .mobile-hidden{
+        .beta-tag{
+            color: #ea9606;
+            position: absolute;
+            right:40px;
+            top: 20px;
+        }
+
+        @media screen and (max-width: 1000px) {
+
+            display: none;
+            flex-direction: column;
+            position: absolute;
+            top: 55px;
+            right: 10px;
+            z-index: 2;
+            background: #0d0e10;
+
+            &.open{
+                display: flex;
+            }
+
+            button{
+                width: 100%;
+            }
+
+            .beta-tag{
+                display: none;
+            }
+        }
+    }
 }
+