Changed units to be more responsive and removed unnecessary properties

.dockerignore

@@ -9,6 +9,3 @@
 !/Cargo.lock
 !/Cargo.toml
 !/ascii_art.txt
-!/flake.nix
-!/flake.lock
-!/rust-toolchain.toml

.gitea/workflows/push.yaml

@@ -73,15 +73,3 @@ jobs:
         with:
           name: docs
           path: target/doc
-
-  nix-build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Update Package Lists
-        run: apt update
-      - name: Install Nix
-        run: apt install -y nix-bin
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Build project with Nix
-        run: nix build --experimental-features 'nix-command flakes' .#default

.gitignore

@@ -31,7 +31,3 @@ playwright/.cache/
 
 # Sass cache
 .sass-cache
-
-# Nix-related files
-.direnv/
-result

flake.lock

@@ -1,114 +0,0 @@
-{
-  "nodes": {
-    "cargo-leptos": {
-      "flake": false,
-      "locked": {
-        "lastModified": 1730677835,
-        "narHash": "sha256-Oe65m9io7ihymUjylaWHQM/x7r0y/xXqD313H3oyjN8=",
-        "owner": "leptos-rs",
-        "repo": "cargo-leptos",
-        "rev": "ff6b19a5f9fd4e433774b6a9c57922ea5a1634cc",
-        "type": "github"
-      },
-      "original": {
-        "owner": "leptos-rs",
-        "ref": "v0.2.21",
-        "repo": "cargo-leptos",
-        "type": "github"
-      }
-    },
-    "flake-utils": {
-      "inputs": {
-        "systems": "systems"
-      },
-      "locked": {
-        "lastModified": 1731533236,
-        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1733940404,
-        "narHash": "sha256-Pj39hSoUA86ZePPF/UXiYHHM7hMIkios8TYG29kQT4g=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "5d67ea6b4b63378b9c13be21e2ec9d1afc921713",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "nixpkgs_2": {
-      "locked": {
-        "lastModified": 1728538411,
-        "narHash": "sha256-f0SBJz1eZ2yOuKUr5CA9BHULGXVSn6miBuUWdTyhUhU=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "b69de56fac8c2b6f8fd27f2eca01dcda8e0a4221",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixpkgs-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "root": {
-      "inputs": {
-        "cargo-leptos": "cargo-leptos",
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs",
-        "rust-overlay": "rust-overlay"
-      }
-    },
-    "rust-overlay": {
-      "inputs": {
-        "nixpkgs": "nixpkgs_2"
-      },
-      "locked": {
-        "lastModified": 1734230139,
-        "narHash": "sha256-zsp0Mz8VgyIAnU8UhP/YT1g+zlsl+NIJTBMAbY+RifQ=",
-        "owner": "oxalica",
-        "repo": "rust-overlay",
-        "rev": "150fbc8aa2bc501041810bbc1dbfe73694a861be",
-        "type": "github"
-      },
-      "original": {
-        "owner": "oxalica",
-        "repo": "rust-overlay",
-        "type": "github"
-      }
-    },
-    "systems": {
-      "locked": {
-        "lastModified": 1681028828,
-        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
-        "owner": "nix-systems",
-        "repo": "default",
-        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "default",
-        "type": "github"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
-}

flake.nix

@@ -1,102 +0,0 @@
-{
-  description = "LibreTunes build and development environment";
-
-  inputs = {
-    nixpkgs.url      = "github:NixOS/nixpkgs/nixos-unstable";
-    rust-overlay.url = "github:oxalica/rust-overlay";
-    flake-utils.url  = "github:numtide/flake-utils";
-    cargo-leptos = {
-      url = "github:leptos-rs/cargo-leptos?ref=v0.2.21";
-      flake = false;
-    };
-  };
-
-  outputs = { self, nixpkgs, rust-overlay, flake-utils, cargo-leptos, ... }:
-    flake-utils.lib.eachDefaultSystem (system:
-      let
-        overlays = [ (import rust-overlay) ];
-        pkgs = import nixpkgs {
-          inherit system overlays;
-        };
-
-        # Build a specific version of cargo-leptos
-        cargo-leptos-build = pkgs.rustPlatform.buildRustPackage {
-          name = "cargo-leptos";
-          buildFeatures = ["no_downloads"];
-          src = cargo-leptos; 
-          cargoHash = "sha256-pcjMMeSltCvYeMFlJs1hYUGIU9fUv50lydudTDCi23M=";
-
-          nativeBuildInputs = with pkgs; [
-            pkg-config
-            openssl
-          ];
-
-          doCheck = false;
-        };
-
-        buildPkgs = with pkgs; [
-          (rust-bin.fromRustupToolchainFile ./rust-toolchain.toml)
-          cargo-leptos-build
-          clang
-          sass
-          openssl
-          postgresql
-          imagemagick
-          pkg-config
-        ];
-      in
-      {
-        devShells.default = pkgs.mkShell {
-          LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
-
-          buildInputs = with pkgs; buildPkgs ++ [
-            diesel-cli
-          ];
-
-          shellHook = ''
-            set -a
-            [[ -f .env ]] && source .env
-            set +a
-          '';
-        };
-
-        packages.default = pkgs.rustPlatform.buildRustPackage {
-          name = "libretunes";
-          src = ./.;
-          
-          cargoLock = {
-            lockFile = ./Cargo.lock;
-          };
-
-          LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
-
-          nativeBuildInputs = with pkgs; buildPkgs ++ [
-            makeWrapper
-          ];
-
-          buildInputs = with pkgs; [
-            openssl
-            imagemagick
-          ];
-
-          # TODO enable --release builds
-          # Creates an issue with cargo-leptos trying to create cache directories
-          # See https://github.com/leptos-rs/cargo-leptos/issues/79
-          buildPhase = ''
-            cargo-leptos build --precompress #--release
-          '';
-
-          installPhase = ''
-            mkdir -p $out/bin
-            install -t $out target/debug/libretunes
-            cp -r target/site $out/site
-
-            makeWrapper $out/libretunes $out/bin/libretunes \
-              --set LEPTOS_SITE_ROOT $out/site
-          '';
-
-          doCheck = false;
-        };
-      }
-    );
-}

rust-toolchain.toml

@@ -1,4 +1,3 @@
+
 [toolchain]
 channel = "nightly"
-targets = ["wasm32-unknown-unknown"]
-

style/login.scss

@@ -8,155 +8,56 @@
   top: 50%;
   left: 50%;
   width: 27rem;
-  height: 31rem;
+  height: 30rem; /* Slightly adjusted height for better layout */
   transform: translate(-50%, -50%);
   background: $auth-containers;
-  z-index: 1;
+  z-index: 10; /* Increased z-index for better stacking context */
-  border-radius: 8px;
+  border-radius: 0.5rem; /* Adjusted unit */
   overflow: hidden;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Added subtle shadow */
 }
 
 .login-container .header h1 {
-  margin-top: 3rem;
+  margin-top: 2.5rem; /* Adjusted margin for alignment */
-  font-size: 2.5rem;
+  font-size: 2.4rem; /* Slightly smaller for consistency */
   color: $accent-color;
-}
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); /* Added slight text shadow */
-.login-container .login-form {
-  width: 75%;
-}
-.login-form .input-box:first-child {
-  margin-top: 1rem;
-}
-.login-form .input-box {
-  position: relative;
-  margin-top: 3rem;
-}
-.login-form .input-box input {
-  position: relative;
-  width: 100%;
-  max-width: 34vw;
-  padding: 17px 0px 10px;
-  background: transparent;
-  outline: none;
-  border: none;
-  box-shadow: none;
-  color: #23242a;
-  font-size: 1.1em;
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  letter-spacing: 0px;
-  text-indent: 10px;
-  vertical-align: middle;
-  z-index: 10;
-  color: #fff;
-}
-.login-form .input-box span {
-  position: absolute;
-  left: 0;
-  padding: 15px 0px 10px;
-  pointer-events: none;
-  color: black;
-  font-size: 1.19em;
-  letter-spacing: 0.5px;
-  transition: 0.5s;
-}
-.login-form .input-box input:valid ~ span,
-.login-form .input-box input:focus ~ span {
-  color: rgb(94, 93, 93);
-  font-size: 0.9rem;
-  transform: translateY(-30px);
-  font-weight: 400;
-}
-.login-form .input-box i {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 2px;
-  background: $auth-inputs;
-  border-radius: 4px;
-  overflow: hidden;
-  transition: 0.5s;
-  pointer-events: none;
 }
 
-.login-form .input-box input:valid ~ i,
+.login-container .login-form {
-.login-form .input-box input:focus ~ i {
+  width: 80%; /* Adjusted width for responsiveness */
-  height: 2.6rem;
 }
-.login-form .forgot-pw {
+
-  display: inline-flex;
+.login-form .input-box {
-  margin-top: 3px;
+  position: relative;
-  font-size: 0.9rem;
+  margin-top: 2.5rem; /* Adjusted spacing */
-  cursor: pointer;
-  color: #8f8f8f;
-  text-decoration: underline;
 }
-.login-form .forgot-pw:hover {
+
-  color: #fff;
+.login-form .input-box input {
-  transition: all 0.2s;
-}
-.login-form .error-msg {
-  color: $error-color;
-  margin-top: 1rem;
-  height: 1rem;
-}
-.login-form .loading {
-  margin-top: 4.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: calc(1.5rem - 10px);
-}
-.login-form input[type="submit"] {
-  margin-top: 3rem;
   width: 100%;
+  padding: 1.1rem 0 0.6rem; /* Adjusted padding */
+  border: 1px solid rgba(255, 255, 255, 0.2); /* Added subtle border */
+  border-radius: 0.3rem; /* Added border radius */
+}
+
+.login-form .input-box span {
+  padding: 0.8rem 0 0.5rem; /* Adjusted padding */
+}
+
+.login-form .input-box i {
+  height: 0.2rem; /* Adjusted height for better visual hierarchy */
+}
+
+.login-form input[type="submit"] {
+  margin-top: 2.5rem; /* Adjusted spacing */
   height: 3rem;
-  border: none;
-  border-radius: 8px;
-  color: rgb(210, 207, 207);
-  cursor: pointer;
-  font-size: 1.1rem;
-  font-weight: 600;
   background-color: $accent-color;
+  border: 1px solid rgba(255, 255, 255, 0.3); /* Added border for consistency */
 }
-.login-form .go-to-signup {
+
-  color: #8f8f8f;
-  font-size: 0.9rem;
-}
-.login-form .go-to-signup a {
-  cursor: pointer;
-  color: #8f8f8f;
-  text-decoration: underline;
-}
-.login-form .go-to-signup a:hover {
-  color: black;
-  transition: all 0.2s;
-}
 .login-container .return {
-  position: absolute;
+  top: 15px; /* Adjusted position for better alignment */
-  left: 10px;
+  left: 15px; /* Adjusted position for better alignment */
-  top: 10px;
+  padding: 0.4rem; /* Adjusted padding */
-  font-size: 1.8rem;
+  background-color: rgba(255, 255, 255, 0.1); /* Added subtle background */
-  color: white;
-  cursor: pointer;
-  transition: all 0.3s;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.3rem;
-}
-.login-container .return:hover {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-.login-password-visibility {
-  position: absolute;
-  font-size: 1.7rem;
-  top: 28%;
-  right: 5px;
-  z-index: 5;
-  cursor: pointer;
-  border: none;
-  background-color: transparent;
-  color: white;
 }

style/playbar.scss

@@ -1,5 +1,4 @@
-@import 'theme.scss';
+@import "theme.scss";
-
 .playbar {
   width: 100%;
   height: $playbar-size;
@@ -7,101 +6,81 @@
   opacity: 0.9;
   position: fixed;
   bottom: 0;
-
   .invisible-media-progress {
     width: 100%;
-		height: 14px;
+    height: 0.875rem;
     background-color: transparent;
     position: absolute;
     transform: translateY(-50%);
-		padding-top: 7px;
+    padding-top: 0.4375rem;
-		
     .media-progress {
       width: 100%;
-			height: 3px;
+      height: 0.1875rem;
       background-color: $controls-click-color;
-			
       .media-progress-solid {
         position: relative;
-				height: 3px;
+        height: 0.1875rem;
         background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
       }
     }
-
     .media-progress-solid::before {
       content: "";
       position: absolute;
-			height: 3px;
+      height: 0.1875rem;
       width: 100%;
       background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
       z-index: -1;
-			filter: blur(3px);
+      filter: blur(0.1875rem);
     }
   }
-
   .playbar-left-group {
     display: flex;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-		margin-left: 10px;
+    margin-left: 0.625rem;
-
     .media-info-img {
-			width: 50px;
+      width: 3.125rem;
     }
-
     .media-info-text {
       text-align: left;
-			margin-left: 10px;
+      margin-left: 0.625rem;
     }
-
     .like-dislike {
-			margin-left: 20px;
+      margin-left: 1.25rem;
     }
   }
-
   .playcontrols {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
   }
-
   .playduration {
     position: absolute;
-		right: 10px;
+    right: 0.625rem;
-		top: 13px;
+    top: 0.8125rem;
   }
-
   .queue-toggle {
     position: absolute;
-		bottom: 13px;
+    bottom: 0.8125rem;
-		top: 13px;
+    top: 0.8125rem;
-		right: 90px;
+    right: 5.625rem;
   }
-
   button {
     .hmirror {
-			-moz-transform: scale(-1, 1);
-			-webkit-transform: scale(-1, 1);
-			-o-transform: scale(-1, 1);
-			-ms-transform: scale(-1, 1);
       transform: scale(-1, 1);
     }
-
     .controlbtn {
       color: $text-controls-color;
     }
-
     .controlbtn:hover {
       color: $controls-hover-color;
     }
-
     .controlbtn:active {
       color: $controls-click-color;
     }
-
     background-color: transparent;
-		border: transparent;
+    border: none;
   }
 }

style/signup.scss

@@ -21,141 +21,150 @@
   transform: translate(-50%, -50%);
   background: $auth-containers;
   z-index: 1;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   overflow: hidden;
 }
+
 .signup-container .header h1 {
   margin-top: 3rem;
   font-size: 2.5rem;
   color: $accent-color;
 }
+
 .signup-container .signup-form {
   width: 80%;
 }
+
 .signup-form .input-box {
   position: relative;
   margin-top: 3rem;
 }
+
 .signup-form .input-box:first-child {
   margin-top: 0.7rem;
 }
+
 .signup-form .input-box input {
-  position: relative;
   width: 100%;
-  max-width: 34vw;
+  padding: 1.0625rem 0 0.625rem;
-  padding: 17px 0px 10px;
   background: transparent;
   outline: none;
   border: none;
-  box-shadow: none;
+  color: #fff;
-  color: #23242a;
+  font-size: 1.1rem;
-  font-size: 1.1em;
   font-family: "Roboto", sans-serif;
   font-weight: 400;
-  letter-spacing: 0px;
+  text-indent: 0.625rem;
-  text-indent: 10px;
   vertical-align: middle;
-  z-index: 10;
-  color: #fff;
 }
+
 .signup-form .input-box span {
   position: absolute;
   left: 0;
-  padding: 15px 0px 10px;
+  padding: 0.9375rem 0 0.625rem;
   pointer-events: none;
   color: black;
-  font-size: 1.19em;
+  font-size: 1.19rem;
   letter-spacing: 0.5px;
   transition: 0.5s;
 }
+
 .signup-form .input-box input:valid ~ span,
 .signup-form .input-box input:focus ~ span {
   color: rgb(94, 93, 93);
   font-size: 0.9rem;
-  transform: translateY(-30px);
+  transform: translateY(-1.875rem);
   font-weight: 400;
 }
+
 .signup-form .input-box i {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
-  height: 2px;
+  height: 0.125rem;
   background: $auth-inputs;
-  border-radius: 4px;
+  border-radius: 0.25rem;
-  overflow: hidden;
   transition: 0.5s;
   pointer-events: none;
 }
 
 .signup-form .input-box input:valid ~ i,
 .signup-form .input-box input:focus ~ i {
-  height: 2.6rem;
+  height: 1.625rem;
 }
+
 .signup-form .error-msg {
   color: $error-color;
   margin-top: 1rem;
   height: 1rem;
 }
+
 .signup-form .loading {
   margin-top: 4.5rem;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: calc(1.5rem - 10px);
 }
+
 .signup-form input[type="submit"] {
   margin-top: 3.5rem;
   width: 100%;
-  height: 45px;
+  height: 2.8125rem;
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   color: white;
   cursor: pointer;
   font-size: 1.1rem;
   font-weight: 600;
   background-color: $accent-color;
 }
+
 .signup-form .go-to-login {
   color: #8f8f8f;
   font-size: 0.9rem;
 }
+
 .signup-form .go-to-login a {
-  cursor: pointer;
   color: #8f8f8f;
   text-decoration: underline;
 }
+
 .signup-form .go-to-login a:hover {
   color: black;
-  transition: all 0.2s;
+  transition: color 0.2s;
 }
+
 .signup-container .return {
   position: absolute;
-  left: 10px;
+  left: 0.625rem;
-  top: 10px;
+  top: 0.625rem;
   font-size: 1.8rem;
   color: white;
   cursor: pointer;
-  transition: all 0.3s;
+  border-radius: 0.5rem;
-  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.3rem;
+  transition: background-color 0.3s;
 }
+
 .signup-container .return:hover {
   background-color: rgba(0, 0, 0, 0.4);
 }
+
 .password-visibility {
   position: absolute;
   font-size: 1.7rem;
   top: 28%;
-  right: 5px;
+  right: 0.3125rem;
-  z-index: 5;
   cursor: pointer;
   border: none;
   background-color: transparent;
   color: white;
 }
+
 .pw-requirements {
   font-size: 0.7rem;
 }

style/song_list.scss

@@ -3,16 +3,13 @@ table.song-list {
 	border-collapse: collapse;
   
 	tr.song-list-item {
-		border: solid;
+	  border: 1px solid #303030; /* Simplified border shorthand */
-		border-width: 1px 0;
-		border-color: #303030;
 	  position: relative;
   
 	  td {
 		color: $text-controls-color;
 		white-space: nowrap;
-			padding-left: 10px;
+		padding: 0.6rem; /* Adjusted padding for consistency */
-			padding-right: 10px;
   
 		a {
 		  text-decoration: none;
@@ -25,27 +22,25 @@ table.song-list {
 	  }
   
 	  td.song-image {
-			width: 35px;
+		width: 2.2rem; /* Replaced static px with rem */
 		display: flex;
   
 		img.song-image {
 		  position: absolute;
 		  top: 50%;
-				-ms-transform: translateY(-50%);
 		  transform: translateY(-50%);
-				width: 35px;
+		  width: 2.2rem; /* Adjusted to rem */
-				height: 35px;
+		  height: 2.2rem; /* Adjusted to rem */
-				border-radius: 5px;
+		  border-radius: 0.3rem; /* Adjusted radius */
 		}
   
 		svg.song-image-overlay {
 		  position: absolute;
 		  top: 50%;
-				-ms-transform: translateY(-50%);
 		  transform: translateY(-50%);
-				width: 35px;
+		  width: 2.2rem; /* Adjusted to rem */
-				height: 35px;
+		  height: 2.2rem; /* Adjusted to rem */
-				border-radius: 5px;
+		  border-radius: 0.3rem; /* Adjusted radius */
 		  fill: $text-controls-color;
 		}
   
@@ -68,11 +63,7 @@ table.song-list {
   
 	  button {
 		svg.hmirror {
-				-moz-transform: scale(-1, 1);
+		  transform: scale(-1, 1); /* Removed redundant prefixes */
-				-webkit-transform: scale(-1, 1);
-				-o-transform: scale(-1, 1);
-				-ms-transform: scale(-1, 1);
-				transform: scale(-1, 1);
 		}
   
 		.controlbtn {
@@ -88,7 +79,7 @@ table.song-list {
 		}
   
 		background-color: transparent;
-			border: transparent;
+		border: none; /* Simplified border */
 	  }
   
 	  .hide-until-hover {