.github/workflows/build.yml

@@ -21,7 +21,7 @@ jobs:
       - run: npm run build
 
   build_on_mac:
-    runs-on: macos-latest
+    runs-on: macOS-latest
     steps:
       - uses: actions/checkout@master
       - uses: actions/setup-node@master

.gitignore

@@ -7,8 +7,3 @@ build/linux/arch/*
 !build/linux/arch/.SRCINFO
 !build/linux/arch/tidal-hifi.desktop
 !build/linux/arch/install.sh
-*.css
-*.css.map
-
-# JetBrains IDE configuration
-.idea

CHANGELOG.md

@@ -4,14 +4,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## 4.2.0
-
-- New settings window by BlueManCZ
-- Fixed the desktop files in electron-builder
-  - icon is set to new static path based on Arch/Debian
-  - Name has changed to Tidal-Hifi
-  -
-
 ## 4.1.2
 
 - Changed the category of the desktop file to AudioVideo

build/electron-builder.base.yml

@@ -9,7 +9,6 @@ snap:
     - screen-inhibit-control
 linux:
   category: AudioVideo
-  icon: icon.png
   target:
     - dir
   executableName: tidal-hifi
@@ -18,7 +17,7 @@ linux:
     Name: TIDAL Hi-Fi
     GenericName: TIDAL Hi-Fi
     Comment: The web version of listen.tidal.com running in electron with hifi support thanks to widevine.
-    Icon: /usr/share/icons/hicolor/0x0/apps/tidal-hifi.png
+    Icon: icon.png
     StartupNotify: true
     Terminal: false
     Type: Application

build/electron-builder.deb.yml

@@ -1,4 +1,6 @@
 extends: ./build/electron-builder.base.yml
 linux:
+  category: Audio
+  icon: icon.png
   target:
     - deb

build/electron-builder.pacman.yml

@@ -1,5 +1,6 @@
 extends: ./build/electron-builder.base.yml
 linux:
+  category: Audio
   icon: icon.png
   target:
     - pacman

build/electron-builder.rpm.yml

@@ -1,4 +1,6 @@
 extends: ./build/electron-builder.base.yml
 linux:
+  category: Audio
+  icon: icon.png
   target:
     - rpm

build/electron-builder.snap.yml

@@ -1,4 +1,6 @@
 extends: ./build/electron-builder.base.yml
 linux:
+  category: Audio
+  icon: icon.png
   target:
     - snap

build/electron-builder.yml

@@ -1,5 +1,9 @@
-extends: ./build/electron-builder.base.yml
+electronVersion: 19.0.5
+electronDownload:
+  version: 19.0.5+wvcus
+  mirror: https://github.com/castlabs/electron-releases/releases/download/v
 linux:
+  category: Audio
   target:
     - pacman
     - tar.gz

package.json

@@ -1,25 +1,19 @@
 {
   "name": "tidal-hifi",
-  "version": "4.2.0",
+  "version": "4.1.2",
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "src/main.js",
   "scripts": {
     "start": "electron .",
-    "build": "npm run builder -- -c ./build/electron-builder.yml",
+    "build": "electron-builder --publish=never -c ./build/electron-builder.yml",
-    "build-deb": "npm run builder -- -c ./build/electron-builder.deb.yml",
+    "build-deb": "electron-builder --publish=never -c ./build/electron-builder.deb.yml",
-    "build-unpacked": "npm run builder -- -c ./build/electron-builder.unpacked.yml",
+    "build-unpacked": "electron-builder --publish=never -c ./build/electron-builder.unpacked.yml",
-    "build-rpm": "npm run builder -- -c ./build/electron-builder.rpm.yml",
+    "build-rpm": "electron-builder --publish=never -c ./build/electron-builder.rpm.yml",
-    "build-snap": "npm run builder -- -c ./build/electron-builder.snap.yml",
+    "build-snap": "electron-builder --publish=never -c ./build/electron-builder.snap.yml",
-    "build-arch": "npm run builder -- -c ./build/electron-builder.pacman.yml",
+    "build-arch": "electron-builder --publish=never -c ./build/electron-builder.pacman.yml",
-    "build-wl": "npm run builder -- -c ./build/electron-builder.yml -wl",
+    "build-wl": "electron-builder --publish=never -c ./build/electron-builder.yml -wl",
-    "build-mac": "npm run builder -- -c ./build/electron-builder.yml -m",
+    "build-mac": "electron-builder --publish=never -c ./build/electron-builder.yml -m",
-    "build-base": "npm run builder -- -c ./build/electron-builder.base.yml",
+    "build-base": "electron-builder --publish=never -c ./build/electron-builder.base.yml"
-    "prestart": "npm run sass",
-    "prebuilder": "npm run sass",
-    "builder": "electron-builder --publish=never",
-    "sass": "sass ./src/pages/settings/settings.scss ./src/pages/settings/settings.css",
-    "sass-lint": "sass-lint -vc ./sass-lint.yml ./src/pages/settings/settings.scss",
-    "sass-lint-fix": "sass-lint-auto-fix ./src/pages/settings/settings.scss --config-sass-lint ./sass-lint.yml"
   },
   "keywords": [
     "electron",
@@ -37,17 +31,13 @@
     "express": "^4.18.1",
     "hotkeys-js": "^3.9.4",
     "mpris-service": "^2.1.2",
-    "request": "^2.88.2",
+    "request": "^2.88.2"
-    "sass": "^1.54.9"
   },
   "devDependencies": {
     "@mastermindzh/prettier-config": "^1.0.0",
     "electron": "git+https://github.com/castlabs/electron-releases.git#v19.0.5+wvcus",
     "electron-builder": "^23.3.3",
-    "js-yaml": "^3.14.1",
+    "prettier": "^2.7.1"
-    "prettier": "^2.7.1",
-    "sass-lint": "^1.13.1",
-    "sass-lint-auto-fix": "^0.21.2"
   },
   "prettier": "@mastermindzh/prettier-config"
-}
+}

sass-lint.yml

@@ -1,21 +0,0 @@
-rules:
-  property-sort-order:
-    - 1
-    - order: "smacss"
-  class-name-format:
-    - 1
-    - convention: "hyphenatedbem"
-  quotes:
-    - 1
-    - style: "double"
-  nesting-depth:
-    - 1
-    - max-depth: 3
-  placeholder-in-extend:
-    - 0
-  no-vendor-prefixes:
-    - 0
-  empty-line-between-blocks:
-    - 0
-  force-pseudo-nesting:
-    - 0

src/pages/settings/preload.js

@@ -73,7 +73,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
   document.getElementById("close").addEventListener("click", hide);
   document.getElementById("restart").addEventListener("click", restart);
-  document.querySelectorAll(".external-link").forEach((elem) =>
+  document.querySelectorAll("#openExternal").forEach((elem) =>
     elem.addEventListener("click", function (event) {
       openExternal(event.target.getAttribute("data-url"));
     })

src/pages/settings/settings.html

@@ -2,247 +2,557 @@
 <html lang="en">
 
 <head>
-  <title>Tidal Hi-Fi settings</title>
+  <title>Tidal-hifi settings</title>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-  <link rel="stylesheet" href="./settings.css" />
 </head>
 
-<body class="settings-window">
+<body>
-  <div class="settings-window__wrapper">
+  <div class="header">
-    <div class="settings-window__drag-area"></div>
+    <h1 class="title">Settings</h1>
-    <a id="close" class="settings-window__close-button" title="Close settings">
+    <a id="close" style="cursor: pointer;" class="exitWindow">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.333 348.334" class="settings-window__svg-icon">
-        <path fill="white" d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85
-            c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563
-            c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85
-            l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554
-            L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" />
-      </svg>
-    </a>
 
-    <main class="settings">
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 348.333 348.334">
-      <input type="radio" name="tab" id="general" checked />
+        <g>
+          <path fill="white" d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85
+              c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563
+              c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85
+              l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554
+              L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" />
+      </svg>
+
+    </a>
+  </div>
+  <div class="body">
+    <div class="tabset">
+
+      <input type="radio" name="tabset" id="general" checked />
       <label for="general">General</label>
 
-      <input type="radio" name="tab" id="api" />
+      <input type="radio" name="tabset" id="api" />
-      <label for="api">API</label>
+      <label for="api">Api</label>
 
-      <input type="radio" name="tab" id="integrations" />
+      <!-- Integrations tab -->
+      <input type="radio" name="tabset" id="integrations" />
       <label for="integrations">Integrations</label>
 
-      <input type="radio" name="tab" id="advanced" />
+      <!-- advanced tab -->
+      <input type="radio" name="tabset" id="advanced" />
       <label for="advanced">Advanced</label>
-
+      <!-- about tab -->
-      <input type="radio" name="tab" id="about" />
+      <input type="radio" name="tabset" id="about" />
       <label for="about">About</label>
 
-      <div class="tabs">
+      <div class="tab-panels">
-        <section id="general-section" class="tabs__section">
+        <section id="general" class="tab-panel">
-          <div class="group">
+          <div class="section">
-            <p class="group__title">Playback</p>
+            <h3>Playback</h3>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Notifications</h4>
-                <h4>Notifications</h4>
+              <p>
-                <p>Show a notification when a new song starts.</p>
+                Whether to show a notification when a new song starts.
-              </div>
+              </p>
               <label class="switch">
                 <input id="notifications" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Mute Artists automatically</h4>
-                <h4>Mute Artists automatically</h4>
+              <p>
-                <p>The following list of artists (1 per line) will be muted automatically.</p>
+                The following list of artists (1 per line) will be muted automatically.
-              </div>
+              </p>
-              <label class="switch">
+              <label class="switch" style="margin-bottom:10px">
                 <input id="muteArtists" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
+              <textarea id="mutedArtists" cols="40" rows="5"></textarea>
             </div>
-            <textarea id="mutedArtists" class="textarea" cols="40" rows="5" spellcheck="false"></textarea>
           </div>
-          <div class="group">
+          <div class="section">
-            <p class="group__title">UI</p>
+            <h3>UI</h3>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Menubar</h4>
-                <h4>Menubar</h4>
+              <p>
-                <p>Show TIDAL Hi-Fi's menu bar.</p>
+                Show Tidal-hifi's menu bar
-              </div>
+              </p>
               <label class="switch">
                 <input id="menuBar" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
           </div>
-          <div class="group">
+          <div class="section">
-            <p class="group__title">System</p>
+            <h3>System</h3>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Tray icon</h4>
-                <h4>Tray icon</h4>
+              <p>
-                <p>Show TIDAL Hi-Fi's tray icon.</p>
+                Show Tidal-hifi's tray icon<br />
-              </div>
+              </p>
               <label class="switch">
                 <input id="trayIcon" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Minimize on Close</h4>
-                <h4>Minimize on Close</h4>
+              <p>
-                <p>Minimize window on close instead.</p>
+                Minimize window on close instead <br />
-              </div>
+              </p>
               <label class="switch">
                 <input id="minimizeOnClose" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Hotkeys</h4>
-                <h4>Hotkeys</h4>
+              <p>
-                <p>
+                Enables extra hotkeys to achieve feature parity with the <a id="openExternal"
-                  Enable extra hotkeys to achieve feature parity with the
+                  style="text-decoration: underline; cursor: pointer;"
-                  <a class="external-link" data-url="https://defkey.com/tidal-desktop-shortcuts">desktop apps</a>.
+                  data-url="https://defkey.com/tidal-desktop-shortcuts">desktop apps</a><br />
-                </p>
+              </p>
-              </div>
               <label class="switch">
                 <input id="enableCustomHotkeys" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Single instance</h4>
-                <h4>Single instance</h4>
+              <p>
-                <p>Prevent opening multiple TIDAL Hi-Fi's instances.</p>
+                Prevent opening multiple tidal-hifi instances
-              </div>
+              </p>
               <label class="switch">
                 <input id="singleInstance" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
           </div>
         </section>
+        <section id="api" class="tab-panel">
+          <div class="section">
+            <h3>Api</h3>
+            <p style="margin-bottom: 15px;">
+              Tidal-hifi has a web api built in to allow users to get current song information. You can optionally
+              enable playback control as well.
+            </p>
 
-        <section id="api-section" class="tabs__section">
+            <div class="option">
-          <div class="group">
+              <h4>Web API</h4>
-            <p class="group__title">API</p>
-            <div class="group__description">
               <p>
-                TIDAL Hi-Fi has a built-in web API to allow users to get current song information. You can optionally
+                Whether to enable the Tidal-hifi web api
-                enable playback control as well.
               </p>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Web API</h4>
-                <p>Enable the TIDAL Hi-Fi web API.</p>
-              </div>
               <label class="switch">
                 <input id="apiCheckbox" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4 style="margin-bottom: 5px;">API port</h4>
-                <label for="port">API port</label>
+              <input id="port" type="text" class="freeTextInput" name="port">
-                <input id="port" type="text" class="text-input" name="port">
-              </div>
             </div>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Playback control</h4>
-                <h4>Playback control</h4>
+              <p>
-                <p>Enable playback control from the web API.</p>
+                Whether to enable playback control from the api
-              </div>
+              </p>
               <label class="switch">
                 <input id="playBackControl" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
           </div>
         </section>
-
+        <section id="integrations" class="tab-panel">
-        <section id="integrations-section" class="tabs__section">
+          <div class="section">
-          <div class="group">
+            <h3>integrations</h3>
-            <p class="group__title">Integrations</p>
+            <p style="margin-bottom: 15px;">
-            <div class="group__description">
+              Tidal-hifi is extensible through the use of integrations. You can enable or disable integrations here
+            </p>
+            <div class="option">
+              <h4>MPRIS-player</h4>
               <p>
-                TIDAL Hi-Fi is extensible through the use of integrations.
+                Whether to enable the MPRIS media player controls for Linux systems
-                You can enable or disable them here.
               </p>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>MPRIS</h4>
-                <p>Enable MPRIS interface which provides a mechanism for discovery, querying and basic playback control
-                  on Linux systems.</p>
-              </div>
               <label class="switch">
                 <input id="mprisCheckbox" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Discord RPC</h4>
-                <h4>Discord RPC</h4>
+              <p>
-                <p>Show what you're listening to on Discord.</p>
+                Show what you're listening to on Discord
-              </div>
+              </p>
               <label class="switch">
                 <input id="enableDiscord" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
           </div>
         </section>
-
+        <section id="advanced" class="tab-panel">
-        <section id="advanced-section" class="tabs__section">
+          <div class="section">
-          <div class="group">
+            <h3>Flags</h3>
-            <p class="group__title">Flags</p>
+            <div class="option">
-            <div class="group__option">
+              <h4>Disable hardware media keys</h4>
-              <div class="group__description">
+              <p>
-                <h4>Disable hardware built-in media keys</h4>
+                Disable built-in media keys. <br />
-                <p>
+                Also prevents certain desktop environments from recognizing the chrome MPRIS client separetely from the
-                  Also prevents certain desktop environments from recognizing the chrome
+                custom MPRIS client.
-                  MPRIS client separately from the custom MPRIS client.
+              </p>
-                </p>
-              </div>
               <label class="switch">
                 <input id="disableHardwareMediaKeys" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
-            <div class="group__option">
+            <div class="option">
-              <div class="group__description">
+              <h4>Enable GPU rasterization</h4>
-                <h4>Enable GPU rasterization</h4>
+              <p>
-                <p>Move a part of the rendering to the GPU for increased performance.</p>
+                Move a part of the rendering to the GPU for increased performance.
-              </div>
+              </p>
               <label class="switch">
                 <input id="gpuRasterization" type="checkbox">
-                <span class="switch__slider"></span>
+                <span class="slider round"></span>
               </label>
             </div>
           </div>
         </section>
-
+        <section id="about" class="tab-panel">
-        <section id="about-section" class="tabs__section about-section">
+          <div class="section">
-          <img alt="tidal icon" class="about-section__icon" src="./icon.png">
+            <img alt="tidal icon"
-          <p class="about-section__text">
+              style="width: 100px; height: auto; display: block; margin: 0 auto; margin-bottom: 20px; margin-top: 20px;"
-            <a class="external-link" data-url="https://github.com/Mastermindzh/tidal-hifi">TIDAL Hi-Fi</a>
+              src="./icon.png">
-            is made by <a class="external-link" data-url="https://www.rickvanlieshout.com">
+            <p style="max-width: 350px; display:block; margin: 0 auto; text-align: center;">
-              Rick van Lieshout</a>. <br>It uses <a class="external-link" data-url="https://castlabs.com/">Castlabs'</a>
+              <a id="openExternal" style="text-decoration: underline; cursor: pointer;"
-            version of Electron for widevine support.
+                data-url="https://github.com/Mastermindzh/tidal-hifi">Tidal-hifi</a> is made by <a id="openExternal"
-          </p>
+                data-url="https://www.rickvanlieshout.com" style="text-decoration: underline; cursor: pointer;">Rick van
+                Lieshout</a>.<br />
+              It uses <a style="text-decoration: underline; cursor: pointer;" id="openExternal"
+                data-url="https://castlabs.com/">Castlabs'</a> versions of Electron for widevine support.
+            </p>
+          </div>
         </section>
 
-        <footer class="footer">
+        <small>Some settings require a restart of Tidal-hifi. To do so, click the button below:</small>
-          <p class="footer__note">Some settings may require a restart of TIDAL Hi-Fi. To do so, click the button below:
+        <button id="restart" style="width: 100%">Restart Tidal-hifi</button>
-          </p>
-          <button class="footer__button" id="restart">Restart TIDAL Hi-Fi</button>
-        </footer>
       </div>
-    </main>
+    </div>
   </div>
 </body>
 
+<style>
+  .header {
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+  }
+
+  .header a {
+    -webkit-app-region: no-drag;
+  }
+
+  * {
+    margin: 0%;
+    padding: 0%;
+    color: #ffffff;
+    font-weight: 400;
+    font-stretch: normal;
+    -webkit-font-smoothing: antialiased;
+    font-family: nationale, nationale-regular, Helvetica, sans-serif;
+  }
+
+  html,
+  body {
+    height: 100%;
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  small {
+    font-style: italic;
+    color: #72777f;
+  }
+
+  .header {
+    background-color: #242528;
+    border-bottom: 1px solid #5a5a5a;
+    height: 50px;
+  }
+
+  .title {
+    float: left;
+    line-height: 50px;
+    margin-left: 15px;
+  }
+
+  .accent {
+    color: #0ff;
+  }
+
+  .exitWindow {
+    border: none;
+    outline: none;
+    text-decoration: none;
+    font-size: 1.4rem;
+    float: right;
+    margin-right: 15px;
+    height: 50px;
+    line-height: 50px;
+  }
+
+  .exitWindow:focus {
+    border: none;
+    outline: none;
+  }
+
+  .exitWindow svg {
+    height: 50px;
+    color: white;
+  }
+
+  .section {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(246, 245, 255, .1);
+  }
+
+  .section .option {
+    margin-bottom: 15px;
+  }
+
+  .section .option p {
+    max-width: 75%;
+    float: left
+  }
+
+  .section .option label {
+    float: right;
+  }
+
+  .section:after,
+  .section .option:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .section h3 {
+    margin-bottom: 15px;
+  }
+
+  .section h4 {
+    font-size: 0.9rem;
+  }
+
+  .section p {
+    color: #72777f;
+  }
+
+  .bottom-border {
+    border-bottom: 1px solid #0ff;
+  }
+
+  .body {
+    padding: 15px;
+    flex: 1 1 auto;
+    position: relative;
+    overflow-y: auto;
+  }
+
+  .body::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background-color: 2a2a2a;
+  }
+
+  .body::-webkit-scrollbar {
+    width: 10px;
+    background-color: #2a2a2a;
+  }
+
+  .body::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    background-color: #5a5a5a;
+  }
+
+  /* Tabs */
+
+  .tabset>input[type="radio"] {
+    position: absolute;
+    left: -200vw;
+  }
+
+  .tabset .tab-panel {
+    display: none;
+  }
+
+  .tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
+  .tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
+  .tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
+  .tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
+  .tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5) {
+    display: block;
+  }
+
+  .tabset>label {
+    position: relative;
+    display: inline-block;
+    padding: 15px 0px 10px;
+    border-bottom: 0;
+    cursor: pointer;
+  }
+
+  .tabset>input+label {
+    color: #e0e0e0;
+    margin-right: 30px;
+  }
+
+  .tabset>input:checked+label {
+    color: #0ff;
+    border-bottom: 2px solid #0ff;
+  }
+
+  .tab-panel {
+    padding: 10px 0;
+  }
+
+  /* switches */
+  /* The switch - the box around the slider */
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 28px;
+  }
+
+  /* Hide default HTML checkbox */
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(246, 245, 255, .1);
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 24px;
+    width: 24px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  input:checked+.slider {
+    background-color: #0ff;
+  }
+
+  input:focus+.slider {
+    box-shadow: 0 0 1px #0ff;
+  }
+
+  input:checked+.slider:before {
+    -webkit-transform: translateX(22px);
+    -ms-transform: translateX(22px);
+    transform: translateX(22px);
+  }
+
+  /* Rounded sliders */
+
+  .slider.round {
+    border-radius: 34px;
+  }
+
+  .slider.round:before {
+    border-radius: 50%;
+  }
+
+  /* input field */
+
+  input {
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid rgba(246, 245, 255, .1);
+    color: rgba(229, 238, 255, .6);
+    width: 100%;
+    display: block;
+    padding: 0 0 12px;
+  }
+
+  .freeTextInput:focus {
+    outline: none;
+    border-bottom: 1px solid #0ff;
+  }
+
+  /* buttons */
+  button {
+    border: none;
+    background: none;
+    align-items: center;
+    background-color: rgba(229, 238, 255, .2);
+    display: inline-flex;
+    justify-content: center;
+    border-radius: 12px;
+    height: 48px;
+    line-height: 49px;
+    padding: 0 24px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: background .35s ease;
+    min-height: 0;
+    min-width: 0;
+    font-size: 1.14286rem;
+    font-family: nationale, nationale-regular, Helvetica, sans-serif;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: rgba(229, 238, 255, .3);
+  }
+
+  textarea {
+    color: #72777f;
+    background: #242528;
+    border: 0;
+    width: 100%;
+    color: rgba(229, 238, 255, .6);
+    padding: 0 0 12px;
+    display: block;
+  }
+
+  textarea:focus {
+    outline: none;
+    border: 0;
+    border-bottom: 1px solid #0ff;
+  }
+</style>
+
 </html>

src/pages/settings/settings.scss

@@ -1,363 +0,0 @@
-// --- Variables ---
-
-$black: #17171a;
-$grey-333: #333;
-$white: #f9f9f9;
-
-$tidal-blue: #0ff;
-$tidal-grey: #72777f;
-$tidal-grey-darker: #404248;
-$tidal-grey-darker-focus: #55585f;
-$tidal-grey-darkest: #242528;
-
-// --- Fonts ---
-
-@font-face {
-  font-family: "Noto Sans";
-  font-weight: 300;
-  src: url("fonts/NotoSans-Light.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Noto Sans";
-  font-weight: normal;
-  src: url("fonts/NotoSans-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Noto Sans";
-  font-weight: 600;
-  src: url("fonts/NotoSans-SemiBold.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Noto Sans";
-  font-weight: bold;
-  src: url("fonts/NotoSans-Bold.ttf") format("truetype");
-}
-
-$font1: "Noto Sans", Helvetica, sans-serif;
-
-// --- Mixins ---
-
-@mixin drag($enabled: true) {
-  @if $enabled {
-    -webkit-app-region: drag;
-  }
-
-  @else {
-    -webkit-app-region: no-drag;
-  }
-}
-
-button {
-  cursor: pointer;
-}
-
-// --- Settings window ---
-
-html {
-  height: 100%;
-}
-
-.external-link {
-  @extend button;
-  text-decoration: underline;
-}
-
-.settings-window {
-  height: 100%;
-  margin: 0;
-  color: $white;
-  font-family: $font1;
-
-  &__wrapper {
-    height: 100%;
-    background: $black;
-    box-shadow: inset 0 0 2px 0 $tidal-grey;
-    overflow: hidden;
-  }
-
-  &__drag-area {
-    @include drag;
-    position: absolute;
-    width: 100%;
-    height: 50px;
-    z-index: 0;
-    user-select: none;
-  }
-
-  &__close-button {
-    @extend button;
-    @include drag(false);
-    position: absolute;
-    top: 12px;
-    right: 10px;
-    padding: 10px;
-    border-radius: 100%;
-    z-index: 1;
-
-    &:hover {
-      background: $grey-333;
-    }
-  }
-
-  &__svg-icon {
-    display: block;
-    width: 18px;
-    height: 18px;
-    opacity: .7;
-  }
-
-  // --- Settings tabs ---
-}
-
-.settings {
-  height: 100%;
-  margin: 20px 0;
-  padding-left: 15px;
-  font-size: 0;
-
-  input {
-    &[type="radio"] {
-      margin-right: -18px;
-      transform: scale(0);
-      outline: none;
-    }
-
-    &+label {
-      @include drag(false);
-      display: inline-block;
-      position: relative;
-      margin-right: 35px;
-      padding-bottom: 8px;
-      border-bottom: 0;
-      font-size: 16px;
-      cursor: pointer;
-      z-index: 1;
-      user-select: none;
-    }
-
-    &:checked+label {
-      border-bottom: 2px solid $tidal-blue;
-      color: $tidal-blue;
-    }
-  }
-}
-
-.tabs {
-  height: calc(100% - 70px);
-  padding-right: 15px;
-  font-size: 16px;
-  overflow: auto;
-
-  &__section {
-    display: none;
-  }
-
-  @for $i from 1 to 6 {
-    .settings>input:nth-child(#{$i*2-1}):checked~&>.tabs__section:nth-child(#{$i}) {
-      display: block;
-    }
-  }
-
-  &::-webkit-scrollbar {
-    width: 10px;
-
-    &-thumb {
-      border-radius: 10px;
-      background-color: $tidal-grey-darker;
-      box-shadow: inset 0 0 10px 2px $tidal-grey-darkest;
-    }
-
-    // --- Settings group ---
-  }
-}
-
-.group {
-  padding: 10px 0;
-  border-bottom: 1px solid $grey-333;
-
-  &:last-child {
-    border: 0;
-  }
-
-  &__title {
-    margin-bottom: 10px;
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  &__option {
-    display: flex;
-    align-items: center;
-  }
-
-  &__description {
-    flex-grow: 1;
-
-    h4,
-    label {
-      display: block;
-      margin-top: 10px;
-      margin-bottom: 0;
-      font-size: 14px;
-      font-weight: 600;
-    }
-
-    p {
-      margin-top: 5px;
-      margin-bottom: 8px;
-      color: $tidal-grey;
-      font-size: 14px;
-    }
-
-    .text-input {
-      display: block;
-      width: 100%;
-      margin-bottom: 10px;
-      padding: 5px 0;
-      transition: .2s;
-      border: 0;
-      border-bottom: solid 1px $grey-333;
-      outline: none;
-      background: transparent;
-      color: $tidal-grey;
-      font-size: 14px;
-
-      &:focus {
-        border-color: $tidal-blue;
-        color: $white;
-      }
-
-      // --- Switch slider component ---
-    }
-  }
-}
-
-.switch {
-  $this: &;
-  position: relative;
-  min-width: 50px;
-  height: 28px;
-
-  margin-left: 10px;
-
-  input {
-    transform: scale(0);
-    outline: none;
-
-    &:checked+#{$this}__slider {
-      background-color: $tidal-blue;
-
-      &::before {
-        transform: translateX(22px);
-        background-color: white;
-      }
-    }
-
-    &:focus+#{$this}__slider {
-      box-shadow: inset 0 0 0 1px $tidal-blue;
-    }
-  }
-
-  &__slider {
-    @extend button;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transition: .4s;
-    border-radius: 40px;
-    background-color: $tidal-grey-darkest;
-
-    &::before {
-      position: absolute;
-      bottom: 2px;
-      left: 2px;
-      width: 24px;
-      height: 24px;
-      transition: .4s;
-      border-radius: 50%;
-      background-color: $white;
-      content: "";
-    }
-
-    // --- Textarea component
-  }
-}
-
-.textarea {
-  min-width: 100%;
-  max-width: 100%;
-  min-height: 50px;
-  max-height: 100px;
-  padding: 8px;
-  transition: .2s;
-  border: 0;
-  border-bottom: 1px solid transparent;
-  background: $tidal-grey-darkest;
-  color: $tidal-grey;
-  font-size: 13px;
-  box-sizing: border-box;
-
-  &:focus {
-    border-color: $tidal-blue;
-    outline: none;
-    color: $white;
-  }
-
-  // --- About section ---
-}
-
-.about-section {
-  padding-top: 120px;
-  text-align: center;
-
-  &__icon {
-    display: inline-block;
-    width: 100px;
-  }
-
-  &__text {
-    display: block;
-    max-width: 350px;
-    margin: 20px auto 0;
-  }
-
-  // --- Footer ---
-}
-
-.footer {
-  position: sticky;
-  top: calc(100% - 120px);
-  height: 100px;
-  padding-top: 20px;
-  text-align: center;
-
-  &__note {
-    max-width: 300px;
-    margin: 0 auto 15px;
-    color: $tidal-grey;
-    font-size: 12px;
-  }
-
-  &__button {
-    @extend button;
-    display: block;
-    height: 48px;
-    margin: auto;
-    padding: 0 24px;
-    transition: .2s;
-    border: 0;
-    border-radius: 12px;
-    background: $tidal-grey-darker;
-    color: $white;
-    font-size: 16px;
-
-    &:hover {
-      background: $tidal-grey-darker-focus;
-    }
-  }
-}

src/scripts/settings.js

@@ -48,13 +48,11 @@ const settingsModule = {
 
 settingsModule.createSettingsWindow = function () {
   settingsWindow = new BrowserWindow({
-    width: 700,
+    width: 500,
     height: 600,
-    resizable: false,
     show: false,
-    transparent: true,
     frame: false,
-    title: "TIDAL Hi-Fi settings",
+    title: "Tidal-hifi - settings",
     webPreferences: {
       preload: path.join(__dirname, "../pages/settings/preload.js"),
       plugins: true,