Style update

Server/Components/Pages/GamePage.razor

@@ -32,6 +32,8 @@
 
 <link rel="icon" type="image/png" href="assets/favicon.png" />
 
+<link rel="icon" type="image/png" href="assets/favicon.png"/>
+
 <div id="container">
     <div class="leftPanel borderPanel">
         <div class="stats">

Server/Components/Pages/Home.razor

@@ -53,14 +53,126 @@
 
 
 </div>
+<div id="particles-js" class="particles-js" >
+    <canvas class="particles-js-canvas-el " ></canvas>
+</div>
 
+<script src="scripts/particles.js-master/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>
 
 
 <script>
-
+    particlesJS("particles-js", {
+        particles: {
+            number: {
+                value: 50,
+                density: {
+                    enable: true,
+                    value_area: 800
+                }
+            },
+            color: {
+                value: '#fcff00'
+            },
+            shape: {
+                type: 'circle',
+                stroke: {
+                    width: 0,
+                    color: '#ffde23'
+                },
+                polygon: {
+                    nb_sides: 5
+                },
+                image: {
+                    src: '',
+                    width: 10,
+                    height: 10
+                }
+            },
+            opacity: {
+                value: 1,
+                random: false,
+                anim: {
+                    enable: false,
+                    speed: 100,
+                    opacity_min: 0,
+                    sync: false
+                }
+            },
+            size: {
+                value: 4,
+                random: false,
+                anim: {
+                    enable: true,
+                    speed: 5,
+                    size_min: 0,
+                    sync: false
+                }
+            },
+            line_linked: {
+                enable: false,
+                distance: 100,
+                color: '#fff',
+                opacity: 1,
+                width: 1
+            },
+            move: {
+                enable: true,
+                speed: 2,
+                direction: 'none',
+                random: false,
+                straight: false,
+                out_mode: 'out',
+                bounce: false,
+                attract: {
+                    enable: false,
+                    rotateX: 3000,
+                    rotateY: 3000
+                }
+            },
+            array: []
+        },
+        interactivity: {
+            detect_on: 'canvas',
+            events: {
+                onhover: {
+                    enable: true,
+                    mode: 'push'
+                },
+                onclick: {
+                    enable: false,
+                    mode: 'push'
+                },
+                resize: true
+            },
+            modes: {
+                grab: {
+                    distance: 100,
+                    line_linked: {
+                        opacity: 1
+                    }
+                },
+                bubble: {
+                    distance: 500,
+                    size: 80,
+                    duration: 0.4
+                },
+                repulse: {
+                    distance: 200,
+                    duration: 0.4
+                },
+                push: {
+                    particles_nb: 4
+                },
+                remove: {
+                    particles_nb: 2
+                }
+            },
+            mouse: {}
+        },
+        retina_detect: false,
+    });
 </script>
 
-
 @code {
     private async Task Enter(KeyboardEventArgs e)
     {

Server/Components/Popups/EquipmentPopup.razor

@@ -11,7 +11,7 @@
 
 
 
-<div class="row">
+<div class="eqContainer">
     <div class="buttonEquipBg">
         <button class="buttonEquip" @onclick="GenerateNewItem">Generate new item </button>
     </div>

Server/Components/UI/ItemCard.razor

@@ -1,8 +1,6 @@
 @using Fracture.Server.Modules.Items.Models
 @using Fracture.Server.EnumExtensions
-
-<div class="col">
-    <div class="card">
+    <div class="card" >
         <div class="card-header">
             <div class="item-name">@Item.Type.ToString()</div>
             @if (IsEquipped)
@@ -39,7 +37,7 @@
             </div>
         </div>
     </div>
-</div>
+
 <div class="collapse">
     @foreach (var item in messages)
     {
@@ -52,8 +50,8 @@
     private readonly Guid guid = Guid.NewGuid();
 
     List<string> messages = new List<string>();
     private async Task ShowItemHistoryAsync() { } //await collapse1.ShowAsync();
     private async Task HideItemHistoryAsync() { } //await collapse1.HideAsync();
     [Parameter] public Item Item { get; set; } = null!;
     [Parameter] public bool IsEquipped { get; set; }
     [Parameter] public bool ItemHistory { get; set; }

Server/wwwroot/css/game.css

@@ -120,22 +120,6 @@ body {
     border-radius: 5px;
 }
 
-.logButton{
-    background-color: rgba(25, 25, 25,1);
-    width: 12rem;
-    height: 2.5rem;
-    margin: 5px;
-    border-radius: 10px;
-    position: relative;
-    margin-top: 30px;
-    cursor: pointer;
-    /*padding-top: 5px;*/
-    line-height: 150px;
-    text-transform: uppercase;
-    line-height: 2.5rem;
-    color: white;
-    font-weight: bold;
-}
 
 .settingsBtn {
     background-color: rgba(25, 25, 25,1);
@@ -266,7 +250,7 @@ body {
     text-align: justify;
     scrollbar-color: rgb(0, 0, 0) rgba(0,0,0,0);
     scrollbar-width: auto;
-    scrollbar-arrow-color: black;
+    scrollbar-areqContainer-color: black;
     scroll-snap-type: y mandatory;
     scroll-behavior: smooth;
     box-shadow: 0px 0px 10px #000;
@@ -375,7 +359,7 @@ body {
 
 .equipmentTable {
     border: #000 3px solid;
-    border-collapse: collapse;
+    /*border-collapse: collapse;*/
     box-shadow: 0px 0px 10px #000;
 }
 
@@ -385,26 +369,24 @@ body {
     margin-right: 5px;
     width: 100px;
     height: 100px;
-    background-color: rgba(0,0,25,0.7);
-
+    background-color: rgba(0,0,25,0.6);
+    transition: ease-in-out 0.15s;
 }
 
     .equipmentTable tr td:hover {
         background-color: rgba(0,0,25,0.7);
+        border: #404040 3px solid;
     }
-.row{
+.eqContainer{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 95%;
     height: 98%;
-
-
-
 }
 
-.row div {
+.eqContainer div {
     display: flex;
     justify-content: space-between;
 
@@ -427,13 +409,13 @@ body {
 .equipmentContent {
     display: flex;
     flex-direction: column;
-    backdrop-filter: blur(1px);
+    /*backdrop-filter: blur(1px);*/
     width: 100%;
     height: 100%;
 }
 .itemButton{
-    height: 4rem;
-    width: 4.5rem;
+    height:6vh;
+    width: 5vw;
     font-size: 0.8rem;
 
 }
@@ -442,12 +424,11 @@ body {
     text-align: justify;
     scrollbar-color: rgb(0, 0, 0) rgba(0,0,0,0);
     scrollbar-width: auto;
-    scrollbar-arrow-color: black;
+    scrollbar-areqContainer-color: black;
     /*scroll-snap-type: y mandatory;*/
     scroll-behavior: smooth;
     display: flex;
     flex-direction: row;
-    align-items: center;
     justify-content: space-evenly;
     height: 60%;
 
@@ -456,31 +437,35 @@ body {
 
 
 .card{
-
-    /*height: 200px;*/
-    width: 200px;
+    height: 34vh;
+    width: 14vw;
     display: flex;
     flex-direction: column;
     text-align: center;
 }
 .card-header,.card-body, .item-card{
-    margin-top: 10px;
+    /*margin-top: 10px;*/
     padding: 5px;
     border-radius: 10px;
-    height: 150px;
-    width: 150px; 
+    height: 16vh;
+    width: 14vw;
     text-align: center;
 }
 .card-header{
     display: flex;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.card-body, .item-card{
+    /*margin-top: 5px;*/
 }
 .card-body{
 
 }
 .item-card{
-    height: 100px;
-    width: 150px;
+    height: 10vh;
+    width: 12vw;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -569,7 +554,7 @@ body {
     --rarity-epic: #b423f7;
     --rarity-legendary: gold;
     --popup-padding: 10px;
-    --row-padding: 5px;
+    --eqContainer-padding: 5px;
 }
 h3{
     width: 70%;