Rebase

.gitattributes

+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+tests/

README.md

+# SpinSha.re Server
+**This repo is a mirror of our internal server repository. Please do not create pull requests or issues, as we can't answer them here**
+ 
+## Compilation Instructions (Windows)
+1. Clone the repository.
+2. Install [node.js](https://nodejs.org/)
+3. Open the command prompt to install the dependencies ```npm install```
+6. Run ```npm run start```
+
+### Package Electron App
+6. Run ```npm run build```

concept/account-circle.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>
\ No newline at end of file

concept/arrow-left.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" /></svg>
\ No newline at end of file

concept/check-decagram.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z" /></svg>
\ No newline at end of file

concept/chevron-left.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg>
\ No newline at end of file

concept/cog-outline.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" /></svg>
\ No newline at end of file

concept/cog.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>
\ No newline at end of file

concept/folder-plus.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M10,4L12,6H20A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10M15,9V12H12V14H15V17H17V14H20V12H17V9H15Z" /></svg>
\ No newline at end of file

concept/home-outline.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22L12 3Z" /></svg>
\ No newline at end of file

concept/magnify.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
\ No newline at end of file

concept/music-box-multiple-outline.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M20,16H8V4H20M12.5,15A2.5,2.5 0 0,0 15,12.5V7H18V5H14V10.5C13.58,10.19 13.07,10 12.5,10A2.5,2.5 0 0,0 10,12.5A2.5,2.5 0 0,0 12.5,15M4,6H2V20A2,2 0 0,0 4,22H18V20H4" /></svg>
\ No newline at end of file

concept/window-close.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" /></svg>
\ No newline at end of file

concept/window-maximize.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M4,4H20V20H4V4M6,8V18H18V8H6Z" /></svg>
\ No newline at end of file

concept/window-minimize.svg

+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,14H4V10H20" /></svg>
\ No newline at end of file

main.js

+const { app, BrowserWindow, ipcMain, protocol } = require('electron');
+const { download } = require('electron-dl');
+const isDev = require('electron-is-dev');
+
+let win;
+let deeplinkingUrl;
+let deeplinkingType;
+
+const gotTheLock = app.requestSingleInstanceLock();
+if (!gotTheLock) {
+  app.quit();
+} else {
+  app.on('second-instance', (event, commandLine, workingDirectory) => {
+    executeDeeplink(commandLine);
+  });
+}
+
+function executeDeeplink(commandLine) {
+  if (process.platform == 'win32') {
+    let commandLineString = commandLine.slice(1) + '';
+    let commandLineArgs = commandLineString.split(",");
+    let fullCommand = commandLineArgs[commandLineArgs.length - 1];
+
+    if(fullCommand.includes("spinshare-song")) {
+      deeplinkingType = "song";
+      deeplinkingUrl = fullCommand.replace("spinshare-song://", "").replace("/", "");
+    } else if(fullCommand.includes("spinshare-user")) {
+      deeplinkingType = "user";
+      deeplinkingUrl = fullCommand.replace("spinshare-user://", "").replace("/", "");
+    }
+  }
+
+  if (win) {
+    if (win.isMinimized()) win.restore();
+    win.focus();
+    if(deeplinkingType == "song") {
+      win.webContents.executeJavaScript(`NavigateToSongDetail("${deeplinkingUrl}")`);
+    } else if(deeplinkingType == "user") {
+      win.webContents.executeJavaScript(`NavigateToUser("${deeplinkingUrl}")`);
+    }
+  }
+}
+
+function createWindow () {
+  win = new BrowserWindow({
+    title: "SpinSha.re",
+    width: 1300,
+    height: 700,
+    minHeight: 700,
+    minWidth: 1300,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  });
+
+  win.loadFile('./src/app.htm');
+
+  if(isDev) {
+    win.webContents.openDevTools();
+  }
+  win.setMenuBarVisibility(false);
+
+  if (process.platform == 'win32') {
+    deeplinkingUrl = process.argv.slice(1);
+  }
+}
+
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+app.on('open-url', function (event, url) {
+  event.preventDefault();
+  deeplinkingUrl = url;
+});
+
+app.setAsDefaultProtocolClient("spinshare-song");
+app.setAsDefaultProtocolClient("spinshare-user");
+
+ipcMain.on("download", (event, info) => {
+  console.log("Download Request Received");
+  download(BrowserWindow.getFocusedWindow(), info.url, info.properties)
+      .then(dl => win.webContents.send("download-complete", dl.getSavePath()));
+});
\ No newline at end of file

package.json

+{
+  "name": "spinshare-client",
+  "version": "1.2.1",
+  "main": "./main.js",
+  "description": "SpinSha.re Client",
+  "scripts": {
+    "start": "electron .",
+    "build": "electron-builder"
+  },
+  "author": "SpinSha.re",
+  "license": "MIT",
+  "devDependencies": {
+    "electron": "^8.0.1",
+    "electron-builder": "^22.4.1"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "electron-dl": "^3.0.0",
+    "electron-is-dev": "^1.1.0",
+    "glob": "^7.1.6",
+    "ncp": "^2.0.0",
+    "rimraf": "^3.0.2",
+    "uniqid": "^5.2.0",
+    "unzipper": "^0.10.10"
+  },
+  "build": {
+    "productName": "SpinShare",
+    "appId": "re.spinsha.client",
+    "directories": {
+      "output": "build"
+    },
+    "protocols": {
+      "name": "spinshare-song-deeplink",
+      "schemes": [
+        "spinshare-song",
+        "spinshare-user"
+      ]
+    },
+    "dmg": {
+      "contents": [
+        {
+          "x": 410,
+          "y": 150,
+          "type": "link",
+          "path": "/Applications"
+        },
+        {
+          "x": 130,
+          "y": 150,
+          "type": "file"
+        }
+      ]
+    },
+    "mac": {
+      "icon": "icons/AppIcon.icns"
+    },
+    "win": {
+      "icon": "icons/AppIcon.ico"
+    },
+    "linux": {
+      "icon": "icons"
+    }
+  }
+}

src/assets/css/connectionerror.css

+.section-connectionerror {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.section-connectionerror .connectionerror-box {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 20px;
+  width: 300px;
+}
+.section-connectionerror .connectionerror-box .icon {
+  font-size: 64px;
+  padding: 40px 0px;
+  text-align: center;
+}
+.section-connectionerror .connectionerror-box .title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-align: center;
+}
+.section-connectionerror .connectionerror-box .text {
+  line-height: 1.5em;
+  text-align: center;
+  opacity: 0.6;
+}
+.section-connectionerror.active {
+  display: flex;
+}

src/assets/css/connectionerror.less

+.section-connectionerror {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    & .connectionerror-box {
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        padding: 20px;
+        width: 300px;
+
+        & .icon {
+            font-size: 64px;
+            padding: 40px 0px;
+            text-align: center;
+        }
+
+        & .title {
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        & .text {
+            line-height: 1.5em;
+            text-align: center;
+            opacity: 0.6;
+        }
+    }
+
+    &.active {
+        display: flex;
+    }
+}
\ No newline at end of file

src/assets/css/download.css

+.download-overlay {
+  position: fixed;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: rgba(0, 0, 0, 0.75);
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.download-overlay .download-content {
+  width: 500px;
+  background: #212629;
+  border-radius: 6px;
+  position: relative;
+  overflow: hidden;
+}
+.download-overlay .download-content .download-statusbar {
+  position: absolute;
+  height: 5px;
+  background: rgba(0, 0, 0, 0.2);
+  left: 0px;
+  right: 0px;
+}
+.download-overlay .download-content .download-statusbar .download-statusbar-handle {
+  height: 5px;
+  width: 0px;
+  background: #74b959;
+  transition: 1s ease-in-out width;
+}
+.download-overlay .download-content .download-status {
+  padding: 25px;
+  display: none;
+  grid-template-rows: 1fr auto;
+  grid-gap: 25px;
+}
+.download-overlay .download-content .download-status .icon {
+  margin: 10px auto;
+  width: 150px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.download-overlay .download-content .download-status .icon .mdi {
+  font-size: 72px;
+}
+.download-overlay .download-content .download-status .text {
+  text-align: center;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.25em;
+}
+.download-overlay .download-content .download-status.active {
+  display: grid;
+}
+.download-overlay .download-content .download-actions {
+  display: none;
+  justify-content: flex-end;
+  padding: 25px;
+  background: rgba(0, 0, 0, 0.4);
+}
+.download-overlay .download-content .download-actions.active {
+  display: flex;
+}
+.download-overlay.active {
+  display: flex;
+}

src/assets/css/download.less

+.download-overlay {
+    position: fixed;
+    z-index: 100;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background: rgba(0,0,0,0.75);
+    display: none;
+    justify-content: center;
+    align-items: center;
+
+    & .download-content {
+        width: 500px;
+        background: #212629;
+        border-radius: 6px;
+        position: relative;
+        overflow: hidden;
+
+        & .download-statusbar {
+            position: absolute;
+            height: 5px;
+            background: rgba(0,0,0,0.2);
+            left: 0px;
+            right: 0px;
+
+            & .download-statusbar-handle {
+                height: 5px;
+                width: 0px;
+                background: #74b959;
+                transition: 1s ease-in-out width;
+            }
+        }
+
+        & .download-status {
+            padding: 25px;
+            display: none;
+            grid-template-rows: 1fr auto;
+            grid-gap: 25px;
+
+            & .icon {
+                margin: 10px auto;
+                width: 150px;
+                height: 150px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                & .mdi {
+                    font-size: 72px;
+                }
+            }
+
+            & .text {
+                text-align: center;
+                font-size: 14px;
+                font-weight: bold;
+                text-transform: uppercase;
+                letter-spacing: 0.25em;
+            }
+
+            &.active {
+                display: grid;
+            }
+        }
+
+        & .download-actions {
+            display: none;
+            justify-content: flex-end;
+            padding: 25px;
+            background: rgba(0,0,0,0.4);
+
+            &.active {
+                display: flex;
+            }
+        }
+    }
+
+    &.active {
+        display: flex;
+    }
+}
\ No newline at end of file

src/assets/css/library.css

+.song-row-library .song-item .song-icon {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 32px;
+}
+.delete-overlay {
+  position: fixed;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: rgba(0, 0, 0, 0.75);
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.delete-overlay .delete-content {
+  width: 500px;
+  background: #212629;
+  border-radius: 6px;
+  position: relative;
+  overflow: hidden;
+}
+.delete-overlay .delete-content .delete-main {
+  padding: 25px;
+}
+.delete-overlay .delete-content .delete-main .delete-title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.delete-overlay .delete-content .delete-main .delete-text {
+  padding: 15px 0px;
+  opacity: 0.6;
+}
+.delete-overlay .delete-content .delete-main .delete-files {
+  font-size: 12px;
+}
+.delete-overlay .delete-content .delete-main .delete-files span {
+  display: block;
+  padding: 5px 0px;
+}
+.delete-overlay .delete-content .delete-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 25px;
+  background: rgba(0, 0, 0, 0.4);
+}
+.delete-overlay .delete-content .delete-actions button {
+  margin-left: 10px;
+}
+.delete-overlay.active {
+  display: flex;
+}

src/assets/css/library.less

+.song-row-library {
+    & .song-item {
+        & .song-icon {
+            position: absolute;
+            top: 0px;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 32px;
+        }
+    }
+}
+.delete-overlay {
+    position: fixed;
+    z-index: 100;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background: rgba(0,0,0,0.75);
+    display: none;
+    justify-content: center;
+    align-items: center;
+
+    & .delete-content {
+        width: 500px;
+        background: #212629;
+        border-radius: 6px;
+        position: relative;
+        overflow: hidden;
+
+        & .delete-main {
+            padding: 25px;
+
+            & .delete-title {
+                letter-spacing: 0.25em;
+                font-size: 14px;
+                font-weight: bold;
+                text-transform: uppercase;
+            }
+            & .delete-text {
+                padding: 15px 0px;
+                opacity: 0.6;
+            }
+            & .delete-files {
+                font-size: 12px;
+
+                & span {
+                    display: block;
+                    padding: 5px 0px;
+                }
+            }
+        }
+
+        & .delete-actions {
+            display: flex;
+            justify-content: flex-end;
+            padding: 25px;
+            background: rgba(0,0,0,0.4);
+
+            & button {
+                margin-left: 10px;
+            }
+        }
+    }
+
+    &.active {
+        display: flex;
+    }
+}
\ No newline at end of file

src/assets/css/main.css

+html {
+  box-sizing: border-box;
+  -webkit-user-select: none;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+html {
+  width: 100%;
+  height: 100%;
+}
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background: #212629;
+  color: #fff;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+}
+::-webkit-scrollbar {
+  background: #212529;
+  width: 5px;
+}
+::-webkit-scrollbar-thumb {
+  background: #fff;
+}
+main {
+  display: grid;
+  margin-left: 60px;
+  min-height: 100vh;
+  overflow-y: scroll;
+}
+main aside {
+  background: rgba(255, 255, 255, 0.1);
+  display: grid;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  grid-template-rows: 1fr auto;
+}
+main aside .item,
+main aside .external-item {
+  width: 60px;
+  height: 60px;
+  opacity: 0.4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  transition: 0.2s ease opacity, 0.2s ease background;
+}
+main aside .item:hover,
+main aside .external-item:hover {
+  opacity: 1;
+  cursor: pointer;
+}
+main aside .item.active,
+main aside .external-item.active {
+  opacity: 1;
+  background: linear-gradient(135deg, #fd2f85, #7a34ec);
+}
+main aside .item .mdi,
+main aside .external-item .mdi {
+  font-size: 22px;
+}
+section {
+  display: none;
+}
+section.active {
+  display: block;
+}
+section.section-startup {
+  padding: 50px;
+}
+section.section-startup.active {
+  display: block;
+}
+section.section-library {
+  padding: 50px;
+}
+button,
+.button {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 7px 14px;
+  border: 0px;
+  transition: 0.2s ease-in-out all;
+}
+button:hover,
+.button:hover {
+  background: #fff;
+  color: #222;
+  cursor: pointer;
+}
+button:focus,
+.button:focus {
+  outline: 0;
+}
+.song-row {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-gap: 5px;
+}
+.song-row .song-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+.song-row .song-header .row-title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.song-row .song-header .row-title.row-title-noactions {
+  margin: 10px 0px;
+}
+.song-row .song-header .row-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 15px;
+}
+.song-row .song-header .row-controls .item {
+  width: 28px;
+  height: 28px;
+  font-size: 22px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.song-row .song-header .row-controls .item.disabled {
+  opacity: 0.4;
+}
+.song-row .song-header .row-controls .item:not(.disabled):hover {
+  background: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+}
+.song-row .song-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-gap: 15px;
+}
+.song-row .song-list .song-item {
+  background: rgba(255, 255, 255, 0.1);
+  transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+  overflow: hidden;
+  border-radius: 6px;
+}
+.song-row .song-list .song-item .song-cover {
+  background: rgba(255, 255, 255, 0.1);
+  background-size: cover;
+  width: 100%;
+  padding-top: 100%;
+  position: relative;
+  background-position: center;
+}
+.song-row .song-list .song-item .song-cover .song-charter {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
+  opacity: 0;
+  padding: 15px;
+  overflow: hidden;
+  display: grid;
+  transition: 0.2s ease-in-out opacity;
+  grid-template-columns: auto 1fr;
+  grid-gap: 10px;
+  align-items: flex-end;
+}
+.song-row .song-list .song-item .song-cover .song-charter .song-charter-info {
+  display: grid;
+  align-items: center;
+}
+.song-row .song-list .song-item .song-cover .song-charter .song-charter-info .mdi {
+  font-size: 18px;
+}
+.song-row .song-list .song-item .song-cover .song-charter .song-charter-info span {
+  font-size: 12px;
+  color: transparent;
+  transition: 0.2s ease-in-out color;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.song-row .song-list .song-item .song-metadata {
+  padding: 15px;
+}
+.song-row .song-list .song-item .song-metadata .song-title {
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.song-row .song-list .song-item .song-metadata .song-artist {
+  margin-top: 5px;
+  opacity: 0.6;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.song-row .song-list .song-item .song-metadata .song-difficulties {
+  margin-top: 10px;
+  height: 20px;
+  display: flex;
+}
+.song-row .song-list .song-item .song-metadata .song-difficulties img {
+  height: 18px;
+  margin-right: 10px;
+  opacity: 0.3;
+}
+.song-row .song-list .song-item .song-metadata .song-difficulties img.active {
+  opacity: 1;
+}
+.song-row .song-list .song-item:not(.song-item-loading):not(.song-item-local):hover {
+  transform: scale(1.1);
+  cursor: pointer;
+  box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
+}
+.song-row .song-list .song-item:not(.song-item-loading):not(.song-item-local):hover .song-cover .song-charter {
+  opacity: 1;
+}
+.song-row .song-list .song-item.song-item-loading {
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+  animation-name: songLoadingShimmer;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: 2s;
+}
+.song-row .song-list .song-item.song-item-loading .song-cover {
+  opacity: 0;
+}
+.song-row .song-list .song-item.song-item-local {
+  opacity: 0.6;
+}
+.song-row .song-list .song-item.song-item-local:hover .song-cover .song-charter {
+  opacity: 1;
+}
+.song-row .song-list-noresults {
+  display: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 25px;
+  opacity: 0.6;
+  text-align: center;
+}
+.song-row .song-list-noresults.active {
+  display: block;
+}
+.user-row {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-gap: 5px;
+}
+.user-row .user-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+.user-row .user-header .row-title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.user-row .user-header .row-title.row-title-noactions {
+  margin: 10px 0px;
+}
+.user-row .user-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 15px;
+}
+.user-item {
+  background: #383c3f;
+  transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+  overflow: hidden;
+  border-radius: 6px;
+  display: grid;
+  padding: 10px;
+  grid-gap: 15px;
+  grid-template-columns: 32px 1fr;
+}
+.user-item .user-avatar {
+  background: rgba(255, 255, 255, 0.1);
+  background-size: cover;
+  background-position: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+}
+.user-item .user-metadata {
+  display: flex;
+  align-items: center;
+}
+.user-item .user-metadata .user-name {
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.user-item .user-metadata .user-badge {
+  font-size: 18px;
+  margin-left: 10px;
+}
+.user-item:hover {
+  transform: scale(1.1);
+  cursor: pointer;
+  box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
+}
+@keyframes songLoadingShimmer {
+  from {
+    background-position: 0px 0px;
+  }
+  to {
+    background-position: 173px 0px;
+  }
+}
+.contextmenu {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 250px;
+  background: #000;
+  border-radius: 6px;
+  z-index: 90;
+  display: none;
+  overflow: hidden;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+}
+.contextmenu .menu-item {
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  grid-gap: 10px;
+}
+.contextmenu .menu-item .icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+}
+.contextmenu .menu-item .text {
+  display: flex;
+  align-items: center;
+}
+.contextmenu .menu-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+}
+.contextmenu.active {
+  display: block;
+}

src/assets/css/main.less

+html {
+    box-sizing: border-box;
+    -webkit-user-select: none;
+  }
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+html {
+    width: 100%;
+    height: 100%;
+}
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background: #212629;
+    color: #fff;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+}
+::-webkit-scrollbar {
+    background: #212529;
+    width: 5px;
+}
+::-webkit-scrollbar-thumb {
+    background: #fff;
+}
+main {
+    display: grid;
+    margin-left: 60px;
+    min-height: 100vh;
+    overflow-y: scroll;
+
+    & aside {
+        background: rgba(255,255,255,0.1);
+        display: grid;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        bottom: 0px;
+        grid-template-rows: 1fr auto;
+
+        & .item, & .external-item {
+            width: 60px;
+            height: 60px;
+            opacity: 0.4;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: transparent;
+            transition: 0.2s ease opacity, 0.2s ease background;
+
+            &:hover {
+                opacity: 1;
+                cursor: pointer;
+            }
+            &.active {
+                opacity: 1;
+                background: linear-gradient(135deg, #fd2f85, #7a34ec);
+            }
+
+            & .mdi {
+                font-size: 22px;
+            }
+        }
+    }
+}
+section {
+    display: none;
+
+    &.active {
+        display: block;
+    }
+
+    &.section-startup {
+        padding: 50px;
+
+        &.active {
+            display: block;
+        }
+    }
+
+    &.section-library {
+        padding: 50px;
+    }
+}
+button, .button {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 12px;
+    color: #fff;
+    background: rgba(255,255,255,0.2);
+    text-transform: uppercase;
+    font-weight: 700;
+    border-radius: 4px;
+    padding: 7px 14px;
+    border: 0px;
+    transition: 0.2s ease-in-out all;
+
+    &:hover {
+        background: #fff;
+        color: #222;
+        cursor: pointer;
+    }
+    &:focus {
+        outline: 0;
+    }
+}
+.song-row {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-gap: 5px;
+
+    & .song-header {
+        display: grid;
+        grid-template-columns: 1fr auto;
+
+        & .row-title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+
+            &.row-title-noactions {
+                margin: 10px 0px;
+            }
+        }
+        & .row-controls {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 15px;
+
+            & .item {
+                width: 28px;
+                height: 28px;
+                font-size: 22px;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                &.disabled {
+                    opacity: 0.4;
+                }
+
+                &:not(.disabled):hover {
+                    background: rgba(255,255,255,0.2);
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+    & .song-list {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+        grid-gap: 15px;
+
+        & .song-item {
+            background: rgba(255,255,255,0.1);
+            transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+            overflow: hidden;
+            border-radius: 6px;
+
+            & .song-cover {
+                background: rgba(255,255,255,0.1);
+                background-size: cover;
+                width: 100%;
+                padding-top: 100%;
+                position: relative;
+                background-position: center;
+
+                & .song-charter {
+                    position: absolute;
+                    top: 0px;
+                    left: 0px;
+                    right: 0px;
+                    bottom: 0px;
+                    background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
+                    opacity: 0;
+                    padding: 15px;
+                    overflow: hidden;
+                    display: grid;
+                    transition: 0.2s ease-in-out opacity;
+                    grid-template-columns: auto 1fr;
+                    grid-gap: 10px;
+                    align-items: flex-end;
+
+                    & .song-charter-info {
+                        display: grid;
+                        align-items: center;
+
+                        & .mdi {
+                            font-size: 18px;
+                        }
+                        & span {
+                            font-size: 12px;
+                            color: transparent;
+                            transition: 0.2s ease-in-out color;
+                            overflow: hidden;
+                            white-space: nowrap;
+                        }
+                    }
+                }
+            }
+
+            & .song-metadata {
+                padding: 15px;
+
+                & .song-title {
+                    font-weight: bold;
+                    overflow: hidden;
+                    white-space: nowrap;
+                }
+                & .song-artist {
+                    margin-top: 5px;
+                    opacity: 0.6;
+                    overflow: hidden;
+                    white-space: nowrap;
+                }
+                & .song-difficulties {
+                    margin-top: 10px;
+                    height: 20px;
+                    display: flex;
+        
+                    & img {
+                        height: 18px;
+                        margin-right: 10px;
+                        opacity: 0.3;
+        
+                        &.active {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+
+            &:not(.song-item-loading):not(.song-item-local):hover {
+                transform: scale(1.1);
+                cursor: pointer;
+                box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
+
+                & .song-cover {
+                    & .song-charter {
+                        opacity: 1;
+                    }
+                }
+            }
+            &.song-item-loading {
+                background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.1));
+                animation-name: songLoadingShimmer;
+                animation-fill-mode: forwards;
+                animation-timing-function: linear;
+                animation-iteration-count: infinite;
+                animation-duration: 2s;
+
+                & .song-cover {
+                    opacity: 0;
+                }
+            }
+            &.song-item-local {
+                opacity: 0.6;
+
+                &:hover {
+                    & .song-cover {
+                        & .song-charter {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    & .song-list-noresults {
+        display: none;
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        padding: 25px;
+        opacity: 0.6;
+        text-align: center;
+
+        &.active {
+            display: block;
+        }
+    }
+}
+.user-row {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-gap: 5px;
+
+    & .user-header {
+        display: grid;
+        grid-template-columns: 1fr auto;
+
+        & .row-title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+
+            &.row-title-noactions {
+                margin: 10px 0px;
+            }
+        }
+    }
+    & .user-list {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 15px;
+    }
+}
+.user-item {
+    background: #383c3f;
+    transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+    overflow: hidden;
+    border-radius: 6px;
+    display: grid;
+    padding: 10px;
+    grid-gap: 15px;
+    grid-template-columns: 32px 1fr;
+
+    & .user-avatar {
+        background: rgba(255,255,255,0.1);
+        background-size: cover;
+        background-position: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 32px;
+    }
+
+    & .user-metadata {
+        display: flex;
+        align-items: center;
+
+        & .user-name {
+            font-weight: bold;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        & .user-badge {
+            font-size: 18px;
+            margin-left: 10px;
+        }
+    }
+
+    &:hover {
+        transform: scale(1.1);
+        cursor: pointer;
+        box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
+    }
+}
+
+@keyframes songLoadingShimmer {
+    from {
+        background-position: 0px 0px;
+    }
+    to {
+        background-position: 173px 0px;
+    }
+}
+.contextmenu {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 250px;
+    background: #000;
+    border-radius: 6px;
+    z-index: 90;
+    display: none;
+    overflow: hidden;
+    box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
+
+    & .menu-item {
+        padding: 10px;
+        display: grid;
+        grid-template-columns: 24px 1fr;
+        grid-gap: 10px;
+
+        & .icon {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 20px;
+        }
+        & .text {
+            display: flex;
+            align-items: center;
+        }
+
+        &:hover {
+            background: rgba(255,255,255,0.2);
+            cursor: pointer;
+        }
+    }
+    &.active {
+        display: block;
+    }
+}
\ No newline at end of file

src/assets/css/search.css

+.section-search {
+  grid-template-rows: auto 1fr;
+  grid-gap: 25px;
+  padding: 50px;
+}
+.section-search .search-bar input {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  padding: 14px 28px;
+  border: 0px;
+  transition: 0.2s ease-in-out all;
+}
+.section-search .search-bar input:hover {
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
+}
+.section-search .search-bar input:focus {
+  outline: 0;
+}
+.section-search .search-bar input::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.section-search .search-results {
+  display: grid;
+  grid-template-rows: auto auto auto 1fr;
+  grid-gap: 25px;
+}
+.section-search .search-results .search-results-users {
+  display: none;
+}
+.section-search .search-results .search-results-users.active {
+  display: grid;
+}
+.section-search .search-results .search-results-songs {
+  display: none;
+}
+.section-search .search-results .search-results-songs.active {
+  display: grid;
+}
+.section-search .search-results .search-results-noresults {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 25px;
+  display: none;
+}
+.section-search .search-results .search-results-noresults .noresults-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.section-search .search-results .search-results-noresults .noresults-text {
+  opacity: 0.6;
+}
+.section-search .search-results .search-results-noresults.active {
+  display: block;
+}
+.section-search.active {
+  display: grid;
+}

src/assets/css/search.less

+.section-search {
+    grid-template-rows: auto 1fr;
+    grid-gap: 25px;
+    padding: 50px;
+
+    & .search-bar {
+        input {
+            width: 100%;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 14px;
+            color: #fff;
+            background: rgba(255,255,255,0.2);
+            border-radius: 4px;
+            padding: 14px 28px;
+            border: 0px;
+            transition: 0.2s ease-in-out all;
+        
+            &:hover {
+                background: rgba(255,255,255,0.4);
+                color: #fff;
+            }
+            &:focus {
+                outline: 0;
+            }
+            &::placeholder {
+                color: rgba(255,255,255,0.6);
+            }
+        }
+    }
+    & .search-results {
+        display: grid;
+        grid-template-rows: auto auto auto 1fr;
+        grid-gap: 25px;
+
+        & .search-results-users {
+            display: none;
+
+            &.active {
+                display: grid;
+            }
+        }
+
+        & .search-results-songs {
+            display: none;
+
+            &.active {
+                display: grid;
+            }
+        }
+
+        & .search-results-noresults {
+            background: rgba(255,255,255,0.1);
+            border-radius: 6px;
+            padding: 25px;
+            display: none;
+
+            & .noresults-title {
+                font-size: 24px;
+                font-weight: bold;
+                margin-bottom: 10px;
+            }
+            & .noresults-text {
+                opacity: 0.6;
+            }
+
+            &.active {
+                display: block;
+            }
+        }
+    }
+
+    &.active {
+        display: grid;
+    }
+}
\ No newline at end of file

src/assets/css/settings.css

+.section-settings {
+  padding: 50px;
+  flex-direction: column;
+  align-items: center;
+}
+.section-settings .settings-title {
+  font-size: 14px;
+  letter-spacing: 0.25em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.section-settings .settings-box {
+  width: 600px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  margin-bottom: 25px;
+}
+.section-settings .settings-box .settings-item {
+  display: grid;
+  grid-template-columns: 170px 1fr;
+  grid-gap: 15px;
+  margin-top: 15px;
+}
+.section-settings .settings-box .settings-item .settings-label {
+  align-self: center;
+  opacity: 0.6;
+}
+.section-settings .settings-box .settings-item .settings-input {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 5px;
+}
+.section-settings .settings-box .settings-item .settings-input.settings-input-twobuttons {
+  grid-template-columns: 1fr auto auto;
+}
+.section-settings .settings-box .settings-item .settings-input select,
+.section-settings .settings-box .settings-item .settings-input input[type="text"] {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 7px 14px;
+  border: 0px;
+  transition: 0.2s ease-in-out all;
+}
+.section-settings .settings-box .settings-item .settings-input select:not(:disabled):hover,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:not(:disabled):hover {
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
+  cursor: pointer;
+}
+.section-settings .settings-box .settings-item .settings-input select:focus,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:focus {
+  outline: 0;
+}
+.section-settings .settings-box .settings-item .settings-input select::placeholder,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.section-settings .settings-box .settings-item .settings-input select option,
+.section-settings .settings-box .settings-item .settings-input input[type="text"] option {
+  background: #222;
+  text-transform: initial;
+}
+.section-settings .settings-box .settings-item .settings-input select:disabled,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:disabled {
+  opacity: 0.4;
+}
+.section-settings .settings-box .settings-item .settings-input input[type="text"] {
+  text-transform: initial;
+  font-weight: normal;
+}
+.section-settings.active {
+  display: flex;
+}

src/assets/img/difficultyEasy.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M122.89,100l-48.5-84c-4.62-8-16.17-8-20.78,0l-48.5,84c-4.62,8,1.15,18,10.39,18h96.99
+		C121.74,118,127.51,108,122.89,100z M77.62,59.2H58.48v9.96H75.7v7.68H58.48v9.96h19.14v7.68H50.38V51.52h27.24V59.2z"/>
+</g>
+</svg>

src/assets/img/difficultyExtreme.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M120.95,43.09L71.05,6.84c-4.21-3.06-9.9-3.06-14.11,0L7.05,43.09c-4.21,3.06-5.97,8.47-4.36,13.42
+		l19.06,58.65c1.61,4.94,6.21,8.29,11.41,8.29h61.67c5.2,0,9.81-3.35,11.41-8.29l19.06-58.65
+		C126.91,51.56,125.15,46.15,120.95,43.09z M56.9,56.51H37.76v9.96h17.22v7.68H37.76v9.96H56.9v7.68H29.66V48.83H56.9V56.51z
+		 M90.26,91.79L80.9,76.31h-0.48l-9.36,15.48H60.98l14.1-22.44L62.06,48.83h10.02l8.34,14.04h0.48l8.34-14.04h10.02L86.24,69.35
+		l14.1,22.44H90.26z"/>
+</g>
+</svg>

src/assets/img/difficultyHard.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M120.95,43.09L71.05,6.84c-4.21-3.06-9.9-3.06-14.11,0L7.05,43.09c-4.21,3.06-5.97,8.47-4.36,13.42
+		l19.06,58.65c1.61,4.94,6.21,8.29,11.41,8.29h61.67c5.2,0,9.81-3.35,11.41-8.29l19.06-58.65
+		C126.91,51.56,125.15,46.15,120.95,43.09z M81.13,92.48h-8.1V74.36H54.97v18.12h-8.1V49.52h8.1v17.16h18.06V49.52h8.1V92.48z"/>
+</g>
+</svg>