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

App redesign (#2946)

Browse Source 
* Start of app redesign

* format

* continue progress

* Content page nearly done

* Fix recursion issues with content page

* Fix update all alignment

* Discover page progress

* Settings progress

* Removed unlocked-size hack that breaks web

* Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues

* Ads + run prettier

* Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor

* fix ads not hiding when plus log in

* rev lockfile changes/conflicts

* Fix sign in page

* Add generated

* (mostly) Data driven search

* Fix search mobile issue

* profile fixes

* Project versions page, fix typescript on UI lib and misc fixes

* Remove unused gallery component

* Fix linkfunction err

* Search filter controls at top, localization for locked filters

* Fix provided filter names

* Fix navigating from instance browse to main browse

* Friends frontend (#2995)

* Friends system frontend

* (almost) finish frontend

* finish friends, fix lint

* Fix lint

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

* Refresh macOS app icon

* Update web search UI more

* Fix link opens

* Fix frontend build

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
This commit is contained in:
Prospector
2024-12-11 19:54:18 -08:00
committed by GitHub
parent 6ec1dcf088
commit c39bb78e38
257 changed files with 15713 additions and 9475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
packages/assets/styles/classes.scss
View File

@@ -494,6 +494,14 @@ a,
}
}
.btn-dropdown-animation svg:last-child {
transition: transform 0.125s ease-in-out;
}
.v-popper--shown .btn-dropdown-animation svg:last-child {
transform: rotate(180deg);
}
.btn-group {
display: flex;
grid-gap: var(--gap-sm);
@@ -772,7 +780,7 @@ a,
box-sizing: content-box;
min-height: 32px;
height: 32px;
width: 52px;
min-width: 52px;
max-width: 52px;
border-radius: var(--radius-max);
display: inline-block;
@@ -818,15 +826,17 @@ a,
.v-popper__inner {
background: var(--color-tooltip-bg) !important;
color: var(--color-tooltip-text) !important;
padding: 5px 10px 4px !important;
padding: 0.5rem 0.5rem !important;
border-radius: var(--radius-sm) !important;
box-shadow: var(--shadow-floating) !important;
font-size: 0.9rem !important;
filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
font-size: 0.9rem;
font-weight: bold;
line-height: 1;
}
.v-popper__arrow-outer,
.v-popper__arrow-inner {
border-color: var(--color-tooltip-bg) !important;
border-color: var(--color-tooltip-bg);
}
}
@@ -834,7 +844,8 @@ a,
.markdown-body {
h1:first-child {
margin-top: 0;
margin-block-start: 0;
padding-block-start: 0;
}
blockquote,
@@ -860,10 +871,16 @@ a,
display: block;
}
h1,
h2,
h3 {
color: var(--color-contrast);
}
h1,
h2 {
padding: 10px 0 5px;
border-bottom: 1px solid var(--color-gray);
border-bottom: 1px solid var(--color-divider);
}
h1,
@@ -882,6 +899,7 @@ a,
padding: 0 1em;
color: var(--color-base);
border-left: 0.25em solid var(--color-button-bg);
margin-inline: 0;
}
a {
@@ -900,6 +918,10 @@ a,
}
}
a:active > img {
scale: 0.98;
}
img {
max-width: 100%;
height: auto;
@@ -1182,3 +1204,119 @@ select {
border-top-left-radius: var(--radius-md) !important;
border-top-right-radius: var(--radius-md) !important;
}
.v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
.v-popper__inner {
border: 1px solid var(--color-button-bg);
padding: var(--gap-sm);
width: fit-content;
border-radius: var(--radius-md);
background-color: var(--color-raised-bg);
box-shadow: var(--shadow-floating);
}
.v-popper__arrow-outer {
border-color: var(--color-button-bg);
}
.v-popper__arrow-inner {
border-color: var(--color-raised-bg);
}
}
.v-popper__popper[data-popper-placement='bottom-end'] .v-popper__wrapper {
transform-origin: top right;
}
.v-popper__popper[data-popper-placement='top-end'] .v-popper__wrapper {
transform-origin: bottom right;
}
.v-popper__popper[data-popper-placement='bottom-start'] .v-popper__wrapper {
transform-origin: top left;
}
.v-popper__popper[data-popper-placement='top-start'] .v-popper__wrapper {
transform-origin: bottom left;
}
.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
transform: scale(0.85);
opacity: 0;
}
.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
transform: scale(1);
opacity: 1;
transition:
transform 0.125s ease-in-out,
opacity 0.125s ease-in-out;
}
.v-popper__popper.v-popper__popper--hide-from .v-popper__wrapper {
transform: none;
opacity: 1;
transition: transform 0.0625s;
}
.v-popper__popper.v-popper__popper--hide-to .v-popper__wrapper {
//transform: scale(.9);
}
.preview-radio {
width: 100% !important;
border-radius: var(--radius-md);
padding: 0;
overflow: hidden;
border: 1px solid var(--color-divider);
background-color: var(--color-button-bg);
color: var(--color-base);
display: flex;
flex-direction: column;
outline: 2px solid transparent;
&.selected {
color: var(--color-contrast);
.label {
.radio {
color: var(--color-brand);
}
.theme-icon {
color: var(--color-text);
}
}
}
.preview {
background-color: var(--color-bg);
padding: 1.5rem;
outline: 2px solid transparent;
width: 100%;
.example-card {
margin: 0;
padding: 1rem;
outline: 2px solid transparent;
min-height: 0;
}
}
.label {
display: flex;
align-items: center;
text-align: left;
flex-grow: 1;
padding: var(--gap-md) var(--gap-lg);
.radio {
margin-right: 0.5rem;
}
.theme-icon {
color: var(--color-secondary);
margin-left: 0.25rem;
}
}
}

217
packages/assets/styles/variables.scss
View File

@@ -1,39 +1,13 @@
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,
:root[data-theme='light'] {
.light-properties {
--color-bg: #e5e7eb;
--color-raised-bg: #ffffff;
--color-super-raised-bg: #e9e9e9;
--color-button-bg: hsl(220, 13%, 91%);
--color-scrollbar: #96a2b0;
--color-divider: #babfc5;
--color-divider-dark: #c8cdd3;
--color-base: hsl(221, 39%, 11%);
--color-secondary: #6b7280;
--color-contrast: #1a202c;
@@ -53,6 +27,12 @@ html {
--color-purple-highlight: rgba(142, 50, 243, 0.25);
--color-gray-highlight: rgba(89, 91, 97, 0.25);
--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-brand: var(--color-green);
--color-brand-highlight: var(--color-green-highlight);
--color-brand-shadow: rgba(0, 175, 92, 0.7);
@@ -69,6 +49,52 @@ html {
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;
--brand-gradient-bg: linear-gradient(
0deg,
rgba(68, 182, 138, 0.175) 0%,
rgba(58, 250, 112, 0.125) 100%
);
--brand-gradient-button: rgba(255, 255, 255, 0.5);
--brand-gradient-border: rgba(32, 64, 32, 0.15);
--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);
--color-button-bg-selected: var(--color-brand);
--color-button-text-selected: var(--color-accent-contrast);
--loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #00af5c 100%);
}
html {
@extend .light-properties;
--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(--dark-color-contrast);
--color-tooltip-bg: #000;
--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 {
@extend .light-properties;
}
.dark-mode,
@@ -80,6 +106,9 @@ html {
--color-button-bg: hsl(222, 13%, 30%);
--color-scrollbar: var(--color-button-bg);
--color-divider: var(--color-button-bg);
--color-divider-dark: #646c75;
--color-base: var(--dark-color-base);
--color-secondary: #96a2b0;
--color-contrast: var(--dark-color-contrast);
@@ -99,6 +128,12 @@ html {
--color-purple-highlight: rgba(199, 138, 255, 0.25);
--color-gray-highlight: rgba(159, 164, 179, 0.25);
--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: var(--color-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
@@ -113,6 +148,16 @@ html {
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;
--brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.2) 0%, rgba(55, 137, 73, 0.1) 100%);
--brand-gradient-button: rgba(255, 255, 255, 0.08);
--brand-gradient-border: rgba(155, 255, 160, 0.08);
--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);
--color-button-bg-selected: var(--color-brand-highlight);
--color-button-text-selected: var(--color-brand);
--loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #1ffa9a 100%);
}
.oled-mode {
@@ -122,4 +167,116 @@ html {
--color-button-bg: #222329;
--color-ad: #0d1828;
--brand-gradient-bg: linear-gradient(
0deg,
rgba(22, 66, 51, 0.3) 0%,
rgba(55, 137, 73, 0.15) 100%
);
}
.experimental-styles-within {
// Reset deprecated properties
--color-icon: initial !important;
--color-text: initial !important;
--color-text-inactive: initial !important;
--color-text-dark: initial !important;
--color-heading: initial !important;
--color-text-inverted: initial !important;
--color-bg-inverted: initial !important;
--color-brand: var(--color-green) !important;
--color-brand-inverted: initial !important;
--tab-underline-hovered: initial !important;
--color-button-text: initial !important;
--color-button-bg-hover: initial !important;
--color-button-text-hover: initial !important;
--color-button-bg-active: initial !important;
--color-button-text-active: initial !important;
--color-grey-link: inherit !important;
--color-grey-link-hover: inherit !important; // DEPRECATED, use filters in future
--color-grey-link-active: inherit !important; // DEPRECATED, use filters in future
--color-link: var(--color-blue) !important;
--color-link-hover: var(--color-blue) !important; // DEPRECATED, use filters in future
--color-link-active: var(--color-blue) !important; // DEPRECATED, use filters in future
}
.light-experiments {
--color-bg: #ebebeb;
--color-raised-bg: #ffffff;
--color-button-bg: #f5f5f5;
--color-base: #2c2e31;
--color-secondary: #484d54;
--color-accent-contrast: #ffffff;
--color-platform-fabric: #8a7b71;
--color-platform-quilt: #8b61b4;
--color-platform-forge: #5b6197;
--color-platform-neoforge: #dc895c;
--color-platform-liteloader: #4c90de;
--color-platform-bukkit: #e78362;
--color-platform-bungeecord: #c69e39;
--color-platform-folia: #6aa54f;
--color-platform-paper: #e67e7e;
--color-platform-purpur: #7763a3;
--color-platform-spigot: #cd7a21;
--color-platform-velocity: #4b98b0;
--color-platform-waterfall: #5f83cb;
--color-platform-sponge: #c49528;
--color-button-border: rgba(161, 161, 161, 0.35);
}
.light-mode,
.light {
.experimental-styles-within,
&.experimental-styles-within {
@extend .light-experiments;
}
}
.experimental-styles-within {
.light-mode,
.light {
@extend .light-experiments;
}
}
.dark-experiments {
--color-button-bg: #33363d;
--color-platform-fabric: #dbb69b;
--color-platform-quilt: #c796f9;
--color-platform-forge: #959eef;
--color-platform-neoforge: #f99e6b;
--color-platform-liteloader: #7ab0ee;
--color-platform-bukkit: #f6af7b;
--color-platform-bungeecord: #d2c080;
--color-platform-folia: #a5e388;
--color-platform-paper: #eeaaaa;
--color-platform-purpur: #c3abf7;
--color-platform-spigot: #f1cc84;
--color-platform-velocity: #83d5ef;
--color-platform-waterfall: #78a4fb;
--color-platform-sponge: #f9e580;
--color-button-border: rgba(193, 190, 209, 0.12);
}
.dark-mode,
.dark {
.experimental-styles-within,
&.experimental-styles-within {
@extend .dark-experiments;
}
}
.experimental-styles-within {
.dark-mode,
.dark {
@extend .dark-experiments;
}
}