Files
AstralRinth/assets/styles/global.scss
Redblueflame a2266adb3f Add initial support for the v2 of the API (Still WIP) (#250)
* Functionally implement modpacks

* Add LogoAnimated to logo license

* Fix eslint errors

* Add `z-index: 20` to user dropdown (#287)

* Fix pages not working, add changelog page, redesign versions page

* Update theme colors, add OLED theme, update some project creation text. (#292)

* Update theme colors, add OLED theme, update some project creation text.

* Make summary normal text color

* Update favicons, update logos to use dynamic colors, updated filters panel a bit

* Update wording from #250

* Version page rework

* Manually apply some commits from master, other minor v2 fixes (#296)

* Homepage styling improvements (#285)

* Add border radius to video + example code colors

* Change color + allow overflow scroll

* Minor v2 fixes

- Makes multiple loaders display correctly (used to be `Fabric,Forge` is now `Fabric, Forge`
- Fix oopses in #292
- Allow .jar and .zip in file prompt
- Apply 30cbd3a6c372940d1e86cc8134d0dfc7e8e5ee9c to pages/create/project.vue
- Display `fabric, forge` instead of broken icons on pages/create/project.vue

* Markdown styling fixes (#268)

* Add table color variables (+ prettier fixes)

* Add details and table styling to .markdown-body

* Add indexing meta value depending on the status of the mod. (#261)

* General UI Improvement (again) (#255)

* Add and fix some stuff

* Add warning when leaving to `mod/create`

* Fix mods/create not working

* Fix a bug & add improvements to a couple moderation aspects (#278)

This PR fixes reports on the moderation dashboard going to `/dashboard/mod/_id` instead of to `/mod/_id`.
It also allows the ability for moderators to unlist mods in the queue from the frontend instead of having to do it via the backend.
![image](https://i.imgur.com/x8shSVn.png)
Unlisted mods should have the ability to resubmit for approval, so I've also changed "Submit for Review" to "Submit for approval", allowing unlisted mods to do that as well.
![image](https://i.imgur.com/OC8Vyfo.png)

* Add project guidelines to Terms page (#275)

* Add project guidelines to Terms page

This adds the project guidelines as outlined [here](https://discord.com/channels/734077874708938864/734077874708938867/806556531491471368).
NOTE: I've made a few tweaks in wording to accommodate this format, so this is not an exact copy.

* Move rules to its own page

* Allow users to login from search page when it is rendered serverside (#272)

* Change `this.$route.fullPath` → `this.$route.path`

* Closes modrinth/knossos#256

* Wrap mod icon and title in link (#273)

* Wrap mod icon and title in link

* Fixes #218

* Editor's note

    Skipped #249 (search was rewritten), #266 (couldn't figure out how to apply it), #270 (didn't seem to apply properly), #252 (manually merged in with #292), #262 (superceded by #270), #282, #271, #277, #283, and #281 (those five didn't get wiped)

Co-authored-by: venashial <venashial.levo@aleeas.com>
Co-authored-by: Redblueflame <contact@redblueflame.com>
Co-authored-by: Johan Novak <wickedtree@wickedtree.codes>

* SSR descriptions, version edit page

* Working version editing + dependency management (besides files)

* Version create page, file functionality

* Fix some issues with the version page

* More versions page fixes

* Project gallery

* Box shadows, user profile page, WIP header

* Finish user dashboard

* Finish search and fix minor issues

* Moderator page + messages, notifications page

* Fix dropdown menu, fix XSS, fix team members page

* Change doc url on main page (#309)

* Re-Fix docs url (#313)

* Clean up. Part 1: Fix immediate problems (#316)

* Clean up tabs and cards CSS a little

* Fix project page; Remove bad styles from search

* Yeet and flatten lots of styles; fix font sizes

* Restyle search; fix moderation

* Fix profile page

* Remove injected SCSS entirely

* Fix a mobile layout overflowing

* Apiv2-support fixes (#320)

* Fix member user_id -> user.id

* Fix incorrect report redirect

* Change theme switcher from button to multiselect

* Fix remaining items

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

* Fix bugs

* Full mobile support, update create project page, fix various bugs

* New Dark Mode brand colors (#325)

* Use "color-brand-hover" for auth-prompt when hover over

* New dark mode brand colors

* Fix new version featured bug

* Remove old home page, other fixes

* Fix error when merging

* Fix prettier error :(

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: venashial <venashial.levo@aleeas.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
Co-authored-by: Emma <emmaffle@modrinth.com>
Co-authored-by: Johan Novak <wickedtree@wickedtree.codes>
Co-authored-by: Jai A <jaiagr@pm.me>
Co-authored-by: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com>
Co-authored-by: Mikhail Oleynikov <contact@falseresync.ru>
Co-authored-by: Christian Popov <30723811+Xrey274@users.noreply.github.com>
2022-01-09 15:19:27 -07:00

324 lines
8.2 KiB
SCSS

html {
@extend .light-mode;
}
.light-mode {
--color-icon: #6b7280;
--color-text: hsl(221, 39%, 11%);
--color-text-secondary: hsl(220, 9%, 46%);
--color-text-inactive: hsl(215, 14%, 34%);
--color-text-dark: #1a202c;
--color-heading: #2c313d;
--color-bg: hsl(220, 13%, 91%);
--color-raised-bg: #ffffff;
--color-divider: hsl(220, 13%, 91%);
--color-divider-dark: #c8cdd3;
--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-light: #30b27b;
--color-brand-inverted: #ffffff;
--color-brand-2: #30b27b;
--color-brand-3: #30b27b;
--color-brand-disabled: #e2e8f0;
--color-button-bg: #e6e7eb;
--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: #eceef0;
--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-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);
--color-code-bg: var(--color-bg);
--color-code-text: var(--color-text-dark);
--color-ad: #d6e6f9;
--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-link: #2089ff;
--color-badge-gray-text: #646161;
--color-badge-gray-bg: #c8c1c1;
--color-badge-red-text: #6e1931;
--color-badge-red-bg: #db3162;
--color-badge-green-text: #184e38;
--color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #755920;
--color-badge-yellow-bg: #f7bb43;
--color-block-quote: var(--color-tooltip-bg);
--color-header-underline: var(--color-tooltip-text);
--color-hr: var(--color-text);
--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);
}
.dark-mode {
--color-icon: #96a2b0;
--color-text: #b0bac5;
--color-text-inactive: #929aa3;
--color-text-dark: #ecf9fb;
--color-heading: #c4cfdd;
--color-bg: #16181c;
--color-raised-bg: #26292f;
--color-divider: #474b54;
--color-divider-dark: #646c75;
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #1bd96a;
--color-brand-hover: #30b366;
--color-brand-active: #55f5ae;
--color-brand-light: #30b27b;
--color-brand-inverted: #000;
--color-brand-2: #30b27b;
--color-brand-3: #30b27b;
--color-brand-disabled: #414146;
--color-button-bg: #3e434b;
--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-text-disabled: #797979;
--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-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-code-bg: var(--color-button-bg);
--color-code-text: var(--color-text-dark);
--color-ad: #2c323a;
--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: #4793d9;
--color-badge-gray-bg: #646161;
--color-badge-gray-text: #c8c1c1;
--color-badge-red-text: #bd1a48;
--color-badge-red-bg: #db3162;
--color-badge-green-text: #1ebb7b;
--color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #755920;
--color-badge-yellow-bg: #f7bb43;
--color-block-quote: var(--color-code-bg);
--color-header-underline: var(--color-tooltip-text);
--color-hr: var(--color-text);
--color-table-border: #4f5864;
--color-table-alternate-row: #262a30;
}
.oled-mode {
@extend .dark-mode;
--color-bg: #000000;
--color-raised-bg: #101013;
--color-button-bg: #222329;
--color-button-bg-hover: #2d2d32;
--color-button-bg-active: #3c3c40;
}
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-family: var(--font-standard);
font-size: 16px;
font-weight: var(--font-weight-medium);
margin: 0;
padding: 0;
// Rounding sizes
--size-rounded-xs: 0.5rem;
--size-rounded-sm: 0.75rem;
--size-rounded-md: 1rem;
--size-rounded-lg: 1.25rem;
--size-rounded-max: 999999999px;
--size-rounded-card: 1rem;
--size-rounded-icon: 1rem;
--size-rounded-control: 0.25rem;
--size-rounded-tooltip: 0.25rem;
--size-navbar-height: 3.5rem;
--spacing-card-lg: 1.5rem;
--spacing-card-bg: 1rem;
--spacing-card-md: 0.75rem;
--spacing-card-sm: 0.5rem;
// Font Sizes
--font-size-xxs: 0.625rem; //10px
--font-size-xs: 0.75rem; //12px
--font-size-sm: 0.875rem; //14px
--font-size-nm: 1rem; //16px
--font-size-md: 1.125rem; //18px
--font-size-lg: 1.25rem; //20px
--font-size-xl: 1.5rem; //24px
--font-size-2xl: 2rem; //32px
--font-size-3xl: 3rem; //48px
// Font Weights
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-text: var(--font-weight-medium);
--font-weight-heading: var(--font-weight-extrabold);
--font-weight-title: var(--font-weight-extrabold);
}
svg {
height: 24px;
width: 24px;
}
a {
color: inherit;
text-decoration: none;
}
h2 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--color-text-dark);
}
h3 {
margin-top: 0.5rem;
margin-bottom: 0;
color: var(--color-text-dark);
}
button {
cursor: pointer;
@extend .button;
}
input {
border-radius: 2rem;
}
input,
textarea {
background: var(--color-button-bg);
color: var(--color-text);
padding: 0.5rem 1rem;
border: 2px solid transparent;
&:focus,
&:hover:not([disabled]) {
background: var(--color-button-bg-hover);
color: var(--color-text);
outline: none;
&::placeholder {
color: var(--color-text);
}
}
&:focus {
background: var(--color-raised-bg);
border-color: var(--color-divider-dark);
}
&::placeholder {
color: var(--color-color-text);
}
&:disabled,
&[disabled] {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
}
.ea-content {
background: var(--color-ad) !important;
border-radius: var(--size-rounded-card) !important;
margin: 0 !important;
box-shadow: var(--shadow-faint) !important;
}
.ea-callout {
margin: 0.25rem 0 !important;
padding: 0 !important;
}
button {
padding: 0.5rem 0;
outline: none;
color: var(--color-button-text);
background-color: var(--color-button-bg);
border: none;
border-radius: var(--size-rounded-control);
&:focus,
&: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);
}
}
// @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';