eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Rewrite Parity (#647)

Browse Source 
* Rewrite Parity

* Update SEO, fix modals, add dashes to changelog

* Edit create version title

* Cache tags, SEO for search/partial noscript support, notifications fix

* Deploy?

* Fix vercel config

* Fix it again

* Finish user editing

* Remove broken docker build

* Switch reports to modals

* Update project card

* Navbar line animation in most places

* Add chips

* Move to navlink query params

* remove autogen file

* Add copy code

* Fix webkit text box outlines, port report modal

* Update error page

* Switch to avatar component

* Make keyboard nav work

* Fix team member spacing

* improve project ID display (#676)

* Bug fixes

* Update OG site title

* More fixes

* Design tweaks

* Fix card wrapping on mobile

* Darken light theme color a little

* Sidebar navigation for settings, notifications, and moderation

* Change follow icon from a heart to a bell

* Revert "Change follow icon from a heart to a bell"

This reverts commit e30b46ec5d93c57df847be88eba123c7419dd03b.

* Change follows icon in settings

* AaaaUUUUUUUGghghhhhhhhh

* Project sidebar transparent button animations

* Update file input button styling and change icon remove button text

* Fix environments filter condition being inverted

* Remove -> revert

* Improve readability of warning banners on light mode

* Fix mobile menu button colors

* Clean up notifications page more

* Creator dashboard and monetization work

* Add processing fees declarations and acknowledgement box

* Beta badges

* Downgrade Nuxt Vercel Builder

* Update the style of button groups to be more consistent

* More button consistency

* Remove desktop navbar on mobile

* Update home page progress indicators

* Fix page jumping (Thanks @stairman06)

* Make checkbox checked style consistent with other selection indicators

* More home page updates

* Properly reset NavRows

* Move filters menu on mobile

* Stylized checkbox updated to match active styling

* Filters icon

* Respect prefers-reduced-motion

* Add most backend payouts changes (untested)

* Finish tested payouts code

* Allow monetization unenrolling

* No longer use brand color for active highlights on standard nav elements

* More consistent button group on project page

* Rounded tables

* Fix some things (#716)

* Team member fixes + re-add changelog/versions stuff

* Remove dummy data

* The great CSS refactor

* Remove commented out css

* Give modals the legacy label styles and update profile edit labels

* Fix active chip size

* Remove shadow from selected chip

* Require email set for CMP

* Update styles of notifications to universal-card

* Equivalent exchange, trading some jank for some less bad jank

* Fix all gallery buttons being missing when there is only 1 image

* Update project creation modal

* Make beta badge less bright

* Beta badge heading styling

* Update withdraw processing fees info

* Remove redundant label

* be

* Fix inverted logic

* 2% is 0.02

* Add toggle to turn off alpha modpacks banner

* Why warning button?

* Add more footer links (#719)

* Add more footer links

* Move twitter

* Make items on user pages less comically large and move ad above navigation

* Bump text down a little on home page

* Update favicon colors

* Remove task list package and change default description to use bullet points

* I don't remember why I made this important but let's not

* Ah, yes

* this doesn't actually need to be important

* Align items in input groups

* Adjust some spacings and clear creation modal on opening

* Versions now clickable

* Add link to edit page to default description

* Improve monetization information text

* Make wrapped text inputs not shrink

* Make chips work better

* smol margin on clear mod message button

* Allow non-authenticated users to access settings

* Remove settings anchors

* Fix versions page button style on firefox

* Add advanced rendering toggle

* Update slug input and icon card in project edit page

* Legal sidebar

* h1 at beginning of description no longer has top margin

* Use universal card for legal pages

* Update email addresses on legal pages

* Update various page titles and descriptions for consistency

* Various fixes and consolidation to API URL retrieval

Prevents a bug where it's possible to generate the tags under one API, switch the API, and still have tags leftover from the old API

Also finally fixes staging URL being jank

* Make the theme button show regardless of login state

Also remove the change theme from the user dropdown because it's very redundant with the several other ways of changing theme

* Make mobile profile dropdown ordering consistent with desktop

* Change the base url back

* Revert "Change the base url back"

This reverts commit c1da89fddb83776b39f626eab33c8dc67f8a75e4.

* constantize

* Tiny fixes (#722)

* Box-shadow chip outlines

* Show settings when signed out

* mods -> projects

* space

* Beta badge border

* Slug input overflow fix, scrollable

* 🙈 it will all be okay 🙊 this is just temporary 🙉 😭😭 forgive me

* Fix minor bugs

* fix moderation  page

* More fixes

* Temp fix for download button

* BEGONE TABLES

* Fix download button

Co-authored-by: Ryan Cao <70191398+ryanccn@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>
Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com>
Co-authored-by: triphora <emmaffle@modrinth.com>
This commit is contained in:
Geometrically
2022-11-12 17:57:40 -07:00
committed by GitHub
parent 66d0ee8156
commit 20785926e2
100 changed files with 7572 additions and 7284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

933
assets/styles/components.scss
View File

File diff suppressed because it is too large Load Diff

186
assets/styles/global.scss
View File

@@ -11,7 +11,7 @@ html {
--color-text-inactive: hsl(215, 14%, 34%);
--color-text-dark: #1a202c;
--color-heading: #2c313d;
--color-bg: hsl(220, 13%, 91%);
--color-bg: #e5e7eb;
--color-raised-bg: #ffffff;
--color-divider: hsl(220, 13%, 91%);
--color-divider-dark: #c8cdd3;
@@ -19,32 +19,25 @@ html {
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #30b27b;
--color-brand-hover: #1e9565;
--color-brand-active: #177955;
--color-brand: #00af5c;
--color-brand-highlight: rgba(0, 175, 92, 0.25);
--color-brand-shadow: rgba(0, 175, 92, 0.7);
--color-brand-inverted: #ffffff;
--tab-underline-hovered: #e2e8f0;
--color-button-bg: #e0e0e5;
--color-button-bg: hsl(220, 13%, 91%);
--color-button-text: var(--color-text-dark);
--color-button-bg-hover: #d9dce0;
--color-button-text-hover: #1b1e24;
--color-button-bg-active: #c3c6cb;
--color-button-text-active: var(--color-button-text-hover);
--color-button-bg-disabled: #cacdd2;
--color-button-text-disabled: #9da3ac;
--color-transparent-button-bg-hover: var(--color-button-bg);
--color-transparent-button-text-hover: var(--color-text-dark);
--color-transparent-button-bg-active: var(--color-button-bg-hover);
--color-transparent-button-text-active: var(--color-text-dark);
--color-toggle-handle: var(--color-icon);
--color-dropdown-bg: var(--color-button-bg);
--color-dropdown-text: var(--color-button-text);
--color-category-bg: var(--color-bg);
--color-category-text: var(--color-text-dark);
--color-tooltip-bg: var(--color-text);
--color-tooltip-text: var(--color-bg);
@@ -56,14 +49,10 @@ html {
--color-ad: #d6e6f9;
--color-ad-raised: #b1c8e4;
--shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
--shadow-dropdown-strong: 3px 3px 10px hsla(0, 0%, 0%, 0.3);
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
--color-grey-link: var(--color-text);
--color-grey-link-hover: var(--color-heading);
--color-grey-link-active: var(--color-text-dark);
--color-link: #2089ff;
--color-link: #0d60bb;
--color-link-hover: #1a76e7;
--color-link-active: #146fd7;
@@ -76,11 +65,11 @@ html {
--color-badge-yellow-text: #755920;
--color-badge-yellow-bg: #f7bb43;
--color-warning-text: hsl(358, 57%, 20%);
--color-warning-bg: hsl(358, 57%, 80%);
--color-warning-bg: hsl(355, 70%, 88%);
--color-warning-text: hsl(342, 70%, 35%);
--color-banner-text: hsl(0, 11%, 16%);
--color-banner-bg: hsl(356, 59%, 77%);
--color-banner-bg: hsl(0, 100%, 95%);
--color-banner-side: hsl(357, 78%, 40%);
--color-block-quote: var(--color-tooltip-bg);
@@ -90,12 +79,18 @@ html {
--color-table-border: #dfe2e5;
--color-table-alternate-row: #f6f8fa;
--shadow-card: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.1),
inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.05);
--shadow-image-md: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.2),
inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.1);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
--color-card-link-bg: rgba(0, 0, 0, 7%);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
--shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
}
.dark-mode {
@@ -113,33 +108,26 @@ html {
--color-bg-inverted: var(--color-text);
--color-brand: #1bd96a;
--color-brand-hover: #2de391;
--color-brand-active: #55f5ae;
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
--color-brand-inverted: #000;
--tab-underline-hovered: #414146;
--color-button-bg: #3e434b;
--color-button-bg: hsl(222, 13%, 30%);
--color-button-text: var(--color-text);
--color-button-bg-hover: #494f58;
--color-button-text-hover: #ffffff;
--color-button-bg-active: #616570;
--color-button-text-active: var(--color-button-text-hover);
--color-button-bg-disabled: #3a434d;
--color-button-text-disabled: #555d65;
--color-transparent-button-bg-hover: var(--color-button-bg);
--color-transparent-button-text-hover: var(--color-text-dark);
--color-transparent-button-bg-active: var(--color-button-bg-hover);
--color-transparent-button-text-active: var(--color-text-dark);
--color-toggle-handle: var(--color-button-text);
--color-dropdown-bg: var(--color-button-bg);
--color-dropdown-text: var(--color-button-text);
--color-category-bg: var(--color-button-bg);
--color-category-text: var(--color-text-dark);
--color-tooltip-bg: var(--color-text);
--color-tooltip-text: var(--color-bg);
--color-tooltip-bg: var(--color-button-bg);
--color-tooltip-text: var(--color-text);
--color-code-bg: var(--color-button-bg);
--color-code-text: var(--color-text-dark);
@@ -149,10 +137,6 @@ html {
--color-ad: #1f324a;
--color-ad-raised: #2e4057;
--shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
--shadow-dropdown-strong: 3px 3px 20px hsla(0, 0%, 0%, 0.15);
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
--color-link: #74b6f3;
--color-link-hover: #92c0f5;
--color-link-active: #b5d5fd;
@@ -166,8 +150,8 @@ html {
--color-badge-yellow-text: #dba22d;
--color-badge-yellow-bg: #f7bb43;
--color-warning-text: hsl(358, 57%, 85%);
--color-warning-bg: hsl(358, 57%, 25%);
--color-warning-bg: hsl(355, 70%, 20%);
--color-warning-text: hsl(342, 70%, 75%);
--color-banner-text: hsl(0, 100%, 96%);
--color-banner-bg: hsl(356, 18%, 18%);
@@ -180,7 +164,16 @@ html {
--color-table-border: #4f5864;
--color-table-alternate-row: #262a30;
--color-card-link-bg: rgb(255, 255, 255, 15%);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
--shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
}
.oled-mode {
@@ -193,15 +186,21 @@ html {
--color-button-bg-active: #3c3c40;
}
.midas-mode {
@extend .dark-mode;
--color-brand: #fac413;
--color-brand-shadow: rgba(250, 196, 19, 0.7);
}
body {
// Defaults
background-color: var(--color-bg);
color: var(--color-text);
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
font-family: var(--font-standard);
font-size: 16px;
font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-regular);
margin: 0;
padding: 0;
@@ -219,12 +218,13 @@ body {
--size-navbar-height: 3.5rem;
--size-mobile-navbar-height: 3.5rem;
--size-mobile-navbar-height-expanded: 10rem;
--size-mobile-navbar-height-expanded: 11.75rem;
--spacing-card-lg: 1.5rem;
--spacing-card-bg: 1rem;
--spacing-card-md: 0.75rem;
--spacing-card-sm: 0.5rem;
--spacing-card-xs: 0.25rem;
// Font Sizes
--font-size-xxs: 0.625rem; //10px
@@ -247,14 +247,18 @@ body {
--font-weight-heading: var(--font-weight-extrabold);
--font-weight-title: var(--font-weight-extrabold);
@media screen and (min-width: 501px) {
@media screen and (min-width: 318px) {
--size-mobile-navbar-height-expanded: 9.25rem;
}
@media screen and (min-width: 517px) {
--size-mobile-navbar-height-expanded: 7rem;
}
}
svg {
height: 24px;
width: 24px;
height: 1em;
width: 1em;
}
a {
@@ -262,6 +266,10 @@ a {
text-decoration: none;
}
h1 {
color: var(--color-text-dark);
}
h2 {
margin-top: 0;
margin-bottom: 1rem;
@@ -269,19 +277,17 @@ h2 {
}
h3 {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
margin-block: var(--spacing-card-md) var(--spacing-card-sm);
color: var(--color-text-dark);
}
button {
cursor: pointer;
@extend .button;
}
input {
border-radius: 2rem;
border-radius: var(--size-rounded-sm);
box-sizing: border-box;
border: 2px solid transparent;
// safari iOS rounds inputs by default
// set the appearance to none to prevent this
appearance: none !important;
}
pre {
@@ -293,17 +299,15 @@ textarea {
background: var(--color-button-bg);
color: var(--color-text);
padding: 0.5rem 1rem;
border: 2px solid transparent;
font-weight: var(--font-weight-medium);
border: none;
outline: none;
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
transition: box-shadow 0.1s ease-in-out;
min-height: 40px;
&:hover:not([disabled]):not(:focus) {
background: var(--color-button-bg-hover);
color: var(--color-button-text-hover);
border-color: var(--color-divider-dark);
}
&:focus {
outline: none !important;
border-color: var(--color-brand);
&:focus, &:focus-visible {
box-shadow: inset 0 0 0 transparent, 0 0 0 .25rem var(--color-brand-shadow);
color: var(--color-button-text-active);
}
@@ -313,26 +317,21 @@ textarea {
pointer-events: none;
cursor: not-allowed;
}
&:focus::placeholder {
opacity: 0.8;
}
&::placeholder {
color: var(--color-button-text);
opacity: 0.6;
}
}
button {
padding: 0.5rem 0;
//outline: none; Bad for accessibility
color: var(--color-button-text);
background-color: var(--color-button-bg);
button, input[type=button] {
cursor: pointer;
border: none;
border-radius: var(--size-rounded-control);
&:focus-visible,
&:hover {
background-color: var(--color-button-bg-hover);
color: var(--color-button-text-hover);
}
&:active {
background-color: var(--color-button-bg-active);
color: var(--color-button-text-active);
}
outline: none;
}
kbd {
@@ -345,10 +344,13 @@ kbd {
font-size: 0.85em !important;
}
// @import "vue-select/src/scss/vue-select.scss";
@import '~assets/styles/highlightjs.scss';
@import '~assets/styles/layout.scss';
@import '~assets/styles/utils.scss';
@import '~assets/styles/components.scss';
@import '~assets/styles/normalize.scss';
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible {
outline: .25rem solid #ea80ff;
border-radius: .25rem;
}

10
assets/styles/layout.scss
View File

@@ -43,6 +43,10 @@
margin: 0 0.75rem;
}
.site-header {
margin: 0 0.75rem;
}
@media (min-width: 1024px) {
.normal-page {
flex-direction: row;
@@ -56,10 +60,16 @@
}
.normal-page__sidebar {
min-width: 20rem;
width: 20rem;
}
.normal-page__content {
width: 60rem;
max-width: 60rem;
}
.site-header {
margin: 0 auto;
}
}

2
assets/styles/normalize.scss vendored
View File

@@ -165,7 +165,7 @@ textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 2px; /* 2 */
margin: 0; /* 2 */
}
/**

4
assets/styles/utils.scss
View File

@@ -1,5 +1,5 @@
.hidden {
display: none;
display: none !important;
}
.w-100 {
@@ -13,4 +13,4 @@ body {
.text-container p {
line-height: 1.3;
}
}