From 9c2dcddcbec44c613550f1d0c24339c253e39937 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 16 Apr 2022 18:37:40 -0500
Subject: [PATCH] Updated some modifiers CSS

---
 public/index.html                   |  2 +-
 src/components/common/modifiers.css |  4 ++++
 src/features/tabs/TabFamily.vue     | 10 ++++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 47e896d..364db67 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,7 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
 		<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Kalam&display=swap" rel="stylesheet">
-		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
 
 		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
diff --git a/src/components/common/modifiers.css b/src/components/common/modifiers.css
index 646d0c0..fe8071e 100644
--- a/src/components/common/modifiers.css
+++ b/src/components/common/modifiers.css
@@ -2,6 +2,10 @@
     display: flex;
 }
 
+.modifier-container:nth-child(2n) {
+    background: var(--raised-background);
+}
+
 .modifier-amount {
     flex-basis: 100px;
     flex-shrink: 0;
diff --git a/src/features/tabs/TabFamily.vue b/src/features/tabs/TabFamily.vue
index 5a44cbf..72ccd8b 100644
--- a/src/features/tabs/TabFamily.vue
+++ b/src/features/tabs/TabFamily.vue
@@ -150,10 +150,20 @@ export default defineComponent({
     height: calc(100% + 50px);
 }
 
+.modal-body > .tab-family-container:first-child {
+    margin: calc(10px + var(--feature-margin)) 10px 0 10px;
+    border: none;
+}
+
 .tab-family-container > :nth-child(2) {
     margin-top: 20px;
 }
 
+.modal-body > .tab-family-container > :nth-child(2) {
+    /* TODO Why does it need this instead of 20px? */
+    margin-top: 50px;
+}
+
 .tab-family-container[data-v-f18896fc] > :last-child {
     margin-bottom: 20px;
 }