From 42ebe011f82cb13b20f9806780f68caf8a85ad62 Mon Sep 17 00:00:00 2001
From: Super Zombi <super.zombi.yt@gmail.com>
Date: Sat, 13 Apr 2024 15:21:19 +0300
Subject: [PATCH] 0.2.2

Adaptability
---
 README.md         |  4 ++--
 src/main.py       |  5 +----
 src/web/style.css | 40 ++++++++++++++++++++++++++++------------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 6d84c20..82ede11 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Melody Monitor for OBS
 
 <p align="right">
-    <img align="left" src="https://shields.io/badge/version-v0.2.1-blue">
+    <img align="left" src="https://shields.io/badge/version-v0.2.2-blue">
     <a href="#donate"><img src="https://shields.io/badge/💲-Support_the_Project-2ea043"></a>
 </p>
 
@@ -19,7 +19,7 @@
 4. Click `Open in Browser` and copy the link in your browser.
 5. Add a new source in OBS (Browser).
 6. Paste the copied link into the URL field
-7. Adjust the height and width of the element (recommended: height: 140px, width: 600px)
+7. Adjust the height and width of the element (recommended: height: 150px, width: 600px)
 8. Check the box "Refresh browser when source becomes active"
 
 ## Settings
diff --git a/src/main.py b/src/main.py
index 662c991..2348cb1 100644
--- a/src/main.py
+++ b/src/main.py
@@ -13,7 +13,7 @@
 import eel
 
 
-__version__ = "0.2.1"
+__version__ = "0.2.2"
 SETTINGS = {}
 
 #####
@@ -164,7 +164,4 @@ def refresh_settings_mods(_):
     systray = SysTrayIcon(resource_path(os.path.join("data", "music.ico")), "Melody Monitor", menu_options, on_quit=lambda _: os._exit(0))
     systray.start()
 
-    notification.message = f"Running at {generate_url()}"
-    notification.send()
-
     eel.start("index.html", host=SETTINGS.get('host'), port=SETTINGS.get('port'), mode=None, close_callback=lambda a, b: None)
diff --git a/src/web/style.css b/src/web/style.css
index 43080e6..d9f77d7 100644
--- a/src/web/style.css
+++ b/src/web/style.css
@@ -1,12 +1,10 @@
 body {
     font-family: Arial, sans-serif;
     margin: 0; padding: 0;
+    height: 100vh;
     overflow: hidden;
     --margin: 8px;
-    --padding: 20px;
-    --gap: 25px;
-    --image-size: 100px;
-    --max-height: 140px;
+    --padding: 16px;
     font-size: 12pt;
     --background: rgba(255, 255, 255, 0.8);
     --shadow: 0 0 4px rgba(0, 0, 0, 0.5);
@@ -15,30 +13,48 @@ body {
     --progress-bar-color: #007bff;
     --progress-bar-background: #bbb;
 }
+
 .track-info {
     display: flex;
     align-items: center;
     margin: var(--margin);
     width: calc(100% - var(--margin) * 2);
-    height: calc(100vh - var(--margin) * 2);
-    max-height: var(--max-height);
+    height: calc(100% - var(--margin) * 2);
     background-color: var(--background);
     border-radius: 10px;
     box-shadow: var(--shadow);
-    gap: var(--gap);
+    gap: 1em;
     padding: var(--padding);
     box-sizing: border-box;
+    user-select: none;
     opacity: 0;
     transition: 0.3s;
 }
 .track-info.active{
     opacity: 1;
 }
+
+@media (min-height: 200px) {
+    .track-info {
+        font-size: 1.5em;
+    }
+}
+@media (min-height: 300px) {
+    .track-info {
+        font-size: 2em;
+    }
+}
+@media (min-height: 400px) {
+    .track-info {
+        font-size: 3em;
+    }
+}
+
 .track-image {
-    width: var(--image-size);
-    height: var(--image-size);
-    border-radius: 6px;
+    height: 100%;
+    aspect-ratio: 1 / 1;
     object-fit: cover;
+    border-radius: 6px;
 }
 .track-details {
     flex: 1;
@@ -69,9 +85,9 @@ body {
 }
 .progress-bar {
     width: 100%;
-    height: 10px;
+    height: 0.625em;
     background: var(--progress-bar-background);
-    border-radius: 5px;
+    border-radius: 8px;
     margin-top: 20px;
     overflow: hidden;
 }