aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-04-24 03:05:53 +0200
committer0neGal <mail@0negal.com>2022-04-24 03:07:48 +0200
commitc8fcc96cae62a8bb7c4374fc1c5889aa5466b701 (patch)
tree438975f3559b417d073c0bf245ae0f8288d46934 /src/app
parent66162ef4d101ad54badc804893c15739a252a71b (diff)
downloadViper-c8fcc96cae62a8bb7c4374fc1c5889aa5466b701.tar.gz
Viper-c8fcc96cae62a8bb7c4374fc1c5889aa5466b701.zip
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
Diffstat (limited to 'src/app')
-rw-r--r--src/app/browser.js3
-rw-r--r--src/app/main.css18
2 files changed, 19 insertions, 2 deletions
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;
}