From c8fcc96cae62a8bb7c4374fc1c5889aa5466b701 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sun, 24 Apr 2022 03:05:53 +0200
Subject: tiny improvements to the look of the mod browser

Veeeerrryyy tiny improvements:
 - titles are now in bold
 - reduced the padding between version and author text
 - slight blur to images has been added, which looks nice
 - the large margin between the close and filter button is now fixed
---
 src/app/browser.js |  3 ++-
 src/app/main.css   | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/app/browser.js b/src/app/browser.js
index 40670bc..ba20656 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -53,7 +53,7 @@ var Browser = {
 			let spacing = parseInt(getComputedStyle(filters).getPropertyValue("--spacing"));
 
 			filters.style.top = filterRect.bottom - spacing;
-			filters.style.right = filterRect.right - filterRect.left + filterRect.width;
+			filters.style.right = filterRect.right - filterRect.left + filterRect.width - (spacing / 2);
 		},
 	},
 	toggle: (state) => {
@@ -235,6 +235,7 @@ function BrowserEl(properties) {
 		<div class="el" id="mod-${normalize(properties.title)}">
 			<div class="image">
 				<img src="${properties.image}">
+				<img class="blur" src="${properties.image}">
 			</div>
 			<div class="text">
 				<div class="title">${properties.title}</div>
diff --git a/src/app/main.css b/src/app/main.css
index 87d89e0..1e051e1 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -182,6 +182,10 @@ button {
 	padding-right: calc(var(--padding) / 2) !important;
 }
 
+.popup .misc button:last-child {
+	margin-left: 0px !important;
+}
+
 .popup .loading {
 	width: 100%;
 	color: white;
@@ -206,6 +210,13 @@ button {
 	border-radius: var(--spacing);
 }
 
+.popup .el .image img.blur {
+	z-index: -1;
+    position: relative;
+    filter: blur(10px);
+    top: calc(var(--height) * -1 + 5px);
+}
+
 .popup .el .text {
 	overflow: hidden;
 }
@@ -217,7 +228,11 @@ button {
 	text-overflow: ellipsis;
 }
 
-.popup .el .title {font-size: 1.2em}
+.popup .el .title {
+	font-size: 1.2em;
+	font-weight: 700;
+}
+
 .popup .el .description {font-size: 0.8em}
 .popup .el button {
 	background: rgb(var(--blue));
@@ -634,6 +649,7 @@ button:disabled {
 
 button.visual {
 	opacity: 1.0;
+	padding-right: 0px;
 	pointer-events: none;
 	background: transparent !important;
 }
-- 
cgit v1.2.3