From a7579301e61c1a961896ce82a8bbed4bf7d8de06 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Wed, 19 Jun 2024 13:32:53 +0200
Subject: [PATCH] fix: chrome fixes

---
 assets/css/global.css                  | 19 +++++++++++++++++++
 components/navigation/DropDownLink.vue |  7 ++++++-
 layouts/default.vue                    |  3 +--
 pages/index.vue                        | 10 ++++++++--
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/assets/css/global.css b/assets/css/global.css
index f25419a..e990cc1 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -41,4 +41,23 @@ body {
     min-height: 100vh;
 
     margin: 0;
+}
+
+/* improve scrollbar on chrome... */
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
\ No newline at end of file
diff --git a/components/navigation/DropDownLink.vue b/components/navigation/DropDownLink.vue
index f21de11..6ddbe25 100644
--- a/components/navigation/DropDownLink.vue
+++ b/components/navigation/DropDownLink.vue
@@ -39,11 +39,16 @@ watch(currentUrl, (url) => {
   }
 
   select {
-    background-color: transparent;
+    background-color: var(--surface-100) ;
     border: none;
     border-radius: 7px;
 
     padding: 0 0 5px;
+
+    option {
+      color: unset;
+      background-color: var(--surface-100);
+    }
   }
 
   a {
diff --git a/layouts/default.vue b/layouts/default.vue
index 071cec5..f7005fa 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -84,7 +84,7 @@ const modpackCountUrls = [
 
     gap: 10px;
 
-    overflow: scroll;
+    overflow: auto;
 
     #header {
       font-weight: bold;
@@ -115,7 +115,6 @@ const modpackCountUrls = [
 
     a {
       text-decoration: none;
-      transition: 0.2s color ease-out;
 
       &:hover {
         color: var(--primary-600);
diff --git a/pages/index.vue b/pages/index.vue
index 37aaeb9..73a52c2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,7 +13,7 @@ const {data} = useModrinthFetch<statistics>("/statistics");
   <div id="page">
     <div id="header">
       The place for Stats all about
-      <NuxtLink to="https://modrinth.com" id="modrinth">Modrinth</NuxtLink>
+      <NuxtLink to="https://modrinth.com" id="modrinth" target="_blank">Modrinth</NuxtLink>
       <div id="unofficial">(unofficial)</div>
     </div>
     <div id="values">
@@ -79,8 +79,14 @@ const {data} = useModrinthFetch<statistics>("/statistics");
     font-size: 4rem;
     font-weight: bold;
 
+    display: flex;
+    flex-direction: column;
+
+    justify-content: center;
+    align-items: center;
+
     #modrinth {
-      display: block;
+      display: inline-block;
       font-size: 5rem;
 
       color: transparent;
-- 
2.51.2