You've already forked AstralRinth
forked from didirus/AstralRinth
Project, Search, User redesign (#1281)
* New project page * fix silly icon tailwind classes * Start new versions page, add new ButtonStyled component * Pagination and finish mocking up versions page functionality * green download button * hover animation * New Modal, Avatar refactor, subpages in NavTabs * lint * Download modal * New user page + fix lint * fix ui lint * Download animation fix * Versions filter + finish project page * Improve consistency of buttons on home page * Fix ButtonStyled breaking * Fix margin on version summary * finish search, new modals, user + project page mobile * fix gallery image pages * New project header * Fix gallery tab showing improperly * Use auto direction + position for all popouts * Preliminary user page * test to see if this fixes login stuff * remove extra slash * Add version actions, move download button on versions page * Listed -> public * Shorten download modal selector height * Fix user menu open direction * Change breakpoint for header collapse * Only underline title * Tighten padding on stats a little * New nav * Make mobile breakpoint more consistent * fix header breakpoint regression * Add sign in button * Fix edit icon color * Fix margin at top of screen * Fix user bios and ad width * Fix user nav showing when there's only one type of project * Fix plural projects on user page & extract i18n * Remove ads on mobile for now * Fix overflow menu showing hidden items * NavTabs on mobile * Fix navbar z index * Search filter overhaul + negative filters * fix no-max-height * port version filters, fix following/collections, lint * hide promos * ui lint * Disable modal background animation to reduce reported motion sickness * Hide install with modrinth app button on mobile --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Prospector <prospectordev@gmail.com>
This commit is contained in:
Geometrically
@@ -367,35 +367,6 @@
|
||||
Other
|
||||
*/
|
||||
|
||||
// Here lies 𝖄𝖊 𝕸𝖆𝖗𝖌𝖎𝖓 𝕸𝖆𝖌𝖎𝖈
|
||||
// which allows to have just one wrapper div
|
||||
.iconified-input {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
padding-left: 2.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:focus-within svg {
|
||||
color: var(--color-button-text-active);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
z-index: 1;
|
||||
|
||||
color: var(--color-button-text);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: var(--color-link);
|
||||
|
||||
@@ -691,122 +662,6 @@ tr.button-transparent {
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
&.raised-multiselect {
|
||||
.multiselect__tags,
|
||||
.multiselect__content-wrapper,
|
||||
.multiselect__spinner {
|
||||
background-color: var(--color-raised-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
color: var(--color-text) !important;
|
||||
outline: none !important;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.multiselect__tags {
|
||||
border-radius: var(--size-rounded-sm);
|
||||
background: var(--color-dropdown-bg);
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding-left: 7px;
|
||||
padding-top: 10px;
|
||||
outline: 2px solid transparent;
|
||||
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
|
||||
&:active {
|
||||
background: var(--color-button-bg-hover);
|
||||
|
||||
.multiselect__spinner {
|
||||
background: var(--color-button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.multiselect__tag {
|
||||
border-radius: var(--size-rounded-sm);
|
||||
color: var(--color-text-dark);
|
||||
background: transparent;
|
||||
border: 2px solid var(--color-brand);
|
||||
}
|
||||
|
||||
.multiselect__tag-icon {
|
||||
background: transparent;
|
||||
|
||||
&:after {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__placeholder {
|
||||
color: var(--color-button-text);
|
||||
margin-left: 8px;
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.6;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__content-wrapper {
|
||||
background: var(--color-dropdown-bg);
|
||||
border: none;
|
||||
overflow-x: hidden;
|
||||
border-bottom-left-radius: var(--size-rounded-sm);
|
||||
border-bottom-right-radius: var(--size-rounded-sm);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
outline: 2px solid transparent;
|
||||
|
||||
.multiselect__element {
|
||||
.multiselect__option {
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
.multiselect__option--highlight {
|
||||
background: var(--color-button-bg-active);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.multiselect__option--selected {
|
||||
background: var(--color-brand);
|
||||
font-weight: bold;
|
||||
color: var(--color-brand-inverted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__spinner {
|
||||
background: var(--color-dropdown-bg);
|
||||
|
||||
&:active {
|
||||
background: var(--color-button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.multiselect--disabled {
|
||||
background: none;
|
||||
|
||||
.multiselect__current,
|
||||
.multiselect__select {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
@@ -916,9 +771,9 @@ tr.button-transparent {
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
background-color: var(--color-divider);
|
||||
background-color: var(--color-button-bg);
|
||||
border: none;
|
||||
color: var(--color-divider);
|
||||
color: var(--color-button-bg);
|
||||
height: 1px;
|
||||
margin: var(--spacing-card-bg) 0;
|
||||
}
|
||||
@@ -1298,7 +1153,7 @@ svg.inline-svg {
|
||||
|
||||
.tag-list__item {
|
||||
background-color: var(--color-button-bg);
|
||||
padding: var(--gap-2) var(--gap-6);
|
||||
padding: var(--gap-4) var(--gap-8);
|
||||
border-radius: var(--radius-max);
|
||||
font-weight: var(--weight-bold);
|
||||
font-size: var(--text-14);
|
||||
@@ -1415,6 +1270,10 @@ svg.inline-svg {
|
||||
width: var(--icon-16);
|
||||
height: var(--icon-16);
|
||||
}
|
||||
|
||||
> svg:first-child {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.links-list {
|
||||
@@ -1442,23 +1301,4 @@ svg.inline-svg {
|
||||
font-size: var(--text-14);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
--_size: 1rem;
|
||||
width: var(--_size, var(--icon-16)) !important;
|
||||
height: var(--_size, var(--icon-16)) !important;
|
||||
border: 1px solid var(--color-button-border);
|
||||
|
||||
&[data-size="32"] {
|
||||
--_size: var(--icon-32);
|
||||
}
|
||||
|
||||
&[data-shape="circle"] {
|
||||
border-radius: var(--radius-max) !important;
|
||||
}
|
||||
|
||||
&[data-shape="square"] {
|
||||
border-radius: calc(2.25 * (var(--_size) / 16)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,7 +51,6 @@ html {
|
||||
--color-text-inverted: initial !important;
|
||||
--color-bg-inverted: initial !important;
|
||||
|
||||
--color-brand-green: initial !important;
|
||||
--color-brand: var(--color-green) !important;
|
||||
--color-brand-inverted: initial !important;
|
||||
|
||||
@@ -141,8 +140,7 @@ html {
|
||||
--color-text-inverted: var(--color-bg);
|
||||
--color-bg-inverted: var(--color-text);
|
||||
|
||||
--color-brand-green: #00af5c;
|
||||
--color-brand: var(--color-brand-green);
|
||||
--color-brand: var(--color-green);
|
||||
--color-brand-highlight: rgba(0, 175, 92, 0.25);
|
||||
--color-brand-shadow: rgba(0, 175, 92, 0.7);
|
||||
--color-brand-inverted: #ffffff;
|
||||
@@ -181,7 +179,11 @@ html {
|
||||
--color-link-hover: #1a76e7;
|
||||
--color-link-active: #146fd7;
|
||||
|
||||
--color-red-bg: rgba(204, 35, 69, 0.1);
|
||||
--color-red-bg: rgba(203, 34, 69, 0.1);
|
||||
--color-orange-bg: rgba(224, 131, 37, 0.1);
|
||||
--color-green-bg: rgba(0, 175, 92, 0.1);
|
||||
--color-blue-bg: rgba(31, 104, 192, 0.1);
|
||||
--color-purple-bg: rgba(142, 50, 243, 0.1);
|
||||
|
||||
--color-warning-bg: hsl(355, 70%, 88%);
|
||||
--color-warning-text: hsl(342, 70%, 35%);
|
||||
@@ -273,10 +275,13 @@ html {
|
||||
--color-text-inverted: var(--color-bg);
|
||||
--color-bg-inverted: var(--color-text);
|
||||
|
||||
--color-red-bg: rgba(255, 74, 110, 0.2);
|
||||
--color-red-bg: rgba(255, 73, 110, 0.2);
|
||||
--color-orange-bg: rgba(255, 163, 71, 0.2);
|
||||
--color-green-bg: rgba(27, 217, 106, 0.2);
|
||||
--color-blue-bg: rgba(79, 156, 255, 0.2);
|
||||
--color-purple-bg: rgba(199, 138, 255, 0.2);
|
||||
|
||||
--color-brand-green: #1bd96a;
|
||||
--color-brand: var(--color-brand-green);
|
||||
--color-brand: var(--color-green);
|
||||
--color-brand-highlight: rgba(27, 217, 106, 0.25);
|
||||
--color-brand-shadow: rgba(27, 217, 106, 0.7);
|
||||
--color-brand-inverted: #000;
|
||||
@@ -420,6 +425,13 @@ html {
|
||||
--color-blue: rgb(9, 159, 239);
|
||||
--color-purple: rgb(139, 129, 230);
|
||||
--color-gray: #718096;
|
||||
|
||||
--color-red-highlight: rgba(232, 32, 13, 0.25);
|
||||
--color-orange-highlight: rgba(232, 141, 13, 0.25);
|
||||
--color-green-highlight: rgba(60, 219, 54, 0.25);
|
||||
--color-blue-highlight: rgba(9, 159, 239, 0.25);
|
||||
--color-purple-highlight: rgba(139, 129, 230, 0.25);
|
||||
--color-gray-highlight: rgba(113, 128, 150, 0.25);
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@@ -64,10 +64,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.full-page {
|
||||
margin: 0 auto;
|
||||
@@ -84,14 +80,14 @@
|
||||
"sidebar content" auto
|
||||
"info content" auto
|
||||
"dummy content" 1fr
|
||||
/ 20rem 1fr;
|
||||
/ 18.75rem 1fr;
|
||||
|
||||
&.alt-layout {
|
||||
grid-template:
|
||||
"content sidebar" auto
|
||||
"content info" auto
|
||||
"content dummy" 1fr
|
||||
/ 1fr 20rem;
|
||||
/ 1fr 18.75rem;
|
||||
}
|
||||
|
||||
&.no-sidebar {
|
||||
@@ -110,11 +106,59 @@
|
||||
}
|
||||
|
||||
.normal-page__sidebar {
|
||||
min-width: 20rem;
|
||||
width: 20rem;
|
||||
min-width: 18.75rem;
|
||||
width: 18.75rem;
|
||||
}
|
||||
|
||||
.normal-page__content {
|
||||
max-width: calc(60rem - 0.75rem);
|
||||
max-width: calc(80rem - 18.75rem - 0.75rem);
|
||||
//overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.new-page {
|
||||
display: grid;
|
||||
margin: 0 auto;
|
||||
max-width: 80rem;
|
||||
column-gap: 0.75rem;
|
||||
padding: 0 0.75rem;
|
||||
|
||||
grid-template:
|
||||
"header"
|
||||
"content"
|
||||
"sidebar"
|
||||
/ 100%;
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
&.sidebar {
|
||||
grid-template:
|
||||
"header header" auto
|
||||
"content sidebar" auto
|
||||
"content dummy" 1fr
|
||||
/ 1fr 18.75rem;
|
||||
|
||||
&.alt-layout {
|
||||
grid-template:
|
||||
"header header" auto
|
||||
"sidebar content" auto
|
||||
"dummy content" 1fr
|
||||
/ 18.75rem 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.normal-page__sidebar {
|
||||
min-width: 18.75rem;
|
||||
width: 18.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.normal-page__sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.normal-page__content {
|
||||
grid-area: content;
|
||||
max-width: calc(80rem - 18.75rem - 0.75rem);
|
||||
//overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
Reference in New Issue
Block a user