Move multimodal leaderboard to main page

css/styles.css

@@ -173,47 +173,63 @@ code {
 button {
   cursor: pointer;
   outline: none;
-    &.outline {
-      font-size: 16pt;
-      height: 2em;
-      width: 7em;
-      position: relative;
-      background: transparent;
-      border: 0px;
-      border-radius: 0.5em;
-      padding: 0em 0em;
-      margin: 0.2em 0.5em;
-      transition: all 0.2s linear;
-      color: var(--accent_color);
-      background-color: white;
-
-      &.multimodal {
-        color: var(--slate_gray);
-      }
-      &.mmteaser {
-        border: 1px;
-        border-radius: 0.5em;
-        background-color: var(--slate_gray);
-        color: white;
-        transition: all 0.3s ease;
-        box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.3);
-      }
+
+  &.outline {
+    font-size: 16pt;
+    height: 2em;
+    width: 7em;
+    position: relative;
+    background: transparent;
+    border: 0px;
+    border-radius: 0.5em;
+    padding: 0em 0em;
+    margin: 0.2em 0.5em;
+    transition: background-color 0.1s linear, color 0.1s linear;
+    color: var(--accent_color);
+    background-color: white;
+    &.multimodal {
+      color: var(--slate_gray);
     }
-    &.outline:hover {
-      color: wheat;
-      border-color: wheat;
-      transition: all 0.2s linear;
+    &.teaser {
+      border: 1px solid transparent; /* Specify border style */
+      border-radius: 0.5em;
+      transition: box-shadow 1s ease, border-color 1s ease;
+      box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.3);
     }
-    &.outline.mmteaser:hover {
-      color: var(--slate_gray);
-      background: 
+  }
+  &.outline:hover {
+    color: wheat;
+    border-color: wheat;
+  }
+  &.outline.teaser.swebm {
+    background-color: var(--slate_gray);
+    color: white;
+  }
+  &.outline.teaser.swebm:hover {
+    color: var(--slate_gray);
+    background: 
       radial-gradient(circle at 10% 30%, rgba(255, 99, 71, 1), transparent 40%),
       radial-gradient(circle at 30% 70%, rgba(0, 255, 127, 1), transparent 40%),
       radial-gradient(circle at 50% 30%, rgba(70, 130, 180, 1), transparent 40%),
       radial-gradient(circle at 70% 70%, rgba(255, 165, 0, 1), transparent 40%),
       radial-gradient(circle at 80% 30%, rgba(138, 43, 226, 1), transparent 40%);
-      transform: scale(1.05);
-    }
+    transform: scale(1.05);
+  }
+  &.outline.teaser.swebv {
+    background-color: black;
+    color: white;
+  }
+  &.outline.teaser.swebv:hover {
+    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.7));
+    transform: scale(1.05);
+  }
+  &.outline.teaser.swebl {
+    background-color: var(--dark_accent_color);
+    color: white;
+  }
+  &.outline.teaser.swebl:hover {
+    transform: scale(1.05);
+  }
 }
 
 /* MARK: Styling for tab-style table  */