2d416d491c
* 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>
124 lines
3.8 KiB
SCSS
124 lines
3.8 KiB
SCSS
html {
|
|
@extend .light-mode;
|
|
--dark-color-base: #b0bac5;
|
|
--dark-color-contrast: #ecf9fb;
|
|
|
|
--gap-xs: 0.25rem;
|
|
--gap-sm: 0.5rem;
|
|
--gap-md: 0.75rem;
|
|
--gap-lg: 1rem;
|
|
--gap-xl: 1.5rem;
|
|
|
|
--radius-xs: 0.25rem;
|
|
--radius-sm: 0.5rem;
|
|
--radius-md: 0.75rem;
|
|
--radius-lg: 1rem;
|
|
--radius-xl: 1.25rem;
|
|
--radius-max: 999999999px;
|
|
|
|
--color-tooltip-text: var(--color-base);
|
|
--color-tooltip-bg: var(--color-button-bg);
|
|
|
|
--color-ad: rgba(125, 75, 162, 0.2);
|
|
--color-ad-raised: rgba(190, 140, 243, 0.5);
|
|
--color-ad-contrast: black;
|
|
--color-ad-highlight: var(--color-purple);
|
|
}
|
|
|
|
.light-mode,
|
|
.light {
|
|
--color-bg: #e5e7eb;
|
|
--color-raised-bg: #ffffff;
|
|
--color-super-raised-bg: #e9e9e9;
|
|
--color-button-bg: hsl(220, 13%, 91%);
|
|
--color-scrollbar: #96a2b0;
|
|
|
|
--color-base: hsl(221, 39%, 11%);
|
|
--color-secondary: #6b7280;
|
|
--color-contrast: #1a202c;
|
|
--color-accent-contrast: #ffffff;
|
|
|
|
--color-red: #cb2245;
|
|
--color-orange: #e08325;
|
|
--color-green: #00af5c;
|
|
--color-blue: #1f68c0;
|
|
--color-purple: #8e32f3;
|
|
--color-gray: #595b61;
|
|
|
|
--color-red-highlight: rgba(203, 34, 69, 0.25);
|
|
--color-orange-highlight: rgba(224, 131, 37, 0.25);
|
|
--color-green-highlight: rgba(0, 175, 92, 0.25);
|
|
--color-blue-highlight: rgba(31, 104, 192, 0.25);
|
|
--color-purple-highlight: rgba(142, 50, 243, 0.25);
|
|
--color-gray-highlight: rgba(89, 91, 97, 0.25);
|
|
|
|
--color-brand: var(--color-green);
|
|
--color-brand-highlight: var(--color-green-highlight);
|
|
--color-brand-shadow: rgba(0, 175, 92, 0.7);
|
|
|
|
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 91%, 0.1);
|
|
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 91%, 0.05);
|
|
--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 91%, 0.15);
|
|
|
|
--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,
|
|
.dark {
|
|
--color-bg: #16181c;
|
|
--color-raised-bg: #26292f;
|
|
--color-super-raised-bg: #40434a;
|
|
--color-button-bg: hsl(222, 13%, 30%);
|
|
--color-scrollbar: var(--color-button-bg);
|
|
|
|
--color-base: var(--dark-color-base);
|
|
--color-secondary: #96a2b0;
|
|
--color-contrast: var(--dark-color-contrast);
|
|
--color-accent-contrast: #000000;
|
|
|
|
--color-red: #ff496e;
|
|
--color-orange: #ffa347;
|
|
--color-green: #1bd96a;
|
|
--color-blue: #4f9cff;
|
|
--color-purple: #c78aff;
|
|
--color-gray: #9fa4b3;
|
|
|
|
--color-red-highlight: rgba(255, 73, 110, 0.25);
|
|
--color-orange-highlight: rgba(255, 163, 71, 0.25);
|
|
--color-green-highlight: rgba(27, 217, 106, 0.25);
|
|
--color-blue-highlight: rgba(79, 156, 255, 0.25);
|
|
--color-purple-highlight: rgba(199, 138, 255, 0.25);
|
|
--color-gray-highlight: rgba(159, 164, 179, 0.25);
|
|
|
|
--color-brand: var(--color-green);
|
|
--color-brand-highlight: rgba(27, 217, 106, 0.25);
|
|
--color-brand-shadow: rgba(27, 217, 106, 0.7);
|
|
|
|
--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 {
|
|
@extend .dark-mode;
|
|
--color-bg: #000000;
|
|
--color-raised-bg: #101013;
|
|
--color-button-bg: #222329;
|
|
|
|
--color-ad: #0d1828;
|
|
}
|