Skip to content

Commit

Permalink
tiny improvements to the look of the mod browser
Browse files Browse the repository at this point in the history
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
  • Loading branch information
0neGal committed Apr 24, 2022
1 parent 66162ef commit c8fcc96
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 2 deletions.
3 changes: 2 additions & 1 deletion src/app/browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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>
Expand Down
18 changes: 17 additions & 1 deletion src/app/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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));
Expand Down Expand Up @@ -634,6 +649,7 @@ button:disabled {

button.visual {
opacity: 1.0;
padding-right: 0px;
pointer-events: none;
background: transparent !important;
}
Expand Down

0 comments on commit c8fcc96

Please sign in to comment.