diff options
| author | 0neGal <mail@0negal.com> | 2022-04-24 03:05:53 +0200 |
|---|---|---|
| committer | 0neGal <mail@0negal.com> | 2022-04-24 03:07:48 +0200 |
| commit | c8fcc96cae62a8bb7c4374fc1c5889aa5466b701 (patch) | |
| tree | 438975f3559b417d073c0bf245ae0f8288d46934 /src/app | |
| parent | 66162ef4d101ad54badc804893c15739a252a71b (diff) | |
| download | Viper-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.js | 3 | ||||
| -rw-r--r-- | src/app/main.css | 18 |
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; } |