Add more UI effects, fixes w/ user-select, other tweaks.

src/App.css

@@ -263,7 +263,7 @@ svg.disabled {
 }
 
 .react-contextmenu--visible {
-  background-color: var(--background);
+  background-color: var(--input-background);
   padding: 14px 22px;
   border-radius: 6px;
   z-index: 99;

src/components/UI/Sidebar/components/SidebarUtils/index.css

@@ -19,12 +19,12 @@
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s;
-  background: var(--background-light);
+  background: var(--dropdown-background);
 }
 
 .SidebarUtils__dropdown:hover,
 .SidebarUtils__dropdown:focus-within {
-  background: var(--background-light);
+  background: var(--dropdown-background);
 }
 
 .SidebarUtils__dropdown:hover .SidebarUtils__dropdownPopup,

src/components/UI/ToggleSwitch/index.css

@@ -69,7 +69,7 @@
   padding-inline-start: 0.5px;
   padding-block-end: 0.5px;
   bottom: 2.5px;
-  border: solid var(--background);
+  border: solid var(--body-background);
   border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);

src/components/UI/WebviewControls/index.css

@@ -7,6 +7,7 @@
   padding: 0 4px;
   border-bottom: 1px solid var(--accent);
   background: var(--background-darker);
+  user-select: text;
 }
 
 .WebviewControls__icons {

src/index.css

@@ -2,43 +2,27 @@ html {
   /* Colours */
   --navbar-background: #151f3d;
   --input-background: #0d0f1c;
-  /* --- NOTE please try avoid using the bg colours below (to ENDNOTE) --- */
-  --background-transparent: #151f3dcb;
-  --background: #151f3d;
-  --background-transparent-62: rgba(66, 69, 70, 0.62);
-  --background-darker: #0d0f1c;
-  --background-darker-80: #0d0f1ce0;
-  --background-secondary: #323035;
-  --background-gradient: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.418) 2.4%,
-    #0d0f1cd2 64%
-  );
-  --background-light: #1a264b;
-  --background-color: #13172a;
-  --background-shadow: linear-gradient(
-    90deg,
-    var(--background-darker) -32px,
-    var(--background-color) 64px,
-    var(--background-color) 100%
-  );
-  /* --- ENDNOTE --- */
+  --body-background: #13172a;
   --tooltip-background-color: #0d0e0e;
+  --dropdown-background: #1a264b;
   --menu-background-color: #0d0e0e;
+  --modal-backdrop: #00000048;
   --text-hover: #59d0ea;
   --link-highlight: #07c5ef;
   --accent: #eaa114;
   --input-background: #0d0f1c;
+  --login-card-background: #0e1527ee;
   --play-button: #59d0ea;
   --download-button: #3082d9;
   --download-button-overlay: #5a5e5f;
   --stop-button: #252121;
+  --scrollbar-thumb: #ffffff33;
   --favourite-active: #97f4e9;
   --favourite-inactive: #eae8e5;
   --danger: #bd0a0a; /* These success, danger and disabled colours need to be documented */
   --success: #0bd58c;
   --success-hover: #30eca8;
-  --danger-hover: #bd0a0a;
+  --danger-hover: #e43f3f;
   --icon-disabled: #625e69;
   /* Gradients */
   --gradient-welcome: linear-gradient(#13172a 100%, #13172a 89%, #13172a 0%);
@@ -47,6 +31,11 @@ html {
     #1d1f1f 31.77%,
     #1d1f1f 0%
   );
+  --gradient-gamecard: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.418) 2.4%,
+    #0d0f1cd2 64%
+  );
   --gradient-game-hover: linear-gradient(#000000 30.8%, #141515 77%);
   /* Text colours */
   --text-default: #eae8e5;
@@ -68,6 +57,9 @@ html {
   --sidebar-width: 218px;
   --content-width: calc(100vw - var(--sidebar-width));
   overflow-y: overlay;
+  /* Effects */
+  --blur-light: 4px;
+  --blur-strong: 16px;
 }
 
 body {
@@ -78,7 +70,7 @@ body {
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--background-color);
+  background-color: var(--body-background);
   user-select: none;
 }
 

src/screens/Game/GamePage/index.css

@@ -28,13 +28,13 @@
 }
 
 .gameInfo {
-  cursor: default;
   text-align: initial;
   font-size: 1rem;
   color: var(--text-default);
   display: flex;
   flex-direction: column;
   max-width: 650px;
+  user-select: text;
 }
 
 .gameInfo .title {

src/screens/Game/GameRequirements/index.css

@@ -1,5 +1,6 @@
 .gameRequirements {
   flex-direction: column;
+  user-select: text;
 }
 .gameRequirements table td {
   width: 40%;

src/screens/Library/components/GameCard/index.css

@@ -1,14 +1,15 @@
 .gameCard {
-  background-color: var(--background-darker);
+  background-color: var(--gradient-gamecard);
   text-align: left;
   width: clamp(130px, 8vw, 200px);
   height: 10vw;
   max-height: 266px;
   min-height: 173px;
   overflow: hidden;
   position: relative;
-  border-radius: 0.5rem;
+  border-radius: 0.8rem;
   transition-duration: 0.5s;
+  box-shadow: 0px 0px 12px 4px #00000055;
 }
 
 .gameCard:focus-within {
@@ -46,7 +47,7 @@
   max-width: 96px;
   word-wrap: break-word;
   padding: 2px;
-  background: var(--background-gradient);
+  background: var(--gradient-gamecard);
   border-radius: 4px;
 }
 .gameCard > .progress svg {
@@ -85,7 +86,7 @@
   padding: 0.3vw;
   color: var(--text-secondary);
   display: flex;
-  background: var(--background-gradient);
+  background: var(--gradient-gamecard);
   transition: 200ms;
   font-family: Cabin;
   font-size: 14px;
@@ -96,7 +97,7 @@
   cursor: pointer;
   z-index: 3;
   pointer-events: none;
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(var(--blur-light));
 }
 
 .gameCard > .icons {

src/screens/Library/components/InstallModal/index.css

@@ -12,7 +12,7 @@
   display: grid;
   place-items: center;
   position: fixed;
-  background: var(--background-darker-80);
+  background: var(--modal-backdrop);
   width: 100%;
   height: 100%;
   z-index: 6;
@@ -23,15 +23,15 @@
   display: grid;
   place-items: center;
   min-width: fit-content;
-  background: var(--background-darker);
+  background: var(--body-background);
   border-radius: 10px;
   width: 48vw;
   max-width: 560px;
   z-index: 7;
   padding: 32px;
   height: fit-content;
   min-height: 225px;
-  border: solid 1px var(--background);
+  border: solid 1px var(--body-background);
   overflow: auto;
   max-height: 100vh;
 }

src/screens/Login/components/Runner/index.css

@@ -1,12 +1,13 @@
 .runnerWrapper {
-  background-color: var(--background-darker-80);
+  background-color: var(--login-card-background);
   padding: 20px;
   border-radius: 15px;
   min-width: min(500px, 30%);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  backdrop-filter: blur(10px);
+  height: 300px;
+  backdrop-filter: blur(var(--blur-light));
 }
 
 .runnerWrapper > h1 {
@@ -16,32 +17,29 @@
 .runnerLogin {
   padding: 10px;
   font-size: 25px;
-  border-radius: 15px;
-  background-color: var(--background-secondary);
   border: none;
-  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
-  transition: 0.3s;
-}
-
-.logged {
-  color: var(--danger);
-  cursor: pointer;
-}
-
-.logged:hover {
-  background-color: var(--danger-hover);
-  color: var(--text-secondary);
+  transition: 0.2s;
 }
 
 .runnerLogin.alternative {
   margin-top: 20px;
   cursor: pointer;
   color: var(--text-secondary);
 }
+
 .runnerLogin:hover {
   color: var(--text-hover);
 }
 
+.logged {
+  color: var(--danger);
+  cursor: pointer;
+}
+
+.logged:hover {
+  color: var(--danger-hover);
+}
+
 .runnerWrapper img,
 .runnerWrapper svg {
   width: 100px;

src/screens/Login/index.css

@@ -38,27 +38,26 @@
   position: relative;
   font-family: var(--font-primary-bold);
   top: 10%;
-  background-color: var(--background-secondary);
   color: var(--text-default);
+  background-color: var(--login-card-background);
   border: none;
   font-size: 24px;
   padding: 15px;
   border-radius: 10px;
   cursor: pointer;
-  transition: 0.3s;
-  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
+  transition: 0.2s;
   width: fit-content;
+  backdrop-filter: blur(var(--blur-light));
 }
 
 .continueLogin:hover {
-  color: var(--text-tertiary);
-  background-color: var(--link-highlight);
+  color: var(--text-hover);
 }
 
 .continueLogin.disabled {
-  color: var(--text-secondary);
-  opacity: 0.8;
   cursor: default;
+  color: var(--text-default);
+  display: none;
 }
 
 .language-login {

src/screens/Settings/components/LogSettings/index.css

@@ -27,6 +27,7 @@
   height: 25em;
   width: 622px;
   overflow: auto;
+  user-select: text;
 }
 
 .log-error,