create global scss styles

web/pw-server/src/routes/__layout.svelte

@@ -14,8 +14,8 @@
   <slot />
 </div>
 
-<style lang="scss">
+<style lang="scss" global>
-  @import "src/styles/variables.scss";
+  @import "src/styles/global.scss";
 
   .outer-container {
     width: 100vw;

web/pw-server/src/routes/bots/[bot_name].svelte

@@ -97,7 +97,7 @@
     <MatchList {matches} />
     {#if matches.length > 0}
       <div class="btn-container">
-        <a class="btn-view-more" href={`/matches?bot=${bot["name"]}`}>All matches</a>
+        <a class="btn" href={`/matches?bot=${bot["name"]}`}>All matches</a>
       </div>
     {/if}
   </div>
@@ -118,7 +118,6 @@
 </div>
 
 <style lang="scss">
-  @import "src/styles/variables.scss";
   .container {
     width: 800px;
     max-width: 80%;
@@ -151,14 +150,6 @@
     padding: 24px;
     text-align: center;
   }
-  .btn-view-more {
-    color: $btn-text-color;
-    font-size: 14px;
-    text-decoration: none;
-    padding: 6px 16px;
-    border: 1px solid $btn-border-color;
-    border-radius: 5px;
-  }
 
   .versions {
     margin: 30px 0;

web/pw-server/src/routes/matches/index.svelte

@@ -107,35 +107,10 @@
 </div>
 
 <style lang="scss">
-  @import "src/styles/variables.scss";
   .container {
     width: 800px;
     margin: 0 auto;
   }
-  .btn {
-    color: $btn-text-color;
-    font-size: 14px;
-    text-decoration: none;
-    padding: 6px 16px;
-    border: 1px solid $btn-border-color;
-    border-radius: 5px;
-  }
-
-  .btn-group {
-    display: flex;
-  }
-
-  .btn-group .btn:not(:last-child) {
-    border-right: none;
-  }
-
-  .btn-group .btn:first-child {
-    border-radius: 5px 0 0 5px;
-  }
-
-  .btn-group .btn:last-child {
-    border-radius: 0 5px 5px 0;
-  }
 
   .page-controls {
     display: flex;

web/pw-server/src/styles/buttons.scss

@@ -0,0 +1,27 @@
+$btn-text-color: rgb(9, 105, 218);
+$btn-border-color: rgba(27, 31, 36, 0.25);
+
+.btn {
+  color: $btn-text-color;
+  font-size: 14px;
+  text-decoration: none;
+  padding: 6px 16px;
+  border: 1px solid $btn-border-color;
+  border-radius: 5px;
+}
+
+.btn-group {
+  display: flex;
+}
+
+.btn-group .btn:not(:last-child) {
+  border-right: none;
+}
+
+.btn-group .btn:first-child {
+  border-radius: 5px 0 0 5px;
+}
+
+.btn-group .btn:last-child {
+  border-radius: 0 5px 5px 0;
+}

web/pw-server/src/styles/global.scss

@@ -0,0 +1,2 @@
+@forward "./variables.scss";
+@forward "./buttons.scss";

web/pw-server/src/styles/variables.scss

@@ -1,4 +1 @@
 $bg-color: rgb(41, 41, 41);
-
-$btn-text-color: rgb(9, 105, 218);
-$btn-border-color: rgba(27, 31, 36, 0.25);