1
0

UI/UX improvements (#146)

* Some initial changes

* New project cards

* Version

* Finalize improvements

* Fixed styling issues on versions page

* Removed light mode

* Run linter

* Added mixpanel stuff in context menus

* Fix styling issues

* Fix windows

* homepage fixes

* Finishing touches on mac styling

* Fixed windows related styling

* Update global.scss

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
This commit is contained in:
Adrian O.V
2023-06-20 00:09:03 -04:00
committed by GitHub
parent 1e78a7b6a8
commit bd697a02f5
25 changed files with 985 additions and 491 deletions

View File

@@ -250,27 +250,7 @@ onUnmounted(() => unlisten())
&:hover {
.cta {
opacity: 1;
bottom: 4.75rem;
}
.instance-card-item {
background: hsl(220, 11%, 11%) !important;
}
}
}
.light-mode {
.instance:hover {
.instance-card-item {
background: hsl(0, 0%, 91%) !important;
}
}
.instance-card-item {
background: hsl(0, 0%, 100%) !important;
&:hover {
background: hsl(0, 0%, 91%) !important;
bottom: calc(var(--gap-md) + 4.25rem);
}
}
}
@@ -280,14 +260,14 @@ onUnmounted(() => unlisten())
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
border-radius: var(--radius-md);
z-index: 1;
width: 3rem;
height: 3rem;
right: 1.25rem;
bottom: 4.25rem;
right: calc(var(--gap-md) * 2);
bottom: 3.25rem;
opacity: 0;
transition: 0.2s ease-in-out bottom, 0.1s ease-in-out opacity, 0.1s ease-in-out filter !important;
transition: 0.2s ease-in-out bottom, 0.2s ease-in-out opacity, 0.1s ease-in-out filter !important;
cursor: pointer;
box-shadow: var(--shadow-floating);
@@ -321,17 +301,11 @@ onUnmounted(() => unlisten())
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0.75rem !important; /* overrides card class */
padding: var(--gap-md);
transition: 0.1s ease-in-out all !important; /* overrides Omorphia defaults */
background: hsl(220, 11%, 17%) !important;
margin-bottom: 0;
&:hover {
filter: brightness(1) !important;
background: hsl(220, 11%, 11%) !important;
}
> .avatar {
.mod-image {
--size: 100%;
width: 100% !important;