mirror of
https://github.com/modrinth/code.git
synced 2026-07-31 21:26:40 +00:00
Tailwind wip
This commit is contained in:
Prospector
@@ -542,7 +542,7 @@ function handleAuxClick(e) {
|
||||
></div>
|
||||
<div
|
||||
v-if="criticalErrorMessage"
|
||||
class="m-6 mb-0 flex flex-col border-red bg-bg-red rounded-2xl border-2 border-solid p-4 gap-1 font-semibold text-contrast"
|
||||
class="m-6 mb-0 flex flex-col border-red bg-bg-red rounded-2xl border-2 p-4 gap-1 font-semibold text-contrast"
|
||||
>
|
||||
<h1 class="m-0 text-lg font-extrabold">{{ criticalErrorMessage.header }}</h1>
|
||||
<div
|
||||
@@ -559,7 +559,7 @@ function handleAuxClick(e) {
|
||||
</RouterView>
|
||||
</div>
|
||||
<div
|
||||
class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid overflow-auto"
|
||||
class="app-sidebar mt-px shrink-0 flex flex-col border-l-[1px] border-[--brand-gradient-border] overflow-auto"
|
||||
:class="{ 'has-plus': hasPlus }"
|
||||
>
|
||||
<div
|
||||
@@ -568,13 +568,13 @@ function handleAuxClick(e) {
|
||||
>
|
||||
<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
|
||||
<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
|
||||
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
|
||||
<div class="p-4 border-b-[1px] border-[--brand-gradient-border] border-solid">
|
||||
<h3 class="text-lg m-0">Playing as</h3>
|
||||
<suspense>
|
||||
<AccountsCard ref="accounts" mode="small" />
|
||||
</suspense>
|
||||
</div>
|
||||
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
|
||||
<div class="p-4 border-b-[1px] border-[--brand-gradient-border] border-solid">
|
||||
<suspense>
|
||||
<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
|
||||
</suspense>
|
||||
@@ -592,7 +592,7 @@ function handleAuxClick(e) {
|
||||
:src="item.thumbnail"
|
||||
alt="News thumbnail"
|
||||
aria-hidden="true"
|
||||
class="w-full aspect-[3/1] object-cover rounded-2xl border-[1px] border-solid border-[--brand-gradient-border]"
|
||||
class="w-full aspect-[3/1] object-cover rounded-2xl border-[1px] border-[--brand-gradient-border]"
|
||||
/>
|
||||
<h4 class="mt-2 mb-0 text-sm leading-none text-contrast font-semibold">
|
||||
{{ item.title }}
|
||||
@@ -604,7 +604,7 @@ function handleAuxClick(e) {
|
||||
</a>
|
||||
<hr
|
||||
v-if="index !== news.length - 1"
|
||||
class="h-px my-[-2px] mx-4 border-0 m-0 bg-[--brand-gradient-border]"
|
||||
class="h-px my-[-2px] mx-4 m-0 bg-[--brand-gradient-border]"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
@@ -740,7 +740,7 @@ function handleAuxClick(e) {
|
||||
bottom: 0;
|
||||
height: calc(100vh - var(--top-bar-height));
|
||||
background-color: var(--color-bg);
|
||||
border-top-left-radius: var(--radius-xl);
|
||||
border-top-left-radius: 1.25rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 0px;
|
||||
@@ -752,7 +752,7 @@ function handleAuxClick(e) {
|
||||
}
|
||||
|
||||
.loading-indicator-container {
|
||||
border-top-left-radius: var(--radius-xl);
|
||||
border-top-left-radius: 1.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -810,7 +810,7 @@ function handleAuxClick(e) {
|
||||
top: var(--top-bar-height);
|
||||
right: calc(-1 * var(--left-bar-width));
|
||||
bottom: calc(-1 * var(--left-bar-width));
|
||||
border-radius: var(--radius-xl);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow:
|
||||
1px 1px 15px rgba(0, 0, 0, 0.2) inset,
|
||||
inset 1px 1px 1px rgba(255, 255, 255, 0.23);
|
||||
|
||||
@@ -89,7 +89,7 @@ input {
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
background-color: var(--color-bg);
|
||||
@@ -132,7 +132,7 @@ input {
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
border: 5px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
@@ -182,14 +182,14 @@ onUnmounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.selected {
|
||||
background: var(--color-brand-highlight);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
color: var(--color-contrast);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.logged-out {
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@@ -305,7 +305,7 @@ onUnmounted(() => {
|
||||
gap: 0.5rem;
|
||||
color: var(--color-base);
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: left;
|
||||
@@ -338,7 +338,7 @@ onUnmounted(() => {
|
||||
|
||||
.qr-code {
|
||||
background-color: white !important;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@@ -367,7 +367,7 @@ onUnmounted(() => {
|
||||
|
||||
.code {
|
||||
background-color: var(--color-bg);
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
border: solid 1px var(--color-button-bg);
|
||||
font-family: var(--mono-font);
|
||||
letter-spacing: var(--gap-md);
|
||||
|
||||
@@ -112,7 +112,7 @@ onBeforeUnmount(() => {
|
||||
<style lang="scss" scoped>
|
||||
.context-menu {
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: var(--shadow-floating);
|
||||
border: 1px solid var(--color-button-bg);
|
||||
margin: 0;
|
||||
@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
gap: var(--gap-sm);
|
||||
padding: var(--gap-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
|
||||
@@ -303,7 +303,7 @@ async function copyToClipboard(text) {
|
||||
<template v-if="hasDebugInfo">
|
||||
<div class="bg-button-bg rounded-xl mt-2 overflow-clip">
|
||||
<button
|
||||
class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
|
||||
class="flex items-center justify-between w-full bg-transparent px-4 py-3 cursor-pointer"
|
||||
@click="errorCollapsed = !errorCollapsed"
|
||||
>
|
||||
<span class="text-contrast font-extrabold m-0">Debug information:</span>
|
||||
@@ -348,7 +348,7 @@ async function copyToClipboard(text) {
|
||||
padding: var(--gap-lg);
|
||||
background-color: var(--color-orange-bg);
|
||||
border: 2px solid var(--color-orange);
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -601,7 +601,7 @@ const next = async () => {
|
||||
.path-selection {
|
||||
padding: var(--gap-xl);
|
||||
background-color: var(--color-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap-md);
|
||||
|
||||
@@ -19,7 +19,7 @@ defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
|
||||
<div class="flex justify-between items-center border-b border-divider pb-4">
|
||||
<router-link
|
||||
:to="`/instance/${encodeURIComponent(instance.path)}`"
|
||||
tabindex="-1"
|
||||
|
||||
@@ -21,7 +21,7 @@ defineProps({
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -96,13 +96,13 @@ const toTransparent = computed(() => {
|
||||
</p>
|
||||
<div class="flex items-center gap-2 text-sm text-secondary font-semibold mt-auto">
|
||||
<div
|
||||
class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
|
||||
class="flex items-center gap-1 pr-2 border-r-[1px] border-button-border"
|
||||
>
|
||||
<DownloadIcon />
|
||||
{{ formatNumber(project.downloads) }}
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
|
||||
class="flex items-center gap-1 pr-2 border-r-[1px] border-button-border"
|
||||
>
|
||||
<HeartIcon />
|
||||
{{ formatNumber(project.follows) }}
|
||||
|
||||
@@ -289,7 +289,7 @@ onBeforeUnmount(() => {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--color-button-bg);
|
||||
padding: var(--gap-sm) var(--gap-lg);
|
||||
}
|
||||
|
||||
@@ -177,7 +177,7 @@ onUnmounted(() => {
|
||||
<Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
|
||||
<span
|
||||
v-if="friend.online"
|
||||
class="bottom-1 right-0 absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
|
||||
class="bottom-1 right-0 absolute w-3 h-3 bg-brand border-2 border-black rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ friend.username }}</div>
|
||||
@@ -346,7 +346,7 @@ onUnmounted(() => {
|
||||
<Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
|
||||
<span
|
||||
v-if="friend.online"
|
||||
class="bottom-1 right-0 absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
|
||||
class="bottom-1 right-0 absolute w-3 h-3 bg-brand border-2 border-black rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
|
||||
@@ -118,7 +118,7 @@ const install = async () => {
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
border-collapse: collapse;
|
||||
box-shadow: 0 0 0 1px var(--color-button-bg);
|
||||
}
|
||||
@@ -132,12 +132,12 @@ th {
|
||||
}
|
||||
|
||||
th:first-child {
|
||||
border-top-left-radius: var(--radius-lg);
|
||||
border-top-left-radius: 1rem;
|
||||
border-right: 1px solid var(--color-button-bg);
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-top-right-radius: var(--radius-lg);
|
||||
border-top-right-radius: 1rem;
|
||||
}
|
||||
|
||||
td {
|
||||
|
||||
@@ -220,7 +220,7 @@ const messages = defineMessages({
|
||||
/>
|
||||
<div class="absolute top-0 right-0 m-2">
|
||||
<div
|
||||
class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
|
||||
class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-[1px] hovering-icon-shadow"
|
||||
>
|
||||
<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
|
||||
@@ -504,7 +504,7 @@ const messages = defineMessages({
|
||||
<UnplugIcon class="top-[3px] relative" /> {{ formatMessage(messages.noConnection) }}
|
||||
</div>
|
||||
<div v-else-if="!modpackProject && instance.linked_data && !fetching" class="mb-2">
|
||||
<p class="text-brand-red font-medium mt-0">
|
||||
<p class="text-red font-medium mt-0">
|
||||
<IssuesIcon class="top-[3px] relative" /> {{ formatMessage(messages.noModpackFound) }}
|
||||
</p>
|
||||
<p>{{ formatMessage(messages.debugInformation) }}</p>
|
||||
@@ -522,7 +522,7 @@ const messages = defineMessages({
|
||||
<Avatar v-if="modpackProject" :src="modpackProject?.icon_url" size="40px" />
|
||||
<div
|
||||
v-else
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 [&_svg]:h-full [&_svg]:w-full"
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-[1px] border-button-border p-2 [&_svg]:h-full [&_svg]:w-full"
|
||||
>
|
||||
<div v-if="!!currentLoaderIcon" class="contents" v-html="currentLoaderIcon" />
|
||||
<WrenchIcon v-else />
|
||||
@@ -660,7 +660,7 @@ const messages = defineMessages({
|
||||
class="mt-2"
|
||||
@change="(value) => (loaderVersionIndex = value.index)"
|
||||
/>
|
||||
<div v-else class="mt-2 text-brand-red flex gap-2 items-center">
|
||||
<div v-else class="mt-2 text-red flex gap-2 items-center">
|
||||
<IssuesIcon />
|
||||
{{ formatMessage(messages.noLoaderVersions, { loader: loader, version: gameVersion }) }}
|
||||
</div>
|
||||
|
||||
@@ -119,18 +119,18 @@ const messages = defineMessages({
|
||||
<template v-if="!overrideJavaInstall">
|
||||
<div class="flex my-2 items-center gap-2 font-semibold">
|
||||
<template v-if="javaInstall">
|
||||
<CheckCircleIcon class="text-brand-green h-4 w-4" />
|
||||
<CheckCircleIcon class="text-green h-4 w-4" />
|
||||
<span>Using default Java {{ optimalJava.major_version }} installation:</span>
|
||||
</template>
|
||||
<template v-else-if="optimalJava">
|
||||
<XCircleIcon class="text-brand-red h-5 w-5" />
|
||||
<XCircleIcon class="text-red h-5 w-5" />
|
||||
<span
|
||||
>Could not find a default Java {{ optimalJava.major_version }} installation. Please set
|
||||
one below:</span
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<XCircleIcon class="text-brand-red h-5 w-5" />
|
||||
<XCircleIcon class="text-red h-5 w-5" />
|
||||
<span
|
||||
>Could not automatically determine a Java installation to use. Please set one
|
||||
below:</span
|
||||
|
||||
@@ -384,7 +384,7 @@ await refreshSearch()
|
||||
<Teleport v-if="filters" to="#sidebar-teleport-target">
|
||||
<div
|
||||
v-if="instance"
|
||||
class="border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
|
||||
class="border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
|
||||
>
|
||||
<Checkbox
|
||||
v-model="instanceHideInstalled"
|
||||
@@ -402,7 +402,7 @@ await refreshSearch()
|
||||
v-model:overridden-provided-filter-types="overriddenProvidedFilterTypes"
|
||||
:provided-filters="instanceFilters"
|
||||
:filter-type="filter"
|
||||
class="border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
|
||||
class="border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
|
||||
button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
|
||||
content-class="mb-3"
|
||||
inner-panel-class="ml-2 mr-3"
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<template #summary> </template>
|
||||
<template #stats>
|
||||
<div
|
||||
class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"
|
||||
class="flex items-center gap-2 font-semibold transform capitalize border-divider pr-4 md:border-r"
|
||||
>
|
||||
<GameIcon class="h-6 w-6 text-secondary" />
|
||||
{{ instance.loader }} {{ instance.game_version }}
|
||||
|
||||
@@ -505,7 +505,7 @@ onUnmounted(() => {
|
||||
font-family: var(--mono-font);
|
||||
background-color: var(--color-accent-contrast);
|
||||
color: var(--color-contrast);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
overflow-x: auto; /* Enables horizontal scrolling */
|
||||
overflow-y: hidden; /* Disables vertical scrolling on this wrapper */
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<button
|
||||
v-for="filter in filterOptions"
|
||||
:key="`content-filter-${filter.id}`"
|
||||
:class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
|
||||
:class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-highlight-brand text-brand' : 'bg-bg-raised text-secondary'}`"
|
||||
@click="toggleArray(selectedFilters, filter.id)"
|
||||
>
|
||||
{{ filter.formattedName }}
|
||||
@@ -837,7 +837,7 @@ onUnmounted(() => {
|
||||
|
||||
.table {
|
||||
margin-block-start: 0;
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
border: 2px solid var(--color-bg);
|
||||
}
|
||||
|
||||
@@ -915,7 +915,7 @@ onUnmounted(() => {
|
||||
width: unset;
|
||||
|
||||
:deep(.selected) {
|
||||
border-radius: var(--radius-md) 0 0 var(--radius-md);
|
||||
border-radius: 0.75rem 0 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -929,17 +929,17 @@ onUnmounted(() => {
|
||||
|
||||
:deep(.animated-dropdown) {
|
||||
.render-down {
|
||||
border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
|
||||
border-radius: 0.75rem 0 0 0.75rem !important;
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
margin-top: 0.25rem;
|
||||
width: unset;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.options {
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -259,7 +259,7 @@ document.addEventListener('keypress', keyListener)
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: calc(100vw - 2 * var(--gap-lg));
|
||||
max-height: calc(100vh - 2 * var(--gap-lg));
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
|
||||
&.zoomed-in {
|
||||
object-fit: cover;
|
||||
@@ -318,7 +318,7 @@ document.addEventListener('keypress', keyListener)
|
||||
.controls {
|
||||
background-color: var(--color-raised-bg);
|
||||
padding: var(--gap-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
transition:
|
||||
opacity 0.25s ease-in-out,
|
||||
transform 0.25s ease-in-out;
|
||||
|
||||
@@ -446,6 +446,6 @@ const handleOptionsClick = (args) => {
|
||||
}
|
||||
|
||||
.project-sidebar-section {
|
||||
@apply p-4 flex flex-col gap-2 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid;
|
||||
@apply p-4 flex flex-col gap-2 border-b-[1px] border-[--brand-gradient-border] border-solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -459,7 +459,7 @@ await refreshDisplayDependencies()
|
||||
vertical-align: center;
|
||||
align-items: center;
|
||||
cursor: not-allowed;
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
|
||||
.text {
|
||||
filter: brightness(0.5);
|
||||
|
||||
@@ -7,6 +7,7 @@ import { $fetch } from "ofetch";
|
||||
import { globIterate } from "glob";
|
||||
import { match as matchLocale } from "@formatjs/intl-localematcher";
|
||||
import { consola } from "consola";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
const STAGING_API_URL = "https://staging-api.modrinth.com/v2/";
|
||||
|
||||
@@ -107,6 +108,7 @@ export default defineNuxtConfig({
|
||||
],
|
||||
},
|
||||
}),
|
||||
tailwindcss(),
|
||||
],
|
||||
},
|
||||
hooks: {
|
||||
@@ -380,7 +382,7 @@ export default defineNuxtConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
modules: ["@vintl/nuxt", "@pinia/nuxt"],
|
||||
modules: ["@vintl/nuxt", "@pinia/nuxt", "floating-vue/nuxt"],
|
||||
vintl: {
|
||||
defaultLocale: "en-US",
|
||||
locales: [
|
||||
@@ -430,13 +432,7 @@ export default defineNuxtConfig({
|
||||
devtools: {
|
||||
enabled: true,
|
||||
},
|
||||
css: ["~/assets/styles/tailwind.css"],
|
||||
postcss: {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
},
|
||||
css: ["@modrinth/assets/styles/tailwind.css"],
|
||||
routeRules: {
|
||||
"/**": {
|
||||
headers: {
|
||||
|
||||
+27
-28
@@ -13,57 +13,56 @@
|
||||
"intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@formatjs/cli": "^6.2.12",
|
||||
"@nuxt/devtools": "^1.3.3",
|
||||
"@types/dompurify": "^3.0.5",
|
||||
"@types/node": "^20.1.0",
|
||||
"@vintl/compact-number": "^2.0.5",
|
||||
"@formatjs/cli": "^6.7.2",
|
||||
"@nuxt/devtools": "^1.7.0",
|
||||
"@types/dompurify": "^3.2.0",
|
||||
"@types/node": "^20.19.0",
|
||||
"@vintl/compact-number": "^2.0.7",
|
||||
"@vintl/how-ago": "^3.0.1",
|
||||
"@vintl/nuxt": "^1.9.2",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"glob": "^10.2.7",
|
||||
"nuxt": "^3.14.1592",
|
||||
"postcss": "^8.4.39",
|
||||
"prettier-plugin-tailwindcss": "^0.6.5",
|
||||
"sass": "^1.58.0",
|
||||
"tailwindcss": "^3.4.4",
|
||||
"typescript": "^5.4.5",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^8.57.1",
|
||||
"glob": "^10.4.5",
|
||||
"nuxt": "^3.17.5",
|
||||
"prettier-plugin-tailwindcss": "^0.6.12",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"typescript": "^5.8.3",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue-tsc": "^2.0.24"
|
||||
"vue-tsc": "^2.2.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@formatjs/intl-localematcher": "^0.5.4",
|
||||
"@formatjs/intl-localematcher": "^0.5.10",
|
||||
"@intercom/messenger-js-sdk": "^0.0.14",
|
||||
"@ltd/j-toml": "^1.38.0",
|
||||
"@modrinth/assets": "workspace:*",
|
||||
"@modrinth/ui": "workspace:*",
|
||||
"@modrinth/utils": "workspace:*",
|
||||
"@pinia/nuxt": "^0.5.1",
|
||||
"@pinia/nuxt": "^0.5.5",
|
||||
"@tailwindcss/vite": "^4.1.10",
|
||||
"@types/three": "^0.172.0",
|
||||
"@vintl/vintl": "^4.4.1",
|
||||
"@vueuse/core": "^11.1.0",
|
||||
"ace-builds": "^1.36.2",
|
||||
"@vueuse/core": "^11.3.0",
|
||||
"ace-builds": "^1.42.0",
|
||||
"ansi-to-html": "^0.7.2",
|
||||
"dayjs": "^1.11.7",
|
||||
"dompurify": "^3.1.7",
|
||||
"dayjs": "^1.11.13",
|
||||
"dompurify": "^3.2.6",
|
||||
"floating-vue": "^5.2.2",
|
||||
"fuse.js": "^6.6.2",
|
||||
"highlight.js": "^11.7.0",
|
||||
"highlight.js": "^11.11.1",
|
||||
"iso-3166-1": "^2.1.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"jszip": "^3.10.1",
|
||||
"markdown-it": "14.1.0",
|
||||
"pathe": "^1.1.2",
|
||||
"pinia": "^2.1.7",
|
||||
"qrcode.vue": "^3.4.0",
|
||||
"semver": "^7.5.4",
|
||||
"pinia": "^2.3.1",
|
||||
"qrcode.vue": "^3.6.0",
|
||||
"semver": "^7.7.2",
|
||||
"three": "^0.172.0",
|
||||
"@types/three": "^0.172.0",
|
||||
"vue-multiselect": "3.0.0-alpha.2",
|
||||
"vue-typed-virtual-list": "^1.0.10",
|
||||
"vue3-ace-editor": "^2.2.4",
|
||||
"vue3-apexcharts": "^1.5.2",
|
||||
"xss": "^1.0.14"
|
||||
"vue3-apexcharts": "^1.8.0",
|
||||
"xss": "^1.0.15"
|
||||
},
|
||||
"web-types": "../../web-types.json"
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
<path
|
||||
d="m 367.46102,279.26375 -46.77977,46.17 -105.72023,104.32 -2.13965,2.11 -11.91992,11.76 -24.9902,-24.69 -2.20019,-2.17 -45.69,-45.13 h -0.01 l -14.64013,-14.47 -8.6499,-8.55 -25.760248,-25.44 -3.4795,-3.44 -41.06006,-40.56 a 117.65792,117.65792 0 0 1 -20.52,-27.63 c -0.5,-0.91 -0.97022,-1.83 -1.43018,-2.75 A 117.50682,117.50682 0 0 1 137.18125,80.263749 h 0.0102 c 0.37989,0.06 0.75,0.12 1.12989,0.2 a 113.60526,113.60526 0 0 1 11.91015,2.77 117.09292,117.09292 0 0 1 29.11961,12.93 q 1.4253,0.885 2.82031,1.8 a 118.17183,118.17183 0 0 1 18.46973,15.090001 l 0.3501,-0.35 0.3501,0.35 a 118.54248,118.54248 0 0 1 10.83007,-9.58 c 0.82959,-0.65 1.66993,-1.29 2.50977,-1.91 a 117.44922,117.44922 0 0 1 90.51025,-21.060001 111.92113,111.92113 0 0 1 11.91993,2.78 q 1.96507,0.55509 3.8999,1.2 c 1.04,0.34 2.08008,0.69 3.10986,1.07 a 116.42525,116.42525 0 0 1 24.39014,12.1 q 2.50488,1.63494 4.93994,3.420001 a 117.54672,117.54672 0 0 1 14.00977,178.19 z"
|
||||
fill="var(--color-brand)"
|
||||
fill="var(--color-brand, currentColor)"
|
||||
id="path10" />
|
||||
<path
|
||||
d="m 320.68125,325.43375 -105.72023,104.32 -2.13965,2.11 -11.91992,11.76 -24.9902,-24.69 -2.20019,-2.17 -45.69,-45.13 c 7.34034,-1.71 18.62012,0.64 22.75,2.68 9.79,4.83 17.84034,12.76 27.78028,17.28 a 46.138,46.138 0 0 0 28.33009,3.13 c 17.81982,-3.74 31.60986,-17.52 43.77,-31.08 12.15966,-13.57 24.58984,-28.13 41.67968,-34.42 9.01028,-3.32 18.68996,-4.07 28.35014,-3.79 z"
|
||||
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
@@ -72,7 +72,7 @@
|
||||
transform="translate(-170.30041 -66.10811)" fill="#ffb9b9"/>
|
||||
<path
|
||||
d="M698.59666,512.91906s-14.52107,35.54159-19.88626,61.18854-13.53608,60.94229-3.02582,85.97362,40.39191,98.59935,40.69972,106.53707-2.55946,15.99856,3.79071,15.75231,40.90677-11.12587,42.30963-15.95007-11.79-17.03205-11.79-17.03205L718.11733,647.30624,752.1068,580.801l24.51648,99.215,4.80184,123.82844s23.56691-7.27361,26.98824-1.04656c0,0,10.55875-14.71883,11.9-21.13057s-4.98653-128.59106-4.98653-128.59106,21.63236-139.16288,4.16937-138.4857S733.63268,473.40208,698.59666,512.91906Z"
|
||||
transform="translate(-170.30041 -66.10811)" fill="var(--color-brand)"/>
|
||||
transform="translate(-170.30041 -66.10811)" fill="var(--color-brand, currentColor)"/>
|
||||
<path
|
||||
d="M719.92877,776.02043s-16.10862,35.60315-17.63461,37.25225-12.02317,17.95548-4.08545,17.64767,26.68044-8.98427,40.47584-22.23868,31.98406-36.21877,30.335-37.74475-12.9466-5.85768-12.9466-5.85768Z"
|
||||
transform="translate(-170.30041 -66.10811)" fill="#575a89"/>
|
||||
@@ -84,7 +84,7 @@
|
||||
transform="translate(-170.30041 -66.10811)" fill="#ffb9b9"/>
|
||||
<path
|
||||
d="M767.16508,313.10863s6.84267,12.4541,13.19285,12.20785,39.1961-14.2394,40.599-19.06359,10.87963,34.55659,10.87963,34.55659L751.465,482.25016,731.86045,468.701l9.49913-83.04479,7.80153-44.8206Z"
|
||||
transform="translate(-170.30041 -66.10811)" fill="var(--color-brand)"/>
|
||||
transform="translate(-170.30041 -66.10811)" fill="var(--color-brand, currentColor)"/>
|
||||
<path
|
||||
d="M823.92139,439.69215c-3.206,6.70666-5.20835,13.70047-4.9307,20.86031.01231.31753.02462.635.05282.95187.76057,14.69329,6.17341,31.68646,8.11534,44.04443,1.40908,8.86485,1.00808,15.33551-4.1797,16.85636-12.57723,3.66758,1.83379,6.28861-46.826,22.48493s-57.15159,2.21623-57.27471-.95886,6.89116-27.29605,5.24206-28.822-23.07442,19.974-29.54772,17.04512-.73874-19.05053-.73874-19.05053,14.58264-33.954,14.27483-41.89176,22.08942-45.37466,22.08942-45.37466L745.432,326.67085s5.85768-12.9466,13.73384-14.842,14.411,2.621,14.411,2.621L760.397,343.57977l-13.90546,51.417,2.32629,18.989s16.17018-34.01561,26.7905-47.1469,33.26379-44.21805,33.26379-44.21805,5.28646-17.83738,1.2957-23.16791c-3.99136-5.34632,16.64671-6.14662,25.4463,15.77118,4.66382,11.61641,12.23581,28.93925,16.97922,45.068,4.22682,14.28851,6.22343,27.646,2.03588,35.2811C848.229,407.2371,832.1292,422.56828,823.92139,439.69215Z"
|
||||
transform="translate(-170.30041 -66.10811)" fill="#575a89"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@@ -42,8 +42,8 @@
|
||||
<path
|
||||
d="M800.57267,320.98789c-.35442-5.44445-7.22306-5.631-12.67878-5.68255s-11.97836.14321-15.0654-4.35543c-2.0401-2.973-1.65042-7.10032.035-10.28779s4.45772-5.639,7.18508-7.99742c7.04139-6.08884,14.29842-12.12936,22.7522-16.02662s18.36045-5.472,27.12788-2.3435c10.77008,3.84307,25.32927,23.62588,26.5865,34.99176s-3.28507,22.95252-10.9419,31.44586-25.18188,5.0665-36.21069,8.088c6.7049-9.48964,2.28541-26.73258-8.45572-31.164Z"
|
||||
transform="translate(-205 -193.89598)" fill="#2f2e41"/>
|
||||
<circle cx="361.7217" cy="403.5046" r="62.98931" fill="var(--color-brand)"/>
|
||||
<circle cx="361.7217" cy="403.5046" r="62.98931" fill="var(--color-brand, currentColor)"/>
|
||||
<path
|
||||
d="M524.65625,529.9355a45.15919,45.15919,0,0,1-41.25537-26.78614L383.44873,278.05757a59.83039,59.83039,0,1,1,111.87012-41.86426l72.37744,235.41211a45.07978,45.07978,0,0,1-43.04,58.33008Z"
|
||||
transform="translate(-205 -193.89598)" fill="var(--color-brand)"/>
|
||||
transform="translate(-205 -193.89598)" fill="var(--color-brand, currentColor)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="var(--color-brand)"/>
|
||||
<path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="var(--color-brand)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="var(--color-brand, currentColor)"/>
|
||||
<path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="var(--color-brand, currentColor)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
@@ -356,197 +356,200 @@ html {
|
||||
--color-gray-highlight: rgba(113, 128, 150, 0.25);
|
||||
}
|
||||
|
||||
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;
|
||||
--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-regular);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@layer base {
|
||||
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;
|
||||
--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-regular);
|
||||
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;
|
||||
// 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-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;
|
||||
--size-mobile-navbar-height: 3.5rem;
|
||||
--size-mobile-navbar-height-expanded: 13.75rem;
|
||||
--size-navbar-height: 3.5rem;
|
||||
--size-mobile-navbar-height: 3.5rem;
|
||||
--size-mobile-navbar-height-expanded: 13.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;
|
||||
--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
|
||||
--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 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 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);
|
||||
--font-weight-text: var(--font-weight-medium);
|
||||
--font-weight-heading: var(--font-weight-extrabold);
|
||||
--font-weight-title: var(--font-weight-extrabold);
|
||||
|
||||
@media screen and (min-width: 320px) {
|
||||
--size-mobile-navbar-height-expanded: 11.5rem;
|
||||
@media screen and (min-width: 320px) {
|
||||
--size-mobile-navbar-height-expanded: 11.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 432px) {
|
||||
--size-mobile-navbar-height-expanded: 9.25rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 765px) {
|
||||
--size-mobile-navbar-height-expanded: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 432px) {
|
||||
--size-mobile-navbar-height-expanded: 9.25rem;
|
||||
//svg {
|
||||
// height: 1em;
|
||||
// width: 1em;
|
||||
//}
|
||||
|
||||
//a {
|
||||
// color: inherit;
|
||||
// text-decoration: none;
|
||||
//}
|
||||
|
||||
h1 {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 765px) {
|
||||
--size-mobile-navbar-height-expanded: 7rem;
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
h3 {
|
||||
margin-block: var(--spacing-card-md) var(--spacing-card-sm);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
input {
|
||||
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;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
pre {
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-block: var(--spacing-card-md) var(--spacing-card-sm);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
input {
|
||||
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 {
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background: var(--color-button-bg);
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
border: none;
|
||||
outline: 2px solid transparent;
|
||||
box-shadow:
|
||||
var(--shadow-inset-sm),
|
||||
0 0 0 0 transparent;
|
||||
transition: box-shadow 0.1s ease-in-out;
|
||||
min-height: 36px;
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
input,
|
||||
textarea {
|
||||
background: var(--color-button-bg);
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
border: none;
|
||||
outline: 2px solid transparent;
|
||||
box-shadow:
|
||||
inset 0 0 0 transparent,
|
||||
0 0 0 0.25rem var(--color-brand-shadow);
|
||||
color: var(--color-button-text-active);
|
||||
var(--shadow-inset-sm),
|
||||
0 0 0 0 transparent;
|
||||
transition: box-shadow 0.1s ease-in-out;
|
||||
min-height: 36px;
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
box-shadow:
|
||||
inset 0 0 0 transparent,
|
||||
0 0 0 0.25rem var(--color-brand-shadow);
|
||||
color: var(--color-button-text-active);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled="true"] {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-button-text);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled="true"] {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
button,
|
||||
input[type="button"] {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: 2px solid transparent;
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
opacity: 0.8;
|
||||
kbd {
|
||||
background-color: var(--color-code-bg);
|
||||
color: var(--color-code-text);
|
||||
box-shadow: 0 2px 1px var(--color-kbd-shadow);
|
||||
padding: 0.2em 0.5em 0.1em;
|
||||
border-radius: 3px;
|
||||
line-height: 1;
|
||||
font-size: 0.85em !important;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-button-text);
|
||||
opacity: 0.6;
|
||||
@import "~/assets/styles/layout.scss";
|
||||
@import "~/assets/styles/utils.scss";
|
||||
@import "~/assets/styles/components.scss";
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
[tabindex="0"]:focus-visible {
|
||||
outline: 0.25rem solid #ea80ff;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
// OMORPHIA FIXES
|
||||
.card {
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: 2px solid transparent !important;
|
||||
}
|
||||
|
||||
.button-animation {
|
||||
transition:
|
||||
opacity 0.5s ease-in-out,
|
||||
filter 0.2s ease-in-out,
|
||||
transform 0.05s ease-in-out,
|
||||
outline-width 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.button-transparent {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="button"] {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: 2px solid transparent;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--color-code-bg);
|
||||
color: var(--color-code-text);
|
||||
box-shadow: 0 2px 1px var(--color-kbd-shadow);
|
||||
padding: 0.2em 0.5em 0.1em;
|
||||
border-radius: 3px;
|
||||
line-height: 1;
|
||||
font-size: 0.85em !important;
|
||||
}
|
||||
|
||||
@import "~/assets/styles/layout.scss";
|
||||
@import "~/assets/styles/utils.scss";
|
||||
@import "~/assets/styles/components.scss";
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
[tabindex="0"]:focus-visible {
|
||||
outline: 0.25rem solid #ea80ff;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
// OMORPHIA FIXES
|
||||
.card {
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: 2px solid transparent !important;
|
||||
}
|
||||
|
||||
.button-animation {
|
||||
transition:
|
||||
opacity 0.5s ease-in-out,
|
||||
filter 0.2s ease-in-out,
|
||||
transform 0.05s ease-in-out,
|
||||
outline-width 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.button-transparent {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
@apply font-bold;
|
||||
}
|
||||
@@ -37,17 +37,17 @@
|
||||
fill-rule="nonzero"
|
||||
d="M657.4,254.8v-53.6h188.3v53.6H657.4z M704,485.1V183c0-30,8.7-54,26.2-72c17.5-18,42.4-27,74.9-27 c11.6,0,22.7,1.3,33.1,3.7c10.4,2.5,19.1,6.4,26.2,11.8l-18,50.3c-4.9-3.9-10.6-6.9-16.9-8.8c-6.3-2-12.9-2.9-19.6-2.9 c-13.8,0-24.2,3.8-31.2,11.5c-7.1,7.7-10.6,19.2-10.6,34.5v32.1l2.1,30v238.9H704z M1012.9,488.9c-28.9,0-54.7-6.3-77.2-19 c-22.6-12.7-40.4-30.1-53.4-52.2c-13.1-22.1-19.6-47.3-19.6-75.5c0-28.6,6.5-53.8,19.6-75.8c13-22,30.9-39.2,53.4-51.7 c22.6-12.5,48.3-18.7,77.2-18.7c29.3,0,55.3,6.3,78,18.7c22.7,12.5,40.6,29.6,53.4,51.4c12.9,21.8,19.3,47.1,19.3,76.1 c0,28.2-6.4,53.4-19.3,75.5c-12.9,22.1-30.7,39.6-53.4,52.2C1068.2,482.5,1042.2,488.9,1012.9,488.9z M1012.9,431.6 c16.2,0,30.7-3.6,43.4-10.7c12.7-7.1,22.7-17.5,29.9-31.1c7.2-13.6,10.8-29.5,10.8-47.7c0-18.6-3.6-34.5-10.8-47.9 c-7.2-13.4-17.2-23.6-29.9-30.8c-12.7-7.1-27-10.7-42.9-10.7c-16.2,0-30.6,3.6-43.1,10.7c-12.5,7.1-22.5,17.4-29.9,30.8 s-11.1,29.4-11.1,47.9c0,18.2,3.7,34.1,11.1,47.7c7.4,13.6,17.4,23.9,29.9,31.1C982.9,428,997.1,431.6,1012.9,431.6z M1227.2,485.1 v-286h63v78.7l-7.4-23c8.5-19.3,21.8-33.9,39.9-43.9c18.2-10,40.8-15,68-15v63.7c-2.8-0.7-5.5-1.2-7.9-1.3c-2.5-0.2-4.9-0.3-7.4-0.3 c-25,0-45,7.4-59.8,22.2c-14.8,14.8-22.2,36.9-22.2,66.1v138.7H1227.2z M1576.9,488.9c-31.4,0-58.8-6.3-82.3-19 c-23.5-12.7-41.6-30.1-54.5-52.2c-12.9-22.1-19.3-47.3-19.3-75.5c0-28.6,6.3-53.8,18.8-75.8c12.5-22,29.8-39.2,51.8-51.7 c22-12.5,47.2-18.7,75.4-18.7c27.5,0,52,6.1,73.5,18.2c21.5,12.1,38.4,29.3,50.8,51.4c12.3,22.1,18.5,48.2,18.5,78.2 c0,2.9-0.1,6.1-0.3,9.6c-0.2,3.6-0.4,7-0.8,10.2h-235.4v-44.5h200.5l-25.9,13.9c0.3-16.4-3-30.9-10.1-43.4 c-7.1-12.5-16.7-22.3-28.8-29.5c-12.2-7.1-26.2-10.7-42.1-10.7c-16.2,0-30.4,3.6-42.6,10.7c-12.2,7.1-21.7,17.1-28.6,29.7 c-6.9,12.7-10.3,27.6-10.3,44.7v10.7c0,17.1,3.9,32.3,11.6,45.5c7.8,13.2,18.7,23.4,32.8,30.5c14.1,7.1,30.3,10.7,48.7,10.7 c15.9,0,30.2-2.5,42.9-7.5c12.7-5,24-12.9,33.9-23.6l35.4,41.2c-12.7,15-28.7,26.5-47.9,34.5 C1623.5,484.9,1601.6,488.9,1576.9,488.9z M1806.5,152c-12.3,0-22.5-3.9-30.4-11.8c-7.9-7.8-11.9-17.3-11.9-28.4 c0-11.4,4-21,11.9-28.7c7.9-7.7,18.1-11.5,30.4-11.5c12.3,0,22.5,3.7,30.4,11c7.9,7.3,11.9,16.5,11.9,27.6 c0,11.8-3.9,21.7-11.6,29.7C1829.4,148,1819.2,152,1806.5,152z M1773.1,485.1v-286h66.1v286H1773.1z M2045.6,472.3 c-26.8,0-51-5.8-72.7-17.4c-21.7-11.6-38.8-27.8-51.3-48.5c-12.5-20.7-18.8-45-18.8-72.8c0-27.5,6.3-51.6,18.8-72.3 c12.5-20.7,29.6-36.8,51.3-48.2c21.7-11.4,45.9-17.1,72.7-17.1c24,0,45.5,4.8,64.5,14.5s34.3,24.6,45.8,45 c11.5,20.4,17.2,46.4,17.2,78.2c0,31.8-5.7,57.9-17.2,78.5c-11.5,20.5-26.7,35.7-45.8,45.5C2091.1,467.4,2069.6,472.3,2045.6,472.3z M2054,592.8c-26.1,0-51.6-3.5-76.4-10.4c-24.9-7-45.2-17.1-61.1-30.3l29.6-50.3c12.3,10.4,27.9,18.7,46.8,24.9 c18.9,6.2,38,9.4,57.4,9.4c31,0,53.8-7.2,68.2-21.7c14.5-14.5,21.7-36.2,21.7-65.1v-50.9l5.3-64.8l-2.1-64.8v-69.6h63v242.6 c0,51.8-13.1,89.9-39.1,114.3C2141.2,580.5,2103.4,592.8,2054,592.8z M2055.6,415.5c16.6,0,31.4-3.5,44.4-10.4 c13-7,23.2-16.6,30.4-28.9c7.2-12.3,10.8-26.5,10.8-42.6c0-16.1-3.6-30.3-10.8-42.6c-7.2-12.3-17.4-21.8-30.4-28.4 c-13.1-6.6-27.9-9.9-44.4-9.9c-16.6,0-31.5,3.3-44.7,9.9c-13.2,6.6-23.5,16.1-30.7,28.4c-7.2,12.3-10.8,26.5-10.8,42.6 c0,16.1,3.6,30.3,10.8,42.6c7.2,12.3,17.5,22,30.7,28.9S2039.1,415.5,2055.6,415.5z M2453.5,195.9c22.6,0,42.8,4.5,60.6,13.4 c17.8,8.9,31.8,22.6,42.1,41c10.2,18.4,15.3,42,15.3,71v163.9h-66.1V329.8c0-25.3-5.9-44.3-17.7-56.8 c-11.8-12.5-28.3-18.7-49.5-18.7c-15.5,0-29.3,3.2-41.3,9.6c-12,6.4-21.3,16-27.8,28.7c-6.5,12.7-9.8,28.7-9.8,47.9v144.6h-66.1 v-286h63v77.1l-11.1-23.6c9.9-18.2,24.2-32.2,43.1-42C2407,200.8,2428.8,195.9,2453.5,195.9z"
|
||||
/>
|
||||
<g fill="var(--color-brand)">
|
||||
<g fill="var(--color-brand, currentColor)">
|
||||
<path
|
||||
d="m29 424.4 188.2-112.95-17.15-45.48 53.75-55.21 67.93-14.64 19.67 24.21-31.32 31.72-27.3 8.6-19.52 20.05 9.56 26.6 19.4 20.6 27.36-7.28 19.47-21.38 42.51-13.47 12.67 28.5-43.87 53.78-73.5 23.27-32.97-36.7L55.06 467.94C46.1 456.41 35.67 440.08 29 424.4Zm543.03-230.25-149.5 40.32c8.24 21.92 10.95 34.8 13.23 49l149.23-40.26c-2.38-15.94-6.65-32.17-12.96-49.06Z"
|
||||
/>
|
||||
<path
|
||||
d="M51.28 316.13c10.59 125 115.54 223.3 243.27 223.3 96.51 0 180.02-56.12 219.63-137.46l48.61 16.83c-46.78 101.34-149.35 171.75-268.24 171.75C138.6 590.55 10.71 469.38 0 316.13h51.28ZM.78 265.24C15.86 116.36 141.73 0 294.56 0c162.97 0 295.28 132.31 295.28 295.28 0 26.14-3.4 51.49-9.8 75.63l-48.48-16.78a244.28 244.28 0 0 0 7.15-58.85c0-134.75-109.4-244.15-244.15-244.15-124.58 0-227.49 93.5-242.32 214.11H.8Z"
|
||||
class="ring--large ring"
|
||||
class="ring--large ring-3"
|
||||
/>
|
||||
<path
|
||||
d="M293.77 153.17c-78.49.07-142.2 63.83-142.2 142.34 0 78.56 63.79 142.34 142.35 142.34 3.98 0 7.93-.16 11.83-.49l14.22 49.76a194.65 194.65 0 0 1-26.05 1.74c-106.72 0-193.36-86.64-193.36-193.35 0-106.72 86.64-193.35 193.36-193.35 2.64 0 5.28.05 7.9.16l-8.05 50.85Zm58.2-42.13c78.39 24.67 135.3 97.98 135.3 184.47 0 80.07-48.77 148.83-118.2 178.18l-14.17-49.55c48.08-22.85 81.36-71.89 81.36-128.63 0-60.99-38.44-113.07-92.39-133.32l8.1-51.15Z"
|
||||
class="ring--small ring"
|
||||
class="ring--small ring-3"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<ButtonStyled v-if="!!slots.title" :type="type">
|
||||
<button class="!w-full" @click="() => (isOpen ? close() : open())">
|
||||
<button class="w-full!" @click="() => (isOpen ? close() : open())">
|
||||
<slot name="title" /><DropdownIcon
|
||||
class="ml-auto size-5 text-contrast transition-transform duration-300"
|
||||
class="text-contrast ml-auto size-5 transition-transform duration-300"
|
||||
:class="{ 'rotate-180': isOpen }"
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
|
||||
<div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
|
||||
<p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
|
||||
<nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
|
||||
<div class="ad-parent bg-bg-raised relative mb-3 flex w-full justify-center rounded-2xl">
|
||||
<div class="flex max-h-[250px] min-h-[250px] max-w-[300px] min-w-[300px] flex-col gap-4 p-6">
|
||||
<p class="text-contrast m-0 text-2xl font-bold">75% of ad revenue goes to creators</p>
|
||||
<nuxt-link to="/plus" class="text-purple mt-auto items-center gap-1 hover:underline">
|
||||
<span>
|
||||
Support creators and Modrinth ad-free with
|
||||
<span class="font-bold">Modrinth+</span>
|
||||
@@ -11,7 +11,7 @@
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 flex items-center justify-center overflow-hidden rounded-2xl bg-bg-raised"
|
||||
class="bg-bg-raised absolute top-0 flex items-center justify-center overflow-hidden rounded-2xl"
|
||||
>
|
||||
<div id="modrinth-rail-1" />
|
||||
</div>
|
||||
@@ -81,7 +81,7 @@ iframe[id^="google_ads_iframe"] {
|
||||
|
||||
#qc-cmp2-ui {
|
||||
background: var(--color-raised-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
color: var(--color-base);
|
||||
}
|
||||
|
||||
@@ -96,14 +96,14 @@ iframe[id^="google_ads_iframe"] {
|
||||
#qc-cmp2-ui button[mode="primary"] {
|
||||
background: var(--color-brand);
|
||||
color: var(--color-accent-contrast);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#qc-cmp2-ui button[mode="secondary"] {
|
||||
background: var(--color-button-bg);
|
||||
color: var(--color-base);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<span
|
||||
:class="
|
||||
'badge flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
|
||||
'badge text-secondary flex items-center gap-1 font-semibold ' + color + ' type--' + type
|
||||
"
|
||||
>
|
||||
<template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="name">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
<span class="text-contrast text-lg font-semibold">
|
||||
Name
|
||||
<span class="text-brand-red">*</span>
|
||||
<span class="text-red">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -19,14 +19,14 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="additional-information" class="flex flex-col gap-1">
|
||||
<span class="text-lg font-semibold text-contrast"> Summary </span>
|
||||
<span class="text-contrast text-lg font-semibold"> Summary </span>
|
||||
<span>A sentence or two that describes your collection.</span>
|
||||
</label>
|
||||
<div class="textarea-wrapper">
|
||||
<textarea id="additional-information" v-model="description" maxlength="256" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="m-0 max-w-[30rem]">
|
||||
<p class="m-0 max-w-120">
|
||||
Your new collection will be created as a public collection with
|
||||
{{ projectIds.length > 0 ? projectIds.length : "no" }}
|
||||
{{ projectIds.length !== 1 ? "projects" : "project" }}.
|
||||
|
||||
@@ -52,7 +52,7 @@ defineExpose({
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
border: 2px solid var(--color-button-bg);
|
||||
height: 78px;
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="name">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
<span class="text-contrast text-lg font-semibold">
|
||||
Name
|
||||
<span class="text-brand-red">*</span>
|
||||
<span class="text-red">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -20,9 +20,9 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="slug">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
<span class="text-contrast text-lg font-semibold">
|
||||
URL
|
||||
<span class="text-brand-red">*</span>
|
||||
<span class="text-red">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="text-input-wrapper">
|
||||
@@ -39,9 +39,9 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="visibility" class="flex flex-col gap-1">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
<span class="text-contrast text-lg font-semibold">
|
||||
Visibility
|
||||
<span class="text-brand-red">*</span>
|
||||
<span class="text-red">*</span>
|
||||
</span>
|
||||
<span> The visibility of your project after it has been approved. </span>
|
||||
</label>
|
||||
@@ -55,9 +55,9 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="additional-information" class="flex flex-col gap-1">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
<span class="text-contrast text-lg font-semibold">
|
||||
Summary
|
||||
<span class="text-brand-red">*</span>
|
||||
<span class="text-red">*</span>
|
||||
</span>
|
||||
<span> A sentence or two that describes your project. </span>
|
||||
</label>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div
|
||||
class="moderation-checklist flex w-[600px] max-w-full flex-col rounded-2xl border-[1px] border-solid border-orange bg-bg-raised p-4 transition-all delay-200 duration-200 ease-in-out"
|
||||
class="moderation-checklist border-orange bg-bg-raised flex w-[600px] max-w-full flex-col rounded-2xl border p-4 transition-all delay-200 duration-200 ease-in-out"
|
||||
:class="collapsed ? `sm:max-w-[300px]` : 'sm:max-w-[600px]'"
|
||||
>
|
||||
<div class="flex grow-0 items-center gap-2">
|
||||
<h1 class="m-0 mr-auto flex items-center gap-2 text-2xl font-extrabold text-contrast">
|
||||
<h1 class="text-contrast m-0 mr-auto flex items-center gap-2 text-2xl font-extrabold">
|
||||
<ScaleIcon class="text-orange" /> Moderation
|
||||
</h1>
|
||||
<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
|
||||
@@ -19,7 +19,7 @@
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
<Collapsible base-class="grow" class="flex grow flex-col" :collapsed="collapsed">
|
||||
<div class="my-4 h-[1px] w-full bg-divider" />
|
||||
<div class="bg-divider my-4 h-px w-full" />
|
||||
<div v-if="done">
|
||||
<p>You are done moderating this project! There are {{ futureProjects.length }} left.</p>
|
||||
</div>
|
||||
@@ -183,7 +183,7 @@
|
||||
<h2 class="m-0 mb-2 text-lg font-extrabold">{{ steps[currentStepIndex].question }}</h2>
|
||||
<template v-if="steps[currentStepIndex].rules && steps[currentStepIndex].rules.length > 0">
|
||||
<strong>Guidance:</strong>
|
||||
<ul class="mb-3 mt-2 leading-tight">
|
||||
<ul class="mt-2 mb-3 leading-tight">
|
||||
<li v-for="(rule, index) in steps[currentStepIndex].rules" :key="index">
|
||||
{{ rule }}
|
||||
</li>
|
||||
@@ -193,7 +193,7 @@
|
||||
v-if="steps[currentStepIndex].examples && steps[currentStepIndex].examples.length > 0"
|
||||
>
|
||||
<strong>Reject things like:</strong>
|
||||
<ul class="mb-3 mt-2 leading-tight">
|
||||
<ul class="mt-2 mb-3 leading-tight">
|
||||
<li v-for="(example, index) in steps[currentStepIndex].examples" :key="index">
|
||||
{{ example }}
|
||||
</li>
|
||||
@@ -203,7 +203,7 @@
|
||||
v-if="steps[currentStepIndex].exceptions && steps[currentStepIndex].exceptions.length > 0"
|
||||
>
|
||||
<strong>Exceptions:</strong>
|
||||
<ul class="mb-3 mt-2 leading-tight">
|
||||
<ul class="mt-2 mb-3 leading-tight">
|
||||
<li v-for="(exception, index) in steps[currentStepIndex].exceptions" :key="index">
|
||||
{{ exception }}
|
||||
</li>
|
||||
@@ -300,9 +300,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div
|
||||
class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-divider pt-4"
|
||||
>
|
||||
<div class="border-divider mt-4 flex grow justify-between gap-2 border-t pt-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<ButtonStyled v-if="!done">
|
||||
<button aria-label="Skip" @click="goToNextProject">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<nav
|
||||
ref="scrollContainer"
|
||||
class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
|
||||
class="card-shadow experimental-styles-within bg-bg-raised relative flex w-fit overflow-x-auto rounded-full p-1 text-sm font-bold"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="(link, index) in filteredLinks"
|
||||
@@ -9,9 +9,9 @@
|
||||
:key="index"
|
||||
ref="tabLinkElements"
|
||||
:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
|
||||
class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
|
||||
class="button-animation z-1 flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
|
||||
:class="{
|
||||
'text-button-textSelected': activeIndex === index && !subpageSelected,
|
||||
'text-button-text-selected': activeIndex === index && !subpageSelected,
|
||||
'text-contrast': activeIndex === index && subpageSelected,
|
||||
}"
|
||||
>
|
||||
@@ -20,7 +20,7 @@
|
||||
</NuxtLink>
|
||||
<div
|
||||
:class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${
|
||||
subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected'
|
||||
subpageSelected ? 'bg-button-bg' : 'bg-button-bg-selected'
|
||||
}`"
|
||||
:style="{
|
||||
left: sliderLeftPx,
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
@mouseenter="stopTimer(item)"
|
||||
@mouseleave="setNotificationTimer(item)"
|
||||
>
|
||||
<div class="flex w-full gap-2 overflow-hidden rounded-lg bg-bg-raised shadow-xl">
|
||||
<div class="bg-bg-raised flex w-full gap-2 overflow-hidden rounded-lg shadow-xl">
|
||||
<div
|
||||
class="w-2"
|
||||
:class="{
|
||||
@@ -19,7 +19,7 @@
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1 py-2 pl-1 pr-3"
|
||||
class="grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1 py-2 pr-3 pl-1"
|
||||
>
|
||||
<div
|
||||
class="flex items-center"
|
||||
@@ -35,9 +35,9 @@
|
||||
<XCircleIcon v-else-if="item.type === 'error'" class="h-6 w-6" />
|
||||
<InfoIcon v-else class="h-6 w-6" />
|
||||
</div>
|
||||
<div class="m-0 text-wrap font-bold text-contrast" v-html="item.title"></div>
|
||||
<div class="text-contrast m-0 font-bold text-wrap" v-html="item.title"></div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div v-if="item.count && item.count > 1" class="text-xs font-bold text-contrast">
|
||||
<div v-if="item.count && item.count > 1" class="text-contrast text-xs font-bold">
|
||||
x{{ item.count }}
|
||||
</div>
|
||||
<ButtonStyled circular size="small">
|
||||
@@ -53,11 +53,11 @@
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="col-span-2 text-sm text-primary" v-html="item.text"></div>
|
||||
<div class="text-primary col-span-2 text-sm" v-html="item.text"></div>
|
||||
<template v-if="item.errorCode">
|
||||
<div></div>
|
||||
<div
|
||||
class="m-0 text-wrap text-xs font-medium text-secondary"
|
||||
class="text-secondary m-0 text-xs font-medium text-wrap"
|
||||
v-html="item.errorCode"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<nav
|
||||
ref="scrollContainer"
|
||||
class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
|
||||
class="card-shadow experimental-styles-within bg-bg-raised relative flex w-fit overflow-x-auto rounded-full p-1 text-sm font-bold"
|
||||
>
|
||||
<button
|
||||
v-for="(option, index) in options"
|
||||
:key="`option-group-${index}`"
|
||||
ref="optionButtons"
|
||||
class="button-animation z-[1] flex flex-row items-center gap-2 rounded-full bg-transparent px-4 py-2 font-semibold"
|
||||
class="button-animation z-1 flex flex-row items-center gap-2 rounded-full bg-transparent px-4 py-2 font-semibold"
|
||||
:class="{
|
||||
'text-button-textSelected': modelValue === option,
|
||||
'text-button-text-selected': modelValue === option,
|
||||
'text-primary': modelValue !== option,
|
||||
}"
|
||||
@click="setOption(option)"
|
||||
@@ -17,7 +17,7 @@
|
||||
<slot :option="option" :selected="modelValue === option" />
|
||||
</button>
|
||||
<div
|
||||
class="navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full bg-button-bgSelected p-1"
|
||||
class="navtabs-transition bg-button-bg-selected pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1"
|
||||
:style="{
|
||||
left: sliderLeftPx,
|
||||
top: sliderTopPx,
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="name">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
<span class="text-contrast text-lg font-semibold">
|
||||
Name
|
||||
<span class="text-brand-red">*</span>
|
||||
<span class="text-red">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -20,9 +20,9 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="slug">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
<span class="text-contrast text-lg font-semibold">
|
||||
URL
|
||||
<span class="text-brand-red">*</span>
|
||||
<span class="text-red">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="text-input-wrapper">
|
||||
@@ -39,9 +39,9 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="additional-information" class="flex flex-col gap-1">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
<span class="text-contrast text-lg font-semibold">
|
||||
Summary
|
||||
<span class="text-brand-red">*</span>
|
||||
<span class="text-red">*</span>
|
||||
</span>
|
||||
<span>A sentence or two that describes your organization.</span>
|
||||
</label>
|
||||
@@ -49,7 +49,7 @@
|
||||
<textarea id="additional-information" v-model="description" maxlength="256" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="m-0 max-w-[30rem]">
|
||||
<p class="m-0 max-w-120">
|
||||
You will be the owner of this organization, but you can invite other members and transfer
|
||||
ownership at any time.
|
||||
</p>
|
||||
|
||||
@@ -147,7 +147,7 @@ const onSubmitHandler = () => {
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
display: grid;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
margin-top: var(--gap-md);
|
||||
border: 1px solid var(--color-button-bg);
|
||||
|
||||
@@ -17,9 +17,9 @@
|
||||
>
|
||||
<img v-if="featuredImage" :src="featuredImage" alt="gallery image" loading="lazy" />
|
||||
</nuxt-link>
|
||||
<div class="title">
|
||||
<div class="title leading-tight">
|
||||
<nuxt-link :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`">
|
||||
<h2 class="name !text-2xl">
|
||||
<h2 class="name text-2xl!">
|
||||
{{ name }}
|
||||
</h2>
|
||||
</nuxt-link>
|
||||
@@ -31,7 +31,7 @@
|
||||
</p>
|
||||
<Badge v-if="status && status !== 'approved'" :type="status" class="status" />
|
||||
</div>
|
||||
<p class="description">
|
||||
<p class="description leading-tight">
|
||||
{{ description }}
|
||||
</p>
|
||||
<Categories
|
||||
@@ -51,7 +51,7 @@
|
||||
:categories="categories"
|
||||
/>
|
||||
</Categories>
|
||||
<div class="stats">
|
||||
<div class="stats leading-tight">
|
||||
<div v-if="downloads" class="stat">
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
<p>
|
||||
@@ -91,11 +91,11 @@
|
||||
|
||||
<script>
|
||||
import { CalendarIcon, UpdatedIcon, DownloadIcon, HeartIcon } from "@modrinth/assets";
|
||||
import { useRelativeTime } from "@modrinth/ui";
|
||||
import Categories from "~/components/ui/search/Categories.vue";
|
||||
import Badge from "~/components/ui/Badge.vue";
|
||||
import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
|
||||
import Avatar from "~/components/ui/Avatar.vue";
|
||||
import { useRelativeTime } from "@modrinth/ui";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@@ -183,7 +183,7 @@ const chartOptions = computed(() => {
|
||||
categories: props.labels,
|
||||
labels: {
|
||||
style: {
|
||||
borderRadius: "var(--radius-sm)",
|
||||
borderRadius: "0.5rem",
|
||||
},
|
||||
},
|
||||
axisTicks: {
|
||||
@@ -237,7 +237,7 @@ const chartOptions = computed(() => {
|
||||
bar: {
|
||||
horizontal: props.horizontalBar,
|
||||
columnWidth: "80%",
|
||||
endingShape: "rounded",
|
||||
endingShape: "rounded-sm",
|
||||
borderRadius: 5,
|
||||
borderRadiusApplication: "end",
|
||||
borderRadiusWhenStacked: "last",
|
||||
@@ -355,7 +355,7 @@ svg {
|
||||
:deep(.apexcharts-tooltip),
|
||||
:deep(.apexcharts-yaxistooltip) {
|
||||
background: var(--color-raised-bg) !important;
|
||||
border-radius: var(--radius-sm) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
border: 1px solid var(--color-button-bg) !important;
|
||||
box-shadow: var(--shadow-floating) !important;
|
||||
font-size: var(--font-size-nm) !important;
|
||||
@@ -370,7 +370,7 @@ svg {
|
||||
:deep(.apexcharts-yaxistooltip),
|
||||
:deep(.apexcharts-xaxistooltip) {
|
||||
background: var(--color-raised-bg) !important;
|
||||
border-radius: var(--radius-sm) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
border: 1px solid var(--color-button-bg) !important;
|
||||
font-size: var(--font-size-nm) !important;
|
||||
color: var(--color-base) !important;
|
||||
@@ -398,7 +398,7 @@ svg {
|
||||
}
|
||||
|
||||
:deep(.apexcharts-menu-item) {
|
||||
border-radius: var(--radius-sm) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
padding: var(--gap-xs) var(--gap-sm) !important;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -198,7 +198,7 @@
|
||||
<div class="country-flag-container">
|
||||
<template v-if="name.toLowerCase() === 'xx' || !name">
|
||||
<div
|
||||
class="country-flag flex select-none items-center justify-center bg-bg-raised font-extrabold text-secondary"
|
||||
class="country-flag bg-bg-raised text-secondary flex items-center justify-center font-extrabold select-none"
|
||||
>
|
||||
?
|
||||
</div>
|
||||
@@ -257,7 +257,7 @@
|
||||
<div class="country-flag-container">
|
||||
<template v-if="name.toLowerCase() === 'xx' || !name">
|
||||
<div
|
||||
class="country-flag flex select-none items-center justify-center bg-bg-raised font-extrabold text-secondary"
|
||||
class="country-flag bg-bg-raised text-secondary flex items-center justify-center font-extrabold select-none"
|
||||
>
|
||||
?
|
||||
</div>
|
||||
@@ -782,7 +782,7 @@ const defaultRanges: RangeObject[] = [
|
||||
.legend__item__color {
|
||||
height: var(--font-size-xs);
|
||||
width: var(--font-size-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--color-brand);
|
||||
|
||||
flex-grow: 0;
|
||||
@@ -850,7 +850,7 @@ const defaultRanges: RangeObject[] = [
|
||||
overflow: hidden;
|
||||
|
||||
border: 1px solid var(--color-divider);
|
||||
border-radius: var(--radius-xs);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.country-flag {
|
||||
@@ -876,7 +876,7 @@ const defaultRanges: RangeObject[] = [
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--color-button-bg);
|
||||
gap: var(--gap-md);
|
||||
padding: var(--gap-md);
|
||||
@@ -907,7 +907,7 @@ const defaultRanges: RangeObject[] = [
|
||||
height: 1rem;
|
||||
background-color: var(--color-raised-bg);
|
||||
border: 1px solid var(--color-button-bg);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
|
||||
@@ -160,7 +160,7 @@ defineExpose({
|
||||
|
||||
gap: var(--gap-xs);
|
||||
border: 1px solid var(--color-button-bg);
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.75rem;
|
||||
background-color: var(--color-raised-bg);
|
||||
box-shadow: var(--shadow-floating);
|
||||
|
||||
@@ -191,7 +191,7 @@ svg {
|
||||
:deep(.apexcharts-tooltip),
|
||||
:deep(.apexcharts-yaxistooltip) {
|
||||
background: var(--color-raised-bg) !important;
|
||||
border-radius: var(--radius-sm) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
border: 1px solid var(--color-button-bg) !important;
|
||||
box-shadow: var(--shadow-floating) !important;
|
||||
font-size: var(--font-size-nm) !important;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<NewModal ref="modal" header="Creating backup" @show="focusInput">
|
||||
<div class="flex flex-col gap-2 md:w-[600px]">
|
||||
<label for="backup-name-input">
|
||||
<span class="text-lg font-semibold text-contrast"> Name </span>
|
||||
<span class="text-contrast text-lg font-semibold"> Name </span>
|
||||
</label>
|
||||
<input
|
||||
id="backup-name-input"
|
||||
@@ -14,13 +14,13 @@
|
||||
maxlength="48"
|
||||
/>
|
||||
<div v-if="nameExists && !isCreating" class="flex items-center gap-1">
|
||||
<IssuesIcon class="hidden text-orange sm:block" />
|
||||
<span class="text-sm text-orange">
|
||||
<IssuesIcon class="text-orange hidden sm:block" />
|
||||
<span class="text-orange text-sm">
|
||||
You already have a backup named '<span class="font-semibold">{{ trimmedName }}</span
|
||||
>'
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isRateLimited" class="mt-2 text-sm text-red">
|
||||
<div v-if="isRateLimited" class="text-red mt-2 text-sm">
|
||||
You're creating backups too fast. Please wait a moment before trying again.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
v-if="currentBackup"
|
||||
:backup="currentBackup"
|
||||
preview
|
||||
class="border-px border-solid border-button-border"
|
||||
class="border-px border-button-border border-solid"
|
||||
/>
|
||||
</ConfirmModal>
|
||||
</template>
|
||||
|
||||
@@ -169,10 +169,10 @@ const messages = defineMessages({
|
||||
? 'grid-cols-[min-content_1fr_1fr] sm:grid-cols-[min-content_3fr_2fr_1fr] md:grid-cols-[auto_3fr_2fr_1fr]'
|
||||
: 'grid-cols-[min-content_1fr_1fr] sm:grid-cols-[min-content_3fr_2fr_1fr] md:grid-cols-[auto_3fr_2fr_1fr_2fr]'
|
||||
"
|
||||
class="grid items-center gap-4 rounded-2xl bg-bg-raised px-4 py-3"
|
||||
class="bg-bg-raised grid items-center gap-4 rounded-2xl px-4 py-3"
|
||||
>
|
||||
<div
|
||||
class="flex h-12 w-12 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg"
|
||||
class="border-button-border bg-button-bg flex h-12 w-12 items-center justify-center rounded-xl border border-solid"
|
||||
>
|
||||
<SpinnerIcon
|
||||
v-if="creating"
|
||||
@@ -182,21 +182,21 @@ const messages = defineMessages({
|
||||
<FolderArchiveIcon v-else class="h-6 w-6" />
|
||||
</div>
|
||||
<div class="col-span-2 flex flex-col gap-1 sm:col-span-1">
|
||||
<span class="font-bold text-contrast">
|
||||
<span class="text-contrast font-bold">
|
||||
{{ backup.name }}
|
||||
</span>
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm">
|
||||
<span v-if="backup.locked" class="flex items-center gap-1 text-sm text-secondary">
|
||||
<span v-if="backup.locked" class="text-secondary flex items-center gap-1 text-sm">
|
||||
<LockIcon /> {{ formatMessage(messages.locked) }}
|
||||
</span>
|
||||
<span v-if="automated && backup.locked">•</span>
|
||||
<span v-if="automated" class="flex items-center gap-1 text-secondary">
|
||||
<span v-if="automated" class="text-secondary flex items-center gap-1">
|
||||
<BotIcon /> {{ formatMessage(messages.automated) }}
|
||||
</span>
|
||||
<span v-if="(failedToCreate || failedToRestore) && (automated || backup.locked)">•</span>
|
||||
<span
|
||||
v-if="failedToCreate || failedToRestore || failedToPrepareFile"
|
||||
class="flex items-center gap-1 text-sm text-red"
|
||||
class="text-red flex items-center gap-1 text-sm"
|
||||
>
|
||||
<XIcon />
|
||||
{{
|
||||
@@ -223,7 +223,7 @@ const messages = defineMessages({
|
||||
class="max-w-full"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="restoring" class="col-span-2 flex flex-col gap-3 text-purple">
|
||||
<div v-else-if="restoring" class="text-purple col-span-2 flex flex-col gap-3">
|
||||
{{ formatMessage(messages.restoringBackup) }}
|
||||
<ProgressBar
|
||||
:progress="restoring.progress"
|
||||
@@ -333,7 +333,7 @@ const messages = defineMessages({
|
||||
</div>
|
||||
<pre
|
||||
v-if="!preview && flags.advancedDebugInfo"
|
||||
class="col-span-full m-0 rounded-xl bg-button-bg text-xs"
|
||||
class="bg-button-bg col-span-full m-0 rounded-xl text-xs"
|
||||
>{{ backup }}</pre
|
||||
>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<NewModal ref="modal" header="Renaming backup" @show="focusInput">
|
||||
<div class="flex flex-col gap-2 md:w-[600px]">
|
||||
<label for="backup-name-input">
|
||||
<span class="text-lg font-semibold text-contrast"> Name </span>
|
||||
<span class="text-contrast text-lg font-semibold"> Name </span>
|
||||
</label>
|
||||
<input
|
||||
id="backup-name-input"
|
||||
@@ -14,8 +14,8 @@
|
||||
maxlength="48"
|
||||
/>
|
||||
<div v-if="nameExists" class="flex items-center gap-1">
|
||||
<IssuesIcon class="hidden text-orange sm:block" />
|
||||
<span class="text-sm text-orange">
|
||||
<IssuesIcon class="text-orange hidden sm:block" />
|
||||
<span class="text-orange text-sm">
|
||||
You already have a backup named '<span class="font-semibold">{{ trimmedName }}</span
|
||||
>'
|
||||
</span>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
v-if="currentBackup"
|
||||
:backup="currentBackup"
|
||||
preview
|
||||
class="border-px border-solid border-button-border"
|
||||
class="border-px border-button-border border-solid"
|
||||
/>
|
||||
</ConfirmModal>
|
||||
</template>
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<NewModal ref="modal" header="Editing auto backup settings">
|
||||
<div class="flex flex-col gap-4 md:w-[600px]">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="font-semibold text-contrast">Auto backup</div>
|
||||
<div class="text-contrast font-semibold">Auto backup</div>
|
||||
<p class="m-0">
|
||||
Automatically create a backup of your server
|
||||
<strong>{{ backupIntervalsLabel.toLowerCase() }}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoadingSettings" class="py-2 text-sm text-secondary">Loading settings...</div>
|
||||
<div v-if="isLoadingSettings" class="text-secondary py-2 text-sm">Loading settings...</div>
|
||||
<template v-else>
|
||||
<input
|
||||
id="auto-backup-toggle"
|
||||
@@ -20,7 +20,7 @@
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="font-semibold text-contrast">Interval</div>
|
||||
<div class="text-contrast font-semibold">Interval</div>
|
||||
<p class="m-0">
|
||||
The amount of time between each backup. This will only backup your server if it has been
|
||||
modified since the last backup.
|
||||
|
||||
@@ -3,20 +3,20 @@
|
||||
<template #title>
|
||||
<div class="flex min-w-full items-center gap-2 md:w-[calc(420px-5.5rem)]">
|
||||
<UiAvatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
|
||||
<span class="truncate text-xl font-extrabold text-contrast">{{ modDetails?.name }}</span>
|
||||
<span class="text-contrast truncate text-xl font-extrabold">{{ modDetails?.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col gap-2 md:w-[420px]">
|
||||
<div class="flex flex-col gap-2">
|
||||
<template v-if="versionsLoading">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-fit animate-pulse select-none rounded-md bg-button-bg font-semibold">
|
||||
<div class="bg-button-bg w-fit animate-pulse rounded-md font-semibold select-none">
|
||||
<span class="opacity-0" aria-hidden="true">{{ type }} version</span>
|
||||
</div>
|
||||
<div class="min-h-[22px] min-w-[140px] animate-pulse rounded-full bg-button-bg" />
|
||||
<div class="bg-button-bg min-h-[22px] min-w-[140px] animate-pulse rounded-full" />
|
||||
</div>
|
||||
<div class="min-h-9 w-full animate-pulse rounded-xl bg-button-bg" />
|
||||
<div class="w-fit animate-pulse select-none rounded-md bg-button-bg">
|
||||
<div class="bg-button-bg min-h-9 w-full animate-pulse rounded-xl" />
|
||||
<div class="bg-button-bg w-fit animate-pulse rounded-md select-none">
|
||||
<span class="ml-6 opacity-0" aria-hidden="true">
|
||||
Show any beta and alpha releases
|
||||
</span>
|
||||
@@ -26,7 +26,7 @@
|
||||
<template v-else>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="font-semibold text-contrast">{{ type }} version</div>
|
||||
<div class="text-contrast font-semibold">{{ type }} version</div>
|
||||
<NuxtLink
|
||||
class="flex cursor-pointer items-center gap-1 bg-transparent p-0"
|
||||
@click="
|
||||
@@ -65,7 +65,7 @@
|
||||
name="Project"
|
||||
:options="filteredVersions"
|
||||
placeholder="No valid versions found"
|
||||
class="!min-w-full"
|
||||
class="min-w-full!"
|
||||
:disabled="filteredVersions.length === 0"
|
||||
:display-name="
|
||||
(version) => (typeof version === 'object' ? version?.version_number : version)
|
||||
@@ -79,8 +79,8 @@
|
||||
ref="unlockFilterAccordion"
|
||||
:open-by-default="!versionFilter"
|
||||
:class="[
|
||||
versionFilter ? '' : '!border-solid border-orange bg-bg-orange !text-contrast',
|
||||
'flex flex-col gap-2 rounded-2xl border-2 border-dashed border-divider p-3 transition-all',
|
||||
versionFilter ? '' : 'border-orange bg-bg-orange text-contrast! border-solid!',
|
||||
'border-divider flex flex-col gap-2 rounded-2xl border-2 border-dashed p-3 transition-all',
|
||||
]"
|
||||
>
|
||||
<p class="m-0 items-center font-bold">
|
||||
@@ -185,7 +185,7 @@
|
||||
Something went wrong trying to load versions for this {{ type.toLocaleLowerCase() }}.
|
||||
Please try again later or contact support if the issue persists.
|
||||
</span>
|
||||
<LazyUiCopyCode class="!mt-2 !break-all" :text="versionsError" />
|
||||
<LazyUiCopyCode class="mt-2! break-all!" :text="versionsError" />
|
||||
</div>
|
||||
</Admonition>
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
@change="updateFilters"
|
||||
>
|
||||
<slot name="platform">
|
||||
<FilterIcon class="h-5 w-5 text-secondary" />
|
||||
<FilterIcon class="text-secondary h-5 w-5" />
|
||||
Platform
|
||||
</slot>
|
||||
<template #option="{ option }">
|
||||
@@ -46,7 +46,7 @@
|
||||
@change="updateFilters"
|
||||
>
|
||||
<slot name="game-versions">
|
||||
<FilterIcon class="h-5 w-5 text-secondary" />
|
||||
<FilterIcon class="text-secondary h-5 w-5" />
|
||||
Game versions
|
||||
</slot>
|
||||
<template v-if="hasAnySnapshots" #footer>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
data-pyro-file
|
||||
:class="[
|
||||
containerClasses,
|
||||
isDragOver && type === 'directory' ? 'bg-brand-highlight' : '',
|
||||
isDragOver && type === 'directory' ? 'bg-highlight-brand' : '',
|
||||
isDragging ? 'opacity-50' : '',
|
||||
]"
|
||||
tabindex="0"
|
||||
@@ -24,30 +24,30 @@
|
||||
class="pointer-events-none flex w-full items-center gap-4 truncate"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-none flex size-8 items-center justify-center rounded-full bg-bg-raised p-[6px] group-hover:bg-brand-highlight group-hover:text-brand group-focus:bg-brand-highlight group-focus:text-brand"
|
||||
class="bg-bg-raised group-hover:bg-highlight-brand group-hover:text-brand group-focus:bg-highlight-brand group-focus:text-brand pointer-events-none flex size-8 items-center justify-center rounded-full p-[6px]"
|
||||
:class="isEditableFile ? 'group-active:scale-[0.8]' : ''"
|
||||
>
|
||||
<component :is="iconComponent" class="size-6" />
|
||||
</div>
|
||||
<div class="pointer-events-none flex w-full flex-col truncate">
|
||||
<span
|
||||
class="pointer-events-none w-[98%] truncate font-bold group-hover:text-contrast group-focus:text-contrast"
|
||||
class="group-hover:text-contrast group-focus:text-contrast pointer-events-none w-[98%] truncate font-bold"
|
||||
>
|
||||
{{ name }}
|
||||
</span>
|
||||
<span class="pointer-events-none text-xs text-secondary group-hover:text-primary">
|
||||
<span class="text-secondary group-hover:text-primary pointer-events-none text-xs">
|
||||
{{ subText }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-pyro-file-actions
|
||||
class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 md:gap-12"
|
||||
class="pointer-events-auto flex w-fit shrink-0 items-center gap-4 md:gap-12"
|
||||
>
|
||||
<span class="hidden w-[160px] text-nowrap font-mono text-sm text-secondary md:flex">
|
||||
<span class="text-secondary hidden w-[160px] font-mono text-sm text-nowrap md:flex">
|
||||
{{ formattedCreationDate }}
|
||||
</span>
|
||||
<span class="w-[160px] text-nowrap font-mono text-sm text-secondary">
|
||||
<span class="text-secondary w-[160px] font-mono text-sm text-nowrap">
|
||||
{{ formattedModifiedDate }}
|
||||
</span>
|
||||
<ButtonStyled circular type="transparent">
|
||||
@@ -152,9 +152,9 @@ const route = shallowRef(useRoute());
|
||||
const router = useRouter();
|
||||
|
||||
const containerClasses = computed(() => [
|
||||
"group m-0 p-0 focus:!outline-none flex w-full select-none items-center justify-between overflow-hidden border-0 border-b border-solid border-bg-raised p-3 last:border-none hover:bg-bg-raised focus:bg-bg-raised",
|
||||
"group m-0 p-0 focus:outline-hidden! flex w-full select-none items-center justify-between overflow-hidden border-b border-bg-raised p-3 last:border-none hover:bg-bg-raised focus:bg-bg-raised",
|
||||
isEditableFile.value ? "cursor-pointer" : props.type === "directory" ? "cursor-pointer" : "",
|
||||
isDragOver.value ? "bg-brand-highlight" : "",
|
||||
isDragOver.value ? "bg-highlight-brand" : "",
|
||||
]);
|
||||
|
||||
const fileExtension = computed(() => props.name.split(".").pop()?.toLowerCase() || "");
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div class="flex h-full w-full items-center justify-center gap-6 p-20">
|
||||
<FileIcon class="size-28" />
|
||||
<div class="flex flex-col gap-2">
|
||||
<h3 class="text-red-500 m-0 text-2xl font-bold">{{ title }}</h3>
|
||||
<p class="m-0 text-sm text-secondary">
|
||||
<h3 class="m-0 text-2xl font-bold text-red-500">{{ title }}</h3>
|
||||
<p class="text-secondary m-0 text-sm">
|
||||
{{ message }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div ref="pyroFilesSentinel" class="sentinel" data-pyro-files-sentinel />
|
||||
<header
|
||||
:class="[
|
||||
'duration-20 top-0 flex select-none flex-col justify-between gap-2 bg-table-alternateRow p-3 transition-[border-radius] sm:h-12 sm:flex-row',
|
||||
'bg-table-alternate-row top-0 flex flex-col justify-between gap-2 p-3 transition-[border-radius] duration-20 select-none sm:h-12 sm:flex-row',
|
||||
!isStuck ? 'rounded-t-2xl' : 'sticky top-0 z-20',
|
||||
]"
|
||||
data-pyro-files-state="browsing"
|
||||
@@ -10,19 +10,19 @@
|
||||
>
|
||||
<nav
|
||||
aria-label="Breadcrumb navigation"
|
||||
class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
|
||||
class="text-contrast m-0 flex min-w-0 shrink items-center p-0"
|
||||
>
|
||||
<ol class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
|
||||
<li class="-ml-1 flex-shrink-0">
|
||||
<ol class="m-0 flex min-w-0 shrink list-none items-center p-0">
|
||||
<li class="-ml-1 shrink-0">
|
||||
<ButtonStyled type="transparent">
|
||||
<button
|
||||
v-tooltip="'Back to home'"
|
||||
type="button"
|
||||
class="mr-2 grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
|
||||
class="focus-visible:outline-brand mr-2 grid h-12 w-10 place-content-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid"
|
||||
@click="$emit('navigate', -1)"
|
||||
>
|
||||
<span
|
||||
class="grid size-8 place-content-center rounded-full bg-button-bg p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
|
||||
class="bg-button-bg group-hover:bg-highlight-brand group-hover:text-brand grid size-8 place-content-center rounded-full p-[6px]"
|
||||
>
|
||||
<HomeIcon class="h-5 w-5" />
|
||||
<span class="sr-only">Home</span>
|
||||
@@ -30,27 +30,27 @@
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</li>
|
||||
<li class="m-0 -ml-2 min-w-0 flex-shrink p-0">
|
||||
<ol class="m-0 flex min-w-0 flex-shrink items-center overflow-hidden p-0">
|
||||
<li class="m-0 -ml-2 min-w-0 shrink p-0">
|
||||
<ol class="m-0 flex min-w-0 shrink items-center overflow-hidden p-0">
|
||||
<TransitionGroup
|
||||
name="breadcrumb"
|
||||
tag="span"
|
||||
class="relative flex min-w-0 flex-shrink items-center"
|
||||
class="relative flex min-w-0 shrink items-center"
|
||||
>
|
||||
<li
|
||||
v-for="(segment, index) in breadcrumbSegments"
|
||||
:key="`${segment || index}-group`"
|
||||
class="relative flex min-w-0 flex-shrink items-center text-sm"
|
||||
class="relative flex min-w-0 shrink items-center text-sm"
|
||||
>
|
||||
<div class="flex min-w-0 flex-shrink items-center">
|
||||
<div class="flex min-w-0 shrink items-center">
|
||||
<ButtonStyled type="transparent">
|
||||
<button
|
||||
class="cursor-pointer truncate focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
|
||||
class="focus-visible:outline-brand cursor-pointer truncate focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid"
|
||||
:aria-current="
|
||||
index === breadcrumbSegments.length - 1 ? 'location' : undefined
|
||||
"
|
||||
:class="{
|
||||
'!text-contrast': index === breadcrumbSegments.length - 1,
|
||||
'text-contrast!': index === breadcrumbSegments.length - 1,
|
||||
}"
|
||||
@click="$emit('navigate', index)"
|
||||
>
|
||||
@@ -59,7 +59,7 @@
|
||||
</ButtonStyled>
|
||||
<ChevronRightIcon
|
||||
v-if="index < breadcrumbSegments.length - 1"
|
||||
class="size-4 flex-shrink-0 text-secondary"
|
||||
class="text-secondary size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
@@ -70,7 +70,7 @@
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="flex flex-shrink-0 items-center gap-1">
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<div class="flex w-full flex-row-reverse sm:flex-row">
|
||||
<ButtonStyled type="transparent">
|
||||
<UiServersTeleportOverflowMenu
|
||||
@@ -89,7 +89,7 @@
|
||||
{{ filterLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
|
||||
<DropdownIcon aria-hidden="true" class="text-secondary h-5 w-5" />
|
||||
<template #all>Show all</template>
|
||||
<template #filesOnly>Files only</template>
|
||||
<template #foldersOnly>Folders only</template>
|
||||
@@ -99,7 +99,7 @@
|
||||
<label for="search-folder" class="sr-only">Search folder</label>
|
||||
<div class="relative">
|
||||
<SearchIcon
|
||||
class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
class="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
@@ -108,7 +108,7 @@
|
||||
type="search"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
class="h-8 min-h-[unset] w-full border-[1px] border-solid border-divider bg-transparent py-2 pl-9"
|
||||
class="border-divider h-8 min-h-[unset] w-full border bg-transparent py-2 pl-9"
|
||||
placeholder="Search..."
|
||||
@input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
@@ -133,7 +133,7 @@
|
||||
]"
|
||||
>
|
||||
<PlusIcon aria-hidden="true" />
|
||||
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
|
||||
<DropdownIcon aria-hidden="true" class="text-secondary h-5 w-5" />
|
||||
<template #file> <BoxIcon aria-hidden="true" /> New file </template>
|
||||
<template #directory> <FolderOpenIcon aria-hidden="true" /> New folder </template>
|
||||
<template #upload> <UploadIcon aria-hidden="true" /> Upload file </template>
|
||||
|
||||
@@ -14,36 +14,36 @@
|
||||
ref="ctxRef"
|
||||
:style="{
|
||||
border: '1px solid var(--color-divider)',
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
borderRadius: '1rem',
|
||||
backgroundColor: 'var(--color-raised-bg)',
|
||||
padding: 'var(--gap-sm)',
|
||||
boxShadow: 'var(--shadow-floating)',
|
||||
gap: 'var(--gap-xs)',
|
||||
width: 'max-content',
|
||||
}"
|
||||
class="flex h-fit w-fit select-none flex-col"
|
||||
class="flex h-fit w-fit flex-col select-none"
|
||||
>
|
||||
<button
|
||||
class="btn btn-transparent flex !w-full items-center"
|
||||
class="btn btn-transparent flex w-full! items-center"
|
||||
@click="$emit('rename', item)"
|
||||
>
|
||||
<EditIcon class="h-5 w-5" />
|
||||
Rename
|
||||
</button>
|
||||
<button class="btn btn-transparent flex !w-full items-center" @click="$emit('move', item)">
|
||||
<button class="btn btn-transparent flex w-full! items-center" @click="$emit('move', item)">
|
||||
<RightArrowIcon />
|
||||
Move
|
||||
</button>
|
||||
<button
|
||||
v-if="item.type !== 'directory'"
|
||||
class="btn btn-transparent flex !w-full items-center"
|
||||
class="btn btn-transparent flex w-full! items-center"
|
||||
@click="$emit('download', item)"
|
||||
>
|
||||
<DownloadIcon class="h-5 w-5" />
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-transparent btn-red flex !w-full items-center"
|
||||
class="btn btn-transparent btn-red flex w-full! items-center"
|
||||
@click="$emit('delete', item)"
|
||||
>
|
||||
<TrashIcon class="h-5 w-5" />
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<NewModal ref="modal" :header="`Creating a ${displayType}`">
|
||||
<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="font-semibold text-contrast">Name</div>
|
||||
<div class="text-contrast font-semibold">Name</div>
|
||||
<input
|
||||
ref="createInput"
|
||||
v-model="itemName"
|
||||
|
||||
@@ -2,23 +2,23 @@
|
||||
<NewModal ref="modal" danger :header="`Deleting ${item?.type}`">
|
||||
<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
|
||||
<div
|
||||
class="relative flex w-full items-center gap-2 rounded-2xl border border-solid border-[#cb224436] bg-[#f57b7b0e] p-6 shadow-md dark:border-0 dark:bg-[#0e0e0ea4]"
|
||||
class="relative flex w-full items-center gap-2 rounded-2xl border border-[#cb224436] bg-[#f57b7b0e] p-6 shadow-md dark:dark:bg-[#0e0e0ea4]"
|
||||
>
|
||||
<div
|
||||
class="flex h-9 w-9 items-center justify-center rounded-full bg-[#3f1818a4] p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
|
||||
class="group-hover:bg-highlight-brand group-hover:text-brand flex h-9 w-9 items-center justify-center rounded-full bg-[#3f1818a4] p-[6px]"
|
||||
>
|
||||
<FolderOpenIcon v-if="item?.type === 'directory'" class="h-5 w-5" />
|
||||
<FileIcon v-else-if="item?.type === 'file'" class="h-5 w-5" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold group-hover:text-contrast">{{ item?.name }}</span>
|
||||
<span class="group-hover:text-contrast font-bold">{{ item?.name }}</span>
|
||||
<span
|
||||
v-if="item?.type === 'directory'"
|
||||
class="text-xs text-secondary group-hover:text-primary"
|
||||
class="text-secondary group-hover:text-primary text-xs"
|
||||
>
|
||||
{{ item?.count }} items
|
||||
</span>
|
||||
<span v-else class="text-xs text-secondary group-hover:text-primary">
|
||||
<span v-else class="text-secondary group-hover:text-primary text-xs">
|
||||
{{ ((item?.size ?? 0) / 1024 / 1024).toFixed(2) }} MB
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<header
|
||||
data-pyro-files-state="editing"
|
||||
class="flex h-12 select-none items-center justify-between rounded-t-2xl bg-table-alternateRow p-3"
|
||||
class="bg-table-alternate-row flex h-12 items-center justify-between rounded-t-2xl p-3 select-none"
|
||||
aria-label="File editor navigation"
|
||||
>
|
||||
<nav
|
||||
aria-label="Breadcrumb navigation"
|
||||
class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
|
||||
class="text-contrast m-0 flex min-w-0 shrink items-center p-0"
|
||||
>
|
||||
<ol class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
|
||||
<li class="-ml-1 flex-shrink-0">
|
||||
<ol class="m-0 flex min-w-0 shrink list-none items-center p-0">
|
||||
<li class="-ml-1 shrink-0">
|
||||
<ButtonStyled type="transparent">
|
||||
<button
|
||||
v-tooltip="'Back to home'"
|
||||
type="button"
|
||||
class="mr-2 grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
|
||||
class="focus-visible:outline-brand mr-2 grid h-12 w-10 place-content-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid"
|
||||
@click="goHome"
|
||||
>
|
||||
<span
|
||||
class="grid size-8 place-content-center rounded-full bg-button-bg p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
|
||||
class="bg-button-bg group-hover:bg-highlight-brand group-hover:text-brand grid size-8 place-content-center rounded-full p-[6px]"
|
||||
>
|
||||
<HomeIcon class="h-5 w-5" />
|
||||
<span class="sr-only">Home</span>
|
||||
@@ -35,8 +35,8 @@
|
||||
>
|
||||
<ButtonStyled type="transparent">
|
||||
<button
|
||||
class="cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
|
||||
:class="{ '!text-contrast': index === breadcrumbSegments.length - 1 }"
|
||||
class="focus-visible:outline-brand cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid"
|
||||
:class="{ 'text-contrast!': index === breadcrumbSegments.length - 1 }"
|
||||
@click="$emit('navigate', index)"
|
||||
>
|
||||
{{ segment || "" }}
|
||||
@@ -44,12 +44,12 @@
|
||||
</ButtonStyled>
|
||||
<ChevronRightIcon
|
||||
v-if="index < breadcrumbSegments.length"
|
||||
class="size-4 text-secondary"
|
||||
class="text-secondary size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</li>
|
||||
<li class="flex items-center px-3 text-sm">
|
||||
<span class="font-semibold !text-contrast" aria-current="location">{{
|
||||
<span class="text-contrast! font-semibold" aria-current="location">{{
|
||||
fileName
|
||||
}}</span>
|
||||
</li>
|
||||
@@ -80,7 +80,7 @@
|
||||
]"
|
||||
>
|
||||
<SaveIcon aria-hidden="true" />
|
||||
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
|
||||
<DropdownIcon aria-hidden="true" class="text-secondary h-5 w-5" />
|
||||
<template #save> <SaveIcon aria-hidden="true" /> Save </template>
|
||||
<template #save-as> <SaveIcon aria-hidden="true" /> Save as... </template>
|
||||
<template #save&restart>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="flex h-[calc(100vh-12rem)] w-full flex-col items-center">
|
||||
<div
|
||||
ref="container"
|
||||
class="relative w-full flex-grow cursor-grab overflow-hidden rounded-b-2xl bg-black active:cursor-grabbing"
|
||||
class="relative w-full grow cursor-grab overflow-hidden rounded-b-2xl bg-black active:cursor-grabbing"
|
||||
@mousedown="startPan"
|
||||
@mousemove="handlePan"
|
||||
@mouseup="stopPan"
|
||||
@@ -21,7 +21,7 @@
|
||||
v-show="isReady"
|
||||
ref="imageRef"
|
||||
:src="imageObjectUrl"
|
||||
class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform"
|
||||
class="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform"
|
||||
:style="imageStyle"
|
||||
alt="Viewed image"
|
||||
@load="handleImageLoad"
|
||||
@@ -30,7 +30,7 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="!state.hasError"
|
||||
class="absolute bottom-0 mb-2 flex w-fit justify-center gap-2 space-x-4 rounded-2xl bg-bg p-2"
|
||||
class="bg-bg absolute bottom-0 mb-2 flex w-fit justify-center gap-2 space-x-4 rounded-2xl p-2"
|
||||
>
|
||||
<ButtonStyled type="transparent" @click="zoom(ZOOM_IN_FACTOR)">
|
||||
<button v-tooltip="'Zoom in'">
|
||||
@@ -45,7 +45,7 @@
|
||||
<ButtonStyled type="transparent" @click="reset">
|
||||
<button>
|
||||
<span class="font-mono">{{ Math.round(state.scale * 100) }}%</span>
|
||||
<span class="ml-4 text-sm text-blue">Reset</span>
|
||||
<span class="text-blue ml-4 text-sm">Reset</span>
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="sticky top-12 z-20 flex h-8 w-full select-none flex-row items-center border-0 border-b border-solid border-bg-raised bg-bg px-3 text-xs font-bold uppercase"
|
||||
class="border-bg-raised bg-bg sticky top-12 z-20 flex h-8 w-full flex-row items-center border-b px-3 text-xs font-bold uppercase select-none"
|
||||
>
|
||||
<div class="min-w-[48px]"></div>
|
||||
<button
|
||||
class="flex h-full w-full appearance-none items-center gap-1 bg-transparent text-left hover:text-brand"
|
||||
class="hover:text-brand flex h-full w-full appearance-none items-center gap-1 bg-transparent text-left"
|
||||
@click="$emit('sort', 'name')"
|
||||
>
|
||||
<span>Name</span>
|
||||
@@ -14,7 +14,7 @@
|
||||
</button>
|
||||
<div class="flex shrink-0 gap-4 text-right md:gap-12">
|
||||
<button
|
||||
class="hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
|
||||
class="hover:text-brand hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent md:flex"
|
||||
@click="$emit('sort', 'created')"
|
||||
>
|
||||
<span>Created</span>
|
||||
@@ -30,7 +30,7 @@
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="mr-4 hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
|
||||
class="hover:text-brand mr-4 hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent md:flex"
|
||||
@click="$emit('sort', 'modified')"
|
||||
>
|
||||
<span>Modified</span>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-nowrap">
|
||||
New location:
|
||||
<div class="w-full rounded-lg bg-table-alternateRow p-2 font-bold text-contrast">
|
||||
<div class="bg-table-alternate-row text-contrast w-full rounded-lg p-2 font-bold">
|
||||
<span class="text-secondary">/root</span>{{ newpath }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<NewModal ref="modal" :header="`Renaming ${item?.type}`">
|
||||
<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="font-semibold text-contrast">Name</div>
|
||||
<div class="text-contrast font-semibold">Name</div>
|
||||
<input
|
||||
ref="renameInput"
|
||||
v-model="itemName"
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
:proceed-icon="CheckIcon"
|
||||
@proceed="proceed"
|
||||
>
|
||||
<div class="flex max-w-[30rem] flex-col gap-4">
|
||||
<p class="m-0 font-semibold leading-normal">
|
||||
<div class="flex max-w-120 flex-col gap-4">
|
||||
<p class="m-0 leading-normal font-semibold">
|
||||
<template v-if="hasMany">
|
||||
Over 100 files will be overwritten if you proceed with extraction; here is just some of
|
||||
them:
|
||||
@@ -17,9 +17,9 @@
|
||||
overwritten if you proceed with extraction:
|
||||
</template>
|
||||
</p>
|
||||
<ul class="m-0 max-h-80 list-none overflow-auto rounded-2xl bg-bg px-4 py-3">
|
||||
<ul class="bg-bg m-0 max-h-80 list-none overflow-auto rounded-2xl px-4 py-3">
|
||||
<li v-for="file in files" :key="file" class="flex items-center gap-1 py-1 font-medium">
|
||||
<XIcon class="shrink-0 text-red" /> {{ file }}
|
||||
<XIcon class="text-red shrink-0" /> {{ file }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div
|
||||
v-if="isDragging"
|
||||
:class="[
|
||||
'absolute inset-0 flex items-center justify-center rounded-2xl bg-black bg-opacity-50 text-white',
|
||||
'bg-opacity-50 absolute inset-0 flex items-center justify-center rounded-2xl bg-black text-white',
|
||||
overlayClass,
|
||||
]"
|
||||
>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div
|
||||
ref="statusContentRef"
|
||||
v-bind="$attrs"
|
||||
:class="['flex flex-col p-4 text-sm text-contrast']"
|
||||
:class="['text-contrast flex flex-col p-4 text-sm']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 font-bold">
|
||||
@@ -30,12 +30,12 @@
|
||||
<UiServersPanelSpinner
|
||||
v-show="item.status === 'uploading'"
|
||||
key="spinner"
|
||||
class="absolute !size-4"
|
||||
class="absolute size-4!"
|
||||
/>
|
||||
<CheckCircleIcon
|
||||
v-show="item.status === 'completed'"
|
||||
key="check"
|
||||
class="absolute size-4 text-green"
|
||||
class="text-green absolute size-4"
|
||||
/>
|
||||
<XCircleIcon
|
||||
v-show="
|
||||
@@ -44,7 +44,7 @@
|
||||
item.status === 'incorrect-type'
|
||||
"
|
||||
key="error"
|
||||
class="absolute size-4 text-red"
|
||||
class="text-red absolute size-4"
|
||||
/>
|
||||
</transition-group>
|
||||
<span class="ml-6 truncate">{{ item.file.name }}</span>
|
||||
@@ -63,9 +63,9 @@
|
||||
<template v-else>
|
||||
<template v-if="item.status === 'uploading'">
|
||||
<span>{{ item.progress }}%</span>
|
||||
<div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
|
||||
<div class="bg-bg h-1 w-20 overflow-hidden rounded-full">
|
||||
<div
|
||||
class="h-full bg-contrast transition-all duration-200"
|
||||
class="bg-contrast h-full transition-all duration-200"
|
||||
:style="{ width: item.progress + '%' }"
|
||||
/>
|
||||
</div>
|
||||
@@ -78,9 +78,9 @@
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ item.progress }}%</span>
|
||||
<div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
|
||||
<div class="bg-bg h-1 w-20 overflow-hidden rounded-full">
|
||||
<div
|
||||
class="h-full bg-contrast transition-all duration-200"
|
||||
class="bg-contrast h-full transition-all duration-200"
|
||||
:style="{ width: item.progress + '%' }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
>
|
||||
<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="font-bold text-contrast">
|
||||
<div class="text-contrast font-bold">
|
||||
{{ cf ? `How to get the modpack version's URL` : "URL of .zip file" }}
|
||||
</div>
|
||||
<ol v-if="cf" class="mb-1 mt-0 flex flex-col gap-1 pl-8 leading-normal text-secondary">
|
||||
<ol v-if="cf" class="text-secondary mt-0 mb-1 flex flex-col gap-1 pl-8 leading-normal">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.curseforge.com/minecraft/search?page=1&pageSize=40&sortBy=relevancy&class=modpacks"
|
||||
class="inline-flex font-semibold text-[#F16436] transition-all hover:underline active:brightness-[--hover-brightness]"
|
||||
class="inline-flex font-semibold text-[#F16436] transition-all hover:underline active:brightness-(--hover-brightness)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@@ -23,16 +23,16 @@
|
||||
</li>
|
||||
<li>
|
||||
On the modpack's page, go to the
|
||||
<span class="font-semibold text-primary">"Files"</span> tab, and
|
||||
<span class="font-semibold text-primary">select the version</span> of the modpack you
|
||||
<span class="text-primary font-semibold">"Files"</span> tab, and
|
||||
<span class="text-primary font-semibold">select the version</span> of the modpack you
|
||||
want to install.
|
||||
</li>
|
||||
<li>
|
||||
<span class="font-semibold text-primary">Copy the URL</span> of the version you want to
|
||||
<span class="text-primary font-semibold">Copy the URL</span> of the version you want to
|
||||
install, and paste it in the box below.
|
||||
</li>
|
||||
</ol>
|
||||
<p v-else class="mb-1 mt-0">Copy and paste the direct download URL of a .zip file.</p>
|
||||
<p v-else class="mt-0 mb-1">Copy and paste the direct download URL of a .zip file.</p>
|
||||
<input
|
||||
ref="urlInput"
|
||||
v-model="url"
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
left: `${location.screenPosition?.x || 0}px`,
|
||||
top: `${location.screenPosition?.y || 0}px`,
|
||||
}"
|
||||
class="location-button center-on-top-left flex transform cursor-pointer items-center rounded-full bg-bg px-3 outline-1 outline-red transition-opacity duration-200 hover:z-50"
|
||||
class="location-button center-on-top-left bg-bg outline-red flex transform cursor-pointer items-center rounded-full px-3 outline-1 transition-opacity duration-200 hover:z-50"
|
||||
@click="toggleLocationClicked(location)"
|
||||
>
|
||||
<div
|
||||
@@ -32,9 +32,9 @@
|
||||
expanded: location.clicked,
|
||||
}"
|
||||
>
|
||||
<div class="whitespace-nowrap text-sm">
|
||||
<div class="text-sm whitespace-nowrap">
|
||||
<span class="ml-2"> {{ location.name }} </span>
|
||||
<span v-if="!location.active" class="ml-1 text-xs text-secondary">(Coming Soon)</span>
|
||||
<span v-if="!location.active" class="text-secondary ml-1 text-xs">(Coming Soon)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
|
||||
<div class="bg-table-alternate-row flex w-full flex-col gap-1 rounded-2xl p-2">
|
||||
<div
|
||||
v-for="loader in vanillaLoaders"
|
||||
:key="loader.name"
|
||||
class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
|
||||
class="group hover:bg-bg relative flex items-center justify-between rounded-2xl p-2 pr-2.5"
|
||||
>
|
||||
<UiServersLoaderSelectorCard
|
||||
:loader="loader"
|
||||
@@ -17,12 +17,12 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h2 class="mb-2 px-2 text-lg font-bold text-contrast">Mod loaders</h2>
|
||||
<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
|
||||
<h2 class="text-contrast mb-2 px-2 text-lg font-bold">Mod loaders</h2>
|
||||
<div class="bg-table-alternate-row flex w-full flex-col gap-1 rounded-2xl p-2">
|
||||
<div
|
||||
v-for="loader in modLoaders"
|
||||
:key="loader.name"
|
||||
class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
|
||||
class="group hover:bg-bg relative flex items-center justify-between rounded-2xl p-2 pr-2.5"
|
||||
>
|
||||
<UiServersLoaderSelectorCard
|
||||
:loader="loader"
|
||||
@@ -37,12 +37,12 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h2 class="mb-2 px-2 text-lg font-bold text-contrast">Plugin loaders</h2>
|
||||
<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
|
||||
<h2 class="text-contrast mb-2 px-2 text-lg font-bold">Plugin loaders</h2>
|
||||
<div class="bg-table-alternate-row flex w-full flex-col gap-1 rounded-2xl p-2">
|
||||
<div
|
||||
v-for="loader in pluginLoaders"
|
||||
:key="loader.name"
|
||||
class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
|
||||
class="group hover:bg-bg relative flex items-center justify-between rounded-2xl p-2 pr-2.5"
|
||||
>
|
||||
<UiServersLoaderSelectorCard
|
||||
:loader="loader"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
class="grid size-10 place-content-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
|
||||
class="border-button-border bg-button-bg grid size-10 place-content-center rounded-xl border shadow-xs"
|
||||
:class="isCurrentLoader ? '[&&]:bg-bg-green' : ''"
|
||||
>
|
||||
<UiServersIconsLoaderIcon
|
||||
@@ -13,18 +13,18 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<h1 class="m-0 text-xl font-bold leading-none text-contrast">
|
||||
<h1 class="text-contrast m-0 text-xl leading-none font-bold">
|
||||
{{ loader.displayName }}
|
||||
</h1>
|
||||
<span
|
||||
v-if="isCurrentLoader"
|
||||
class="hidden items-center gap-1 rounded-full bg-bg-green p-1 px-1.5 text-xs font-semibold text-brand sm:flex"
|
||||
class="bg-bg-green text-brand hidden items-center gap-1 rounded-full p-1 px-1.5 text-xs font-semibold sm:flex"
|
||||
>
|
||||
<CheckIcon class="h-4 w-4" />
|
||||
Current
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="isCurrentLoader" class="m-0 text-xs text-secondary">
|
||||
<p v-if="isCurrentLoader" class="text-secondary m-0 text-xs">
|
||||
{{ loaderVersion }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
<button
|
||||
v-if="isOverflowing"
|
||||
class="ml-2 flex h-6 items-center rounded-md bg-bg px-2 text-xs text-contrast opacity-50 transition-opacity hover:opacity-100"
|
||||
class="bg-bg text-contrast ml-2 flex h-6 items-center rounded-md px-2 text-xs opacity-50 transition-opacity hover:opacity-100"
|
||||
type="button"
|
||||
@click.stop="$emit('show-full-log', props.log)"
|
||||
>
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
<div class="flex flex-row items-center gap-2 rounded-lg">
|
||||
<ButtonStyled v-if="isInstalling" type="standard" color="brand">
|
||||
<button disabled class="flex-shrink-0">
|
||||
<button disabled class="shrink-0">
|
||||
<UiServersPanelSpinner class="size-5" /> Installing...
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
:aria-label="`Server is ${getStatusText(state)}`"
|
||||
class="relative inline-flex select-none items-center"
|
||||
class="relative inline-flex items-center select-none"
|
||||
@mouseenter="isExpanded = true"
|
||||
@mouseleave="isExpanded = false"
|
||||
>
|
||||
@@ -28,7 +28,7 @@
|
||||
<div class="h-3 w-3 rounded-full"></div>
|
||||
<span
|
||||
:class="[
|
||||
'origin-left whitespace-nowrap text-sm font-semibold text-contrast transition-all duration-[200ms] ease-in-out',
|
||||
'text-contrast origin-left text-sm font-semibold whitespace-nowrap transition-all duration-200 ease-in-out',
|
||||
isExpanded ? 'translate-x-0 scale-100' : '-translate-x-1 scale-x-75',
|
||||
]"
|
||||
>
|
||||
@@ -45,7 +45,7 @@ import type { ServerState } from "@modrinth/utils";
|
||||
const STATUS_CLASSES = {
|
||||
running: { main: "bg-brand", bg: "bg-bg-green" },
|
||||
stopped: { main: "", bg: "" },
|
||||
crashed: { main: "bg-brand-red", bg: "bg-bg-red" },
|
||||
crashed: { main: "bg-red", bg: "bg-bg-red" },
|
||||
unknown: { main: "", bg: "" },
|
||||
} as const;
|
||||
|
||||
|
||||
@@ -6,19 +6,19 @@
|
||||
v-model="searchInput"
|
||||
type="text"
|
||||
placeholder="Search logs"
|
||||
class="h-12 !w-full !pl-10 !pr-48"
|
||||
class="h-12 w-full! pr-48! pl-10!"
|
||||
:disabled="loading"
|
||||
@keydown.escape="clearSearch"
|
||||
/>
|
||||
<SearchIcon class="absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<SearchIcon class="absolute top-1/2 left-4 -translate-y-1/2" />
|
||||
<ButtonStyled v-if="searchInput && !loading" @click="clearSearch">
|
||||
<button class="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<button class="absolute top-1/2 right-2 -translate-y-1/2">
|
||||
<XIcon class="h-5 w-5" />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<span
|
||||
v-if="pyroConsole.filteredOutput.value.length && searchInput && !loading"
|
||||
class="pointer-events-none absolute right-12 top-1/2 -translate-y-1/2 select-none whitespace-pre text-sm"
|
||||
class="pointer-events-none absolute top-1/2 right-12 -translate-y-1/2 text-sm whitespace-pre select-none"
|
||||
>
|
||||
{{ pyroConsole.filteredOutput.value.length }}
|
||||
{{ pyroConsole.filteredOutput.value.length === 1 ? "result" : "results" }}
|
||||
@@ -28,8 +28,8 @@
|
||||
<div
|
||||
data-pyro-terminal
|
||||
:class="[
|
||||
'terminal-font console relative z-[1] flex h-full w-full flex-col items-center justify-between overflow-hidden rounded-t-xl px-1 text-sm transition-transform duration-300',
|
||||
{ 'scale-fullscreen screen-fixed inset-0 z-50 !rounded-none': isFullScreen },
|
||||
'terminal-font console relative z-1 flex h-full w-full flex-col items-center justify-between overflow-hidden rounded-t-xl px-1 text-sm transition-transform duration-300',
|
||||
{ 'scale-fullscreen screen-fixed inset-0 z-50 rounded-none!': isFullScreen },
|
||||
{ 'pointer-events-none': loading },
|
||||
]"
|
||||
:aria-hidden="loading"
|
||||
@@ -37,7 +37,7 @@
|
||||
>
|
||||
<div
|
||||
v-if="cosmetics.advancedRendering && !loading"
|
||||
class="progressive-gradient pointer-events-none absolute -bottom-6 left-0 z-[2] h-[10rem] w-full overflow-hidden rounded-xl"
|
||||
class="progressive-gradient pointer-events-none absolute -bottom-6 left-0 z-2 h-40 w-full overflow-hidden rounded-xl"
|
||||
:style="`--transparency: ${Math.max(0, lerp(100, 0, bottomThreshold * 8))}%`"
|
||||
aria-hidden="true"
|
||||
>
|
||||
@@ -45,13 +45,13 @@
|
||||
v-for="i in progressiveBlurIterations"
|
||||
:key="i"
|
||||
aria-hidden="true"
|
||||
class="absolute left-0 top-0 h-full w-full"
|
||||
class="absolute top-0 left-0 h-full w-full"
|
||||
:style="getBlurStyle(i)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="!loading"
|
||||
class="pointer-events-none absolute bottom-0 left-0 right-0 z-[2] h-[196px] w-full"
|
||||
class="pointer-events-none absolute right-0 bottom-0 left-0 z-2 h-[196px] w-full"
|
||||
:style="
|
||||
bottomThreshold > 0
|
||||
? { background: 'linear-gradient(transparent 30%, var(--console-bg) 70%)' }
|
||||
@@ -60,14 +60,14 @@
|
||||
></div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none absolute left-0 top-0 z-[60] h-full w-full"
|
||||
class="pointer-events-none absolute top-0 left-0 z-60 h-full w-full"
|
||||
:style="{
|
||||
visibility: isFullScreen ? 'hidden' : 'visible',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute -bottom-2 -right-2 h-7 w-7"
|
||||
class="absolute -right-2 -bottom-2 h-7 w-7"
|
||||
:style="{
|
||||
background: `radial-gradient(circle at 0% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
|
||||
}"
|
||||
@@ -85,7 +85,7 @@
|
||||
v-if="!loading"
|
||||
ref="scrollbarTrack"
|
||||
data-pyro-terminal-scrollbar-track
|
||||
class="absolute -right-1 bottom-16 top-4 z-[4] w-4 overflow-hidden"
|
||||
class="absolute top-4 -right-1 bottom-16 z-4 w-4 overflow-hidden"
|
||||
@mousedown="handleTrackClick"
|
||||
>
|
||||
<div
|
||||
@@ -107,7 +107,7 @@
|
||||
<div
|
||||
ref="scrollbarThumb"
|
||||
data-pyro-terminal-scrollbar-thumb
|
||||
class="absolute w-1.5 cursor-default rounded-full bg-button-bg"
|
||||
class="bg-button-bg absolute w-1.5 cursor-default rounded-full"
|
||||
:style="{
|
||||
height: `${getThumbHeight()}px`,
|
||||
transform: `translateY(${getThumbPosition()}px)`,
|
||||
@@ -119,7 +119,7 @@
|
||||
<div
|
||||
ref="scrollContainer"
|
||||
data-pyro-terminal-root
|
||||
class="scrollbar-none absolute left-0 top-0 h-full w-full select-text overflow-x-auto overflow-y-auto py-6 pb-[72px]"
|
||||
class="scrollbar-none absolute top-0 left-0 h-full w-full overflow-x-auto overflow-y-auto py-6 pb-[72px] select-text"
|
||||
@scroll.passive="() => handleListScroll()"
|
||||
>
|
||||
<div v-if="loading" class="h-full w-full" />
|
||||
@@ -153,7 +153,7 @@
|
||||
<div @mousedown.stop @click.stop>
|
||||
<button
|
||||
v-if="searchInput"
|
||||
class="jump-button mr-4 flex items-center gap-1 rounded-md bg-bg-blue px-2 py-1 text-xs text-blue transition-all hover:scale-105 active:scale-95"
|
||||
class="jump-button bg-bg-blue text-blue mr-4 flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-all hover:scale-105 active:scale-95"
|
||||
@mousedown.stop
|
||||
@click.stop="() => jumpToLine(item)"
|
||||
>
|
||||
@@ -169,17 +169,17 @@
|
||||
shouldShowSeparator(visibleStartIndex + index, visibleStartIndex + index + 1)
|
||||
"
|
||||
data-pyro-terminal-separator
|
||||
class="flex h-8 select-none items-center justify-center opacity-50"
|
||||
class="flex h-8 items-center justify-center opacity-50 select-none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="h-[1px] w-full bg-contrast opacity-50"></div>
|
||||
<div class="bg-contrast h-px w-full opacity-50"></div>
|
||||
<div class="mx-4 flex flex-row items-center gap-4">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<div class="size-1 rounded-full bg-contrast opacity-70"></div>
|
||||
<div class="size-1 rounded-full bg-contrast opacity-70"></div>
|
||||
<div class="size-1 rounded-full bg-contrast opacity-70"></div>
|
||||
<div class="bg-contrast size-1 rounded-full opacity-70"></div>
|
||||
<div class="bg-contrast size-1 rounded-full opacity-70"></div>
|
||||
<div class="bg-contrast size-1 rounded-full opacity-70"></div>
|
||||
</div>
|
||||
<span class="select-none whitespace-pre text-xs text-contrast">
|
||||
<span class="text-contrast text-xs whitespace-pre select-none">
|
||||
{{
|
||||
shouldShowSeparator(
|
||||
visibleStartIndex + index,
|
||||
@@ -197,7 +197,7 @@
|
||||
between
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-[1px] w-full bg-contrast opacity-50"></div>
|
||||
<div class="bg-contrast h-px w-full opacity-50"></div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
@@ -206,7 +206,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-4 z-[3] w-full"
|
||||
class="absolute bottom-4 z-3 w-full"
|
||||
:style="{
|
||||
filter: `drop-shadow(0 8px 12px rgba(0, 0, 0, ${lerp(0.1, 0.5, bottomThreshold)}))`,
|
||||
}"
|
||||
@@ -217,7 +217,7 @@
|
||||
v-if="!loading"
|
||||
data-pyro-fullscreen
|
||||
:label="isFullScreen ? 'Exit full screen' : 'Enter full screen'"
|
||||
class="experimental-styles-within absolute right-4 top-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
|
||||
class="experimental-styles-within border-button-border bg-bg-raised text-contrast absolute top-4 right-4 z-3 grid h-12 w-12 place-content-center rounded-full border transition-all duration-200 hover:scale-110 active:scale-95"
|
||||
:class="{ hidden: searchInput || hasSelection || isSingleLineSelected }"
|
||||
@click="toggleFullscreen"
|
||||
>
|
||||
@@ -228,13 +228,13 @@
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="(hasSelection || isSingleLineSelected) && !loading"
|
||||
class="absolute right-20 top-4 z-[3] flex flex-row items-center"
|
||||
:class="{ '!right-4': searchInput || hasSelection || isSingleLineSelected }"
|
||||
class="absolute top-4 right-20 z-3 flex flex-row items-center"
|
||||
:class="{ 'right-4!': searchInput || hasSelection || isSingleLineSelected }"
|
||||
>
|
||||
<button
|
||||
data-pyro-copy
|
||||
label="Copy selected lines"
|
||||
class="experimental-styles-within flex h-12 flex-row items-center justify-center gap-2 rounded-full border-[1px] border-solid border-button-border bg-bg-raised px-4 text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
|
||||
class="experimental-styles-within border-button-border bg-bg-raised text-contrast flex h-12 flex-row items-center justify-center gap-2 rounded-full border px-4 transition-all duration-200 hover:scale-110 active:scale-95"
|
||||
@click="copySelectedLines"
|
||||
>
|
||||
<CopyIcon class="h-5 w-5" />
|
||||
@@ -245,7 +245,7 @@
|
||||
v-if="hasSelection"
|
||||
data-pyro-view
|
||||
label="View selected lines"
|
||||
class="experimental-styles-within ml-2 flex h-12 w-[100px] flex-row items-center justify-center gap-2 rounded-full border-[1px] border-solid border-button-border bg-bg-raised px-4 text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
|
||||
class="experimental-styles-within border-button-border bg-bg-raised text-contrast ml-2 flex h-12 w-[100px] flex-row items-center justify-center gap-2 rounded-full border px-4 transition-all duration-200 hover:scale-110 active:scale-95"
|
||||
@click="showSelectedLines"
|
||||
>
|
||||
<EyeIcon class="h-5 w-5" />
|
||||
@@ -260,7 +260,7 @@
|
||||
v-if="bottomThreshold > 0 && !isScrolledToBottom && !loading"
|
||||
data-pyro-scrolltobottom
|
||||
label="Scroll to bottom"
|
||||
class="scroll-to-bottom-btn experimental-styles-within absolute bottom-[4.5rem] right-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
|
||||
class="scroll-to-bottom-btn experimental-styles-within border-button-border bg-bg-raised text-contrast absolute right-4 bottom-18 z-3 grid h-12 w-12 place-content-center rounded-full border transition-all duration-200 hover:scale-110 active:scale-95"
|
||||
@click="scrollToBottom"
|
||||
>
|
||||
<RightArrowIcon class="rotate-90" />
|
||||
@@ -268,10 +268,10 @@
|
||||
</button>
|
||||
</Transition>
|
||||
</div>
|
||||
<NewModal ref="viewLogModal" class="z-[9999]" header="Viewing selected logs">
|
||||
<NewModal ref="viewLogModal" class="z-9999" header="Viewing selected logs">
|
||||
<div class="text-contrast">
|
||||
<pre
|
||||
class="select-text overflow-x-auto whitespace-pre rounded-lg bg-bg font-mono"
|
||||
class="bg-bg overflow-x-auto rounded-lg font-mono whitespace-pre select-text"
|
||||
v-html="processedLogWithLinks"
|
||||
></pre>
|
||||
<div v-if="detectedLinks.length" class="border-contrast/20 mt-4 border-t pt-4">
|
||||
@@ -282,7 +282,7 @@
|
||||
:href="link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-sm text-blue hover:underline"
|
||||
class="text-blue text-sm hover:underline"
|
||||
>
|
||||
{{ link }}
|
||||
</a>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
Select the version of {{ props.project?.title || "the modpack" }} you want to install on
|
||||
your server.
|
||||
</p>
|
||||
<p v-if="props.currentVersion" class="m-0 text-sm text-secondary">
|
||||
<p v-if="props.currentVersion" class="text-secondary m-0 text-sm">
|
||||
Currently installed: {{ props.currentVersion.version_number }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -26,9 +26,9 @@
|
||||
class="w-full max-w-full"
|
||||
/>
|
||||
|
||||
<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
|
||||
<div class="bg-table-alternate-row flex w-full flex-col gap-2 rounded-2xl p-4">
|
||||
<div class="flex w-full flex-row items-center justify-between">
|
||||
<label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
|
||||
<label class="text-contrast w-full text-lg font-bold" for="modpack-hard-reset">
|
||||
Erase all data
|
||||
</label>
|
||||
<input
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
|
||||
<div class="mx-auto flex flex-row items-center gap-4">
|
||||
<div
|
||||
class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
|
||||
class="border-button-border bg-button-bg grid size-16 place-content-center rounded-2xl border-2 shadow-xs"
|
||||
>
|
||||
<UploadIcon class="size-10" />
|
||||
</div>
|
||||
@@ -35,13 +35,13 @@
|
||||
<path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
|
||||
</svg>
|
||||
<div
|
||||
class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
|
||||
class="border-button-border bg-table-alternate-row grid size-16 place-content-center rounded-2xl border-2 shadow-xs"
|
||||
>
|
||||
<ServerIcon class="size-10" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
|
||||
<div class="text-sm font-bold text-contrast">Upload mrpack</div>
|
||||
<div class="bg-table-alternate-row flex w-full flex-col gap-2 rounded-2xl p-4">
|
||||
<div class="text-contrast text-sm font-bold">Upload mrpack</div>
|
||||
<input
|
||||
type="file"
|
||||
accept=".mrpack"
|
||||
@@ -51,9 +51,9 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
|
||||
<div class="bg-table-alternate-row flex w-full flex-col gap-2 rounded-2xl p-4">
|
||||
<div class="flex w-full flex-row items-center justify-between">
|
||||
<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
|
||||
<label class="text-contrast w-full text-lg font-bold" for="hard-reset">
|
||||
Erase all data
|
||||
</label>
|
||||
<input
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<div v-if="!isSecondPhase" class="flex flex-col gap-4">
|
||||
<div class="mx-auto flex flex-row items-center gap-4">
|
||||
<div
|
||||
class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
|
||||
class="border-button-border bg-button-bg grid size-16 place-content-center rounded-2xl border-2 shadow-xs"
|
||||
>
|
||||
<UiServersIconsLoaderIcon class="size-10" :loader="selectedLoader" />
|
||||
</div>
|
||||
@@ -46,19 +46,19 @@
|
||||
<path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
|
||||
</svg>
|
||||
<div
|
||||
class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
|
||||
class="border-button-border bg-table-alternate-row grid size-16 place-content-center rounded-2xl border-2 shadow-xs"
|
||||
>
|
||||
<ServerIcon class="size-10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
|
||||
<div class="text-lg font-bold text-contrast">Minecraft version</div>
|
||||
<div class="bg-table-alternate-row flex w-full flex-col gap-2 rounded-2xl p-4">
|
||||
<div class="text-contrast text-lg font-bold">Minecraft version</div>
|
||||
<UiServersTeleportDropdownMenu
|
||||
v-model="selectedMCVersion"
|
||||
name="mcVersion"
|
||||
:options="mcVersions"
|
||||
class="w-full max-w-[100%]"
|
||||
class="w-full max-w-full"
|
||||
placeholder="Select Minecraft version..."
|
||||
/>
|
||||
<div class="mt-2 flex items-center justify-between gap-2">
|
||||
@@ -81,18 +81,18 @@
|
||||
v-if="selectedLoader.toLowerCase() !== 'vanilla'"
|
||||
class="flex w-full flex-col gap-2 rounded-2xl p-4"
|
||||
:class="{
|
||||
'bg-table-alternateRow':
|
||||
'bg-table-alternate-row':
|
||||
!selectedMCVersion || isLoading || selectedLoaderVersions.length > 0,
|
||||
'bg-highlight-red':
|
||||
selectedMCVersion && !isLoading && selectedLoaderVersions.length === 0,
|
||||
}"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="text-lg font-bold text-contrast">{{ selectedLoader }} version</div>
|
||||
<div class="text-contrast text-lg font-bold">{{ selectedLoader }} version</div>
|
||||
|
||||
<template v-if="!selectedMCVersion">
|
||||
<div
|
||||
class="relative flex h-9 w-full select-none items-center rounded-xl bg-button-bg px-4 opacity-50"
|
||||
class="bg-button-bg relative flex h-9 w-full items-center rounded-xl px-4 opacity-50 select-none"
|
||||
>
|
||||
Select a Minecraft version to see available versions
|
||||
<DropdownIcon class="absolute right-4" />
|
||||
@@ -100,7 +100,7 @@
|
||||
</template>
|
||||
<template v-else-if="isLoading">
|
||||
<div
|
||||
class="relative flex h-9 w-full items-center rounded-xl bg-button-bg px-4 opacity-50"
|
||||
class="bg-button-bg relative flex h-9 w-full items-center rounded-xl px-4 opacity-50"
|
||||
>
|
||||
<UiServersIconsLoadingIcon class="mr-2 animate-spin" />
|
||||
Loading versions...
|
||||
@@ -112,7 +112,7 @@
|
||||
v-model="selectedLoaderVersion"
|
||||
name="loaderVersion"
|
||||
:options="selectedLoaderVersions"
|
||||
class="w-full max-w-[100%]"
|
||||
class="w-full max-w-full"
|
||||
:placeholder="
|
||||
selectedLoader.toLowerCase() === 'paper' ||
|
||||
selectedLoader.toLowerCase() === 'purpur'
|
||||
@@ -129,10 +129,10 @@
|
||||
|
||||
<div
|
||||
v-if="!initialSetup"
|
||||
class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4"
|
||||
class="bg-table-alternate-row flex w-full flex-col gap-2 rounded-2xl p-4"
|
||||
>
|
||||
<div class="flex w-full flex-row items-center justify-between">
|
||||
<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
|
||||
<label class="text-contrast w-full text-lg font-bold" for="hard-reset">
|
||||
Erase all data
|
||||
</label>
|
||||
<input
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<div
|
||||
v-if="props.isVisible"
|
||||
data-pyro-save-banner
|
||||
class="fixed bottom-16 left-0 right-0 z-[6] mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
|
||||
class="fixed right-0 bottom-16 left-0 z-6 mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
|
||||
>
|
||||
<div class="mx-2 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-4">
|
||||
<div class="border-button-border bg-bg-raised mx-2 rounded-2xl border-2 p-4">
|
||||
<div class="flex flex-col items-center justify-between gap-2 md:flex-row">
|
||||
<span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
|
||||
<span class="text-contrast font-bold">Careful, you have unsaved changes!</span>
|
||||
<div class="flex gap-2">
|
||||
<ButtonStyled type="transparent" color="standard">
|
||||
<button :disabled="props.isUpdating" @click="props.reset">Reset</button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div
|
||||
v-if="game"
|
||||
v-tooltip="'Change server version'"
|
||||
class="min-w-0 flex-none flex-row items-center gap-2 first:!flex"
|
||||
class="min-w-0 flex-none flex-row items-center gap-2 first:flex!"
|
||||
>
|
||||
<GameIcon aria-hidden="true" class="size-5 shrink-0" />
|
||||
<NuxtLink
|
||||
@@ -14,13 +14,13 @@
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
{{ game[0].toUpperCase() + game.slice(1) }}
|
||||
<span v-if="mcVersion">{{ mcVersion }}</span>
|
||||
<span v-else class="inline-block h-3 w-12 animate-pulse rounded bg-button-border"></span>
|
||||
<span v-else class="bg-button-border inline-block h-3 w-12 animate-pulse rounded-sm"></span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<div v-else class="flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold">
|
||||
{{ game[0].toUpperCase() + game.slice(1) }}
|
||||
<span v-if="mcVersion">{{ mcVersion }}</span>
|
||||
<span v-else class="inline-block h-3 w-16 animate-pulse rounded bg-button-border"></span>
|
||||
<span v-else class="bg-button-border inline-block h-3 w-16 animate-pulse rounded-sm"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div
|
||||
class="experimental-styles-within flex size-24 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
|
||||
class="experimental-styles-within border-button-border bg-button-bg flex size-24 shrink-0 overflow-hidden rounded-xl border shadow-xs"
|
||||
>
|
||||
<client-only>
|
||||
<img
|
||||
v-if="image"
|
||||
class="h-full w-full select-none object-fill"
|
||||
class="h-full w-full object-fill select-none"
|
||||
alt="Server Icon"
|
||||
:src="image"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
class="h-full w-full select-none object-fill"
|
||||
class="h-full w-full object-fill select-none"
|
||||
alt="Server Icon"
|
||||
src="~/assets/images/servers/minecraft_server_icon.png"
|
||||
/>
|
||||
|
||||
@@ -28,12 +28,12 @@
|
||||
<div class="flex h-full w-full flex-col">
|
||||
<div v-if="data && versions" class="flex w-full flex-col">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="flex select-none flex-col items-center justify-between gap-2 lg:flex-row">
|
||||
<div class="flex flex-col items-center justify-between gap-2 select-none lg:flex-row">
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<h2 class="m-0 text-lg font-bold text-contrast">Modpack</h2>
|
||||
<h2 class="text-contrast m-0 text-lg font-bold">Modpack</h2>
|
||||
<div
|
||||
v-if="updateAvailable"
|
||||
class="rounded-full bg-bg-orange px-2 py-1 text-xs font-medium text-orange"
|
||||
class="bg-bg-orange text-orange rounded-full px-2 py-1 text-xs font-medium"
|
||||
>
|
||||
<span>Update available</span>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@
|
||||
<div v-if="data.upstream" class="flex gap-4">
|
||||
<ButtonStyled>
|
||||
<button
|
||||
class="!w-full sm:!w-auto"
|
||||
class="w-full! sm:w-auto!"
|
||||
:disabled="isInstalling"
|
||||
@click="mrpackModal.show()"
|
||||
>
|
||||
@@ -66,10 +66,10 @@
|
||||
<div v-if="data.upstream" class="flex flex-col gap-2">
|
||||
<div
|
||||
v-if="versionsError || currentVersionError"
|
||||
class="rounded-2xl border border-solid border-red p-4 text-contrast"
|
||||
class="border-red text-contrast rounded-2xl border p-4"
|
||||
>
|
||||
<p class="m-0 font-bold">Something went wrong while loading your modpack.</p>
|
||||
<p class="m-0 mb-2 mt-1 text-sm">
|
||||
<p class="m-0 mt-1 mb-2 text-sm">
|
||||
{{ versionsError || currentVersionError }}
|
||||
</p>
|
||||
<ButtonStyled>
|
||||
@@ -79,7 +79,7 @@
|
||||
|
||||
<NewProjectCard
|
||||
v-if="!versionsError && !currentVersionError"
|
||||
class="!cursor-default !bg-bg !filter-none"
|
||||
class="bg-bg! cursor-default! filter-none!"
|
||||
:project="projectCardData"
|
||||
:categories="data.project?.categories || []"
|
||||
>
|
||||
@@ -98,7 +98,7 @@
|
||||
<nuxt-link
|
||||
v-tooltip="backupInProgress ? formatMessage(backupInProgress.tooltip) : undefined"
|
||||
:class="{ disabled: backupInProgress }"
|
||||
class="!w-full sm:!w-auto"
|
||||
class="w-full! sm:w-auto!"
|
||||
:to="`/modpacks?sid=${props.server.serverId}`"
|
||||
>
|
||||
<CompassIcon class="size-4" /> Find a modpack
|
||||
@@ -109,7 +109,7 @@
|
||||
<button
|
||||
v-tooltip="backupInProgress ? formatMessage(backupInProgress.tooltip) : undefined"
|
||||
:disabled="!!backupInProgress"
|
||||
class="!w-full sm:!w-auto"
|
||||
class="w-full! sm:w-auto!"
|
||||
@click="mrpackModal.show()"
|
||||
>
|
||||
<UploadIcon class="size-4" /> Upload .mrpack file
|
||||
@@ -120,11 +120,11 @@
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="m-0 text-lg font-bold text-contrast">Platform</h2>
|
||||
<h2 class="text-contrast m-0 text-lg font-bold">Platform</h2>
|
||||
<p class="m-0">Your server's platform is the software that runs mods and plugins.</p>
|
||||
<div v-if="data.upstream" class="mt-2 flex items-center gap-2">
|
||||
<InfoIcon class="hidden sm:block" />
|
||||
<span class="text-sm text-secondary">
|
||||
<span class="text-secondary text-sm">
|
||||
The current platform was automatically selected based on your modpack.
|
||||
</span>
|
||||
</div>
|
||||
@@ -132,7 +132,7 @@
|
||||
<div
|
||||
class="flex w-full flex-col gap-1 rounded-2xl"
|
||||
:class="{
|
||||
'pointer-events-none cursor-not-allowed select-none opacity-50':
|
||||
'pointer-events-none cursor-not-allowed opacity-50 select-none':
|
||||
props.server.general?.status === 'installing',
|
||||
}"
|
||||
:tabindex="props.server.general?.status === 'installing' ? -1 : 0"
|
||||
|
||||
@@ -11,27 +11,27 @@
|
||||
: 'This server has been suspended. Please visit your billing settings or contact Modrinth Support for more information.'
|
||||
: ''
|
||||
"
|
||||
class="flex cursor-pointer flex-row items-center overflow-x-hidden rounded-3xl bg-bg-raised p-4 transition-transform duration-100"
|
||||
:class="status === 'suspended' ? '!rounded-b-none opacity-75' : 'active:scale-95'"
|
||||
class="bg-bg-raised flex cursor-pointer flex-row items-center overflow-x-hidden rounded-3xl p-4 transition-transform duration-100"
|
||||
:class="status === 'suspended' ? 'rounded-b-none! opacity-75' : 'active:scale-95'"
|
||||
data-pyro-server-listing
|
||||
:data-pyro-server-listing-id="server_id"
|
||||
>
|
||||
<UiServersServerIcon v-if="status !== 'suspended'" :image="image" />
|
||||
<div
|
||||
v-else
|
||||
class="bg-bg-secondary flex size-24 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
|
||||
class="bg-bg-secondary border-button-border bg-button-bg flex size-24 items-center justify-center rounded-xl border shadow-xs"
|
||||
>
|
||||
<LockIcon class="size-20 text-secondary" />
|
||||
<LockIcon class="text-secondary size-20" />
|
||||
</div>
|
||||
<div class="ml-8 flex flex-col gap-2.5">
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
|
||||
<h2 class="text-contrast m-0 text-xl font-bold">{{ name }}</h2>
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="projectData?.title"
|
||||
class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
|
||||
class="text-secondary m-0 flex flex-row items-center gap-2 text-sm font-medium"
|
||||
>
|
||||
<UiAvatar
|
||||
:src="iconUrl"
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
<div
|
||||
v-if="isConfiguring"
|
||||
class="flex min-w-0 items-center gap-2 truncate text-sm font-semibold text-brand"
|
||||
class="text-brand flex min-w-0 items-center gap-2 truncate text-sm font-semibold"
|
||||
>
|
||||
<SparklesIcon class="size-5 shrink-0" /> New server
|
||||
</div>
|
||||
@@ -55,23 +55,23 @@
|
||||
:show-game-label="showGameLabel"
|
||||
:show-loader-label="showLoaderLabel"
|
||||
:linked="false"
|
||||
class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
|
||||
class="text-secondary pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 *:hidden sm:flex-row sm:*:flex"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="status === 'suspended' && suspension_reason === 'upgrading'"
|
||||
class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-blue p-4 text-sm font-bold text-contrast"
|
||||
class="bg-bg-blue text-contrast relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl p-4 text-sm font-bold"
|
||||
>
|
||||
<UiServersPanelSpinner />
|
||||
Your server's hardware is currently being upgraded and will be back online shortly.
|
||||
</div>
|
||||
<div
|
||||
v-else-if="status === 'suspended'"
|
||||
class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
|
||||
class="bg-bg-red text-contrast relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl p-4 text-sm font-bold"
|
||||
>
|
||||
<div class="flex flex-row gap-2">
|
||||
<UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been suspended. Please
|
||||
<UiServersIconsPanelErrorIcon class="size-5!" /> Your server has been suspended. Please
|
||||
update your billing information or contact Modrinth Support for more information.
|
||||
</div>
|
||||
<UiCopyCode :text="`${props.server_id}`" class="ml-auto" />
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div class="flex flex-row items-center gap-8 overflow-x-hidden rounded-3xl bg-bg-raised p-4">
|
||||
<div class="bg-bg-raised flex flex-row items-center gap-8 overflow-x-hidden rounded-3xl p-4">
|
||||
<div class="relative grid place-content-center">
|
||||
<img
|
||||
no-shadow
|
||||
size="lg"
|
||||
alt="Server Icon"
|
||||
class="size-[96px] rounded-xl bg-bg-raised opacity-50"
|
||||
class="bg-bg-raised size-[96px] rounded-xl opacity-50"
|
||||
src="~/assets/images/servers/minecraft_server_icon.png"
|
||||
/>
|
||||
<div class="absolute inset-0 grid place-content-center">
|
||||
<UiServersIconsLoadingIcon class="size-8 animate-spin text-contrast" />
|
||||
<UiServersIconsLoadingIcon class="text-contrast size-8 animate-spin" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2 class="m-0 text-contrast">Your new server is being prepared.</h2>
|
||||
<h2 class="text-contrast m-0">Your new server is being prepared.</h2>
|
||||
<p class="m-0">It'll appear here once it's ready.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-4 truncate">
|
||||
<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
|
||||
<div v-if="!noSeparator" class="experimental-styles-within bg-button-border h-6 w-0.5"></div>
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<UiServersIconsLoaderIcon v-if="loader" :loader="loader" class="flex shrink-0 [&&]:size-5" />
|
||||
<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
|
||||
<div v-else class="bg-button-border size-5 shrink-0 animate-pulse rounded-full"></div>
|
||||
<NuxtLink
|
||||
v-if="isLink"
|
||||
:to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
|
||||
@@ -15,8 +15,8 @@
|
||||
<span v-if="loaderVersion">{{ loaderVersion }}</span>
|
||||
</span>
|
||||
<span v-else class="flex gap-2">
|
||||
<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
|
||||
<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
|
||||
<span class="bg-button-border inline-block h-4 w-12 animate-pulse rounded-sm"></span>
|
||||
<span class="bg-button-border inline-block h-4 w-12 animate-pulse rounded-sm"></span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
<div v-else class="min-w-0 text-sm font-semibold">
|
||||
@@ -25,8 +25,8 @@
|
||||
<span v-if="loaderVersion">{{ loaderVersion }}</span>
|
||||
</span>
|
||||
<span v-else class="flex gap-2">
|
||||
<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
|
||||
<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
|
||||
<span class="bg-button-border inline-block h-4 w-12 animate-pulse rounded-sm"></span>
|
||||
<span class="bg-button-border inline-block h-4 w-12 animate-pulse rounded-sm"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
class="max-w-[360px]"
|
||||
style="mask-image: radial-gradient(97% 77% at 50% 25%, #d9d9d9 0, hsla(0, 0%, 45%, 0) 100%)"
|
||||
/>
|
||||
<h1 class="m-0 text-contrast">You don't have any servers yet!</h1>
|
||||
<h1 class="text-contrast m-0">You don't have any servers yet!</h1>
|
||||
<p class="m-0">Modrinth Servers is a new way to play modded Minecraft with your friends.</p>
|
||||
<ButtonStyled size="large" type="standard" color="brand">
|
||||
<NuxtLink to="/servers#plan">Create a Server</NuxtLink>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="static w-full grid-cols-1 md:relative md:flex">
|
||||
<div class="static h-full flex-col pb-4 md:flex md:pb-0 md:pr-4">
|
||||
<div class="z-10 flex select-none flex-col gap-2 rounded-2xl bg-bg-raised p-4 md:w-[16rem]">
|
||||
<div class="static h-full flex-col pb-4 md:flex md:pr-4 md:pb-0">
|
||||
<div class="bg-bg-raised z-10 flex flex-col gap-2 rounded-2xl p-4 select-none md:w-[16rem]">
|
||||
<div v-for="link in navLinks" :key="link.label">
|
||||
<NuxtLink
|
||||
:to="link.href"
|
||||
class="flex items-center gap-2 rounded-xl p-2 hover:bg-button-bg"
|
||||
class="hover:bg-button-bg flex items-center gap-2 rounded-xl p-2"
|
||||
:class="{ 'bg-button-bg text-contrast': route.path === link.href }"
|
||||
>
|
||||
<div class="flex items-center gap-2 font-bold">
|
||||
@@ -13,7 +13,7 @@
|
||||
{{ link.label }}
|
||||
</div>
|
||||
|
||||
<div class="flex-grow" />
|
||||
<div class="grow" />
|
||||
<RightArrowIcon v-if="link.external" class="size-4" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
@@ -2,22 +2,22 @@
|
||||
<div
|
||||
data-pyro-server-stats
|
||||
style="font-variant-numeric: tabular-nums"
|
||||
class="flex select-none flex-col items-center gap-6 md:flex-row"
|
||||
class="flex flex-col items-center gap-6 select-none md:flex-row"
|
||||
:class="{ 'pointer-events-none': loading }"
|
||||
:aria-hidden="loading"
|
||||
>
|
||||
<div
|
||||
v-for="(metric, index) in metrics"
|
||||
:key="index"
|
||||
class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
|
||||
class="bg-bg-raised relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl p-8"
|
||||
>
|
||||
<div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
|
||||
<div class="relative z-10">
|
||||
<div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
|
||||
<h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">{{ metric.value }}</h2>
|
||||
<h3 class="text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
|
||||
<div class="mt-0.5 -mb-0.5 flex flex-row items-center gap-2">
|
||||
<h2 class="text-contrast m-0 -ml-0.5 text-3xl font-extrabold">{{ metric.value }}</h2>
|
||||
<h3 class="text-secondary text-sm font-normal">/ {{ metric.max }}</h3>
|
||||
</div>
|
||||
<h3 class="flex items-center gap-2 text-base font-normal text-secondary">
|
||||
<h3 class="text-secondary flex items-center gap-2 text-base font-normal">
|
||||
{{ metric.title }}
|
||||
<IssuesIcon
|
||||
v-if="metric.warning && !loading"
|
||||
@@ -27,12 +27,12 @@
|
||||
/>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="absolute -left-8 -top-4 h-28 w-56 rounded-full bg-bg-raised blur-lg" />
|
||||
<div class="bg-bg-raised absolute -top-4 -left-8 h-28 w-56 rounded-full blur-lg" />
|
||||
</div>
|
||||
|
||||
<component
|
||||
:is="metric.icon"
|
||||
class="absolute right-10 top-10 z-10 size-8"
|
||||
class="absolute top-10 right-10 z-10 size-8"
|
||||
style="width: 2rem; height: 2rem"
|
||||
/>
|
||||
|
||||
@@ -54,16 +54,16 @@
|
||||
<component
|
||||
:is="loading ? 'div' : 'NuxtLink'"
|
||||
:to="loading ? undefined : `/servers/manage/${serverId}/files`"
|
||||
class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
|
||||
class="bg-bg-raised relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl p-8"
|
||||
:class="loading ? '' : 'transition-transform duration-100 hover:scale-105 active:scale-100'"
|
||||
>
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">
|
||||
<h2 class="text-contrast m-0 mt-1 -ml-0.5 text-3xl font-extrabold">
|
||||
{{ loading ? "0 B" : formatBytes(stats.storage_usage_bytes) }}
|
||||
</h2>
|
||||
</div>
|
||||
<h3 class="text-base font-normal text-secondary">Storage usage</h3>
|
||||
<FolderOpenIcon class="absolute right-10 top-10 size-8" />
|
||||
<h3 class="text-secondary text-base font-normal">Storage usage</h3>
|
||||
<FolderOpenIcon class="absolute top-10 right-10 size-8" />
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
v-tooltip="'Copy custom URL'"
|
||||
class="flex min-w-0 flex-row items-center gap-4 truncate hover:cursor-pointer"
|
||||
>
|
||||
<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
|
||||
<div v-if="!noSeparator" class="experimental-styles-within bg-button-border h-6 w-0.5"></div>
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<LinkIcon class="flex size-5 shrink-0" />
|
||||
<div
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-4"
|
||||
data-pyro-uptime
|
||||
>
|
||||
<div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
|
||||
<div v-if="!noSeparator" class="experimental-styles-within bg-button-border h-6 w-0.5"></div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<UiServersIconsTimer class="flex size-5 shrink-0" />
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
:aria-expanded="dropdownVisible"
|
||||
:aria-controls="listboxId"
|
||||
:aria-labelledby="listboxId"
|
||||
class="duration-50 flex h-full w-full cursor-pointer select-none appearance-none items-center justify-between gap-4 rounded-xl border-none bg-button-bg px-4 py-2 shadow-sm !outline-none transition-all ease-in-out"
|
||||
class="bg-button-bg flex h-full w-full cursor-pointer appearance-none items-center justify-between gap-4 rounded-xl border-none px-4 py-2 shadow-xs outline-hidden! transition-all duration-50 ease-in-out select-none"
|
||||
:class="triggerClasses"
|
||||
@click="toggleDropdown"
|
||||
@keydown="handleTriggerKeyDown"
|
||||
@@ -35,7 +35,7 @@
|
||||
role="listbox"
|
||||
tabindex="-1"
|
||||
:aria-activedescendant="activeDescendant"
|
||||
class="experimental-styles-within fixed z-50 bg-button-bg shadow-lg outline-none"
|
||||
class="experimental-styles-within bg-button-bg fixed z-50 shadow-lg outline-hidden"
|
||||
:class="{
|
||||
'rounded-b-xl': !isRenderingUp,
|
||||
'rounded-t-xl': isRenderingUp,
|
||||
@@ -64,9 +64,9 @@
|
||||
:id="`${listboxId}-option-${item.index}`"
|
||||
role="option"
|
||||
:aria-selected="selectedValue === item.option"
|
||||
class="hover:brightness-85 flex h-full cursor-pointer select-none items-center px-4 transition-colors duration-150 ease-in-out"
|
||||
class="flex h-full cursor-pointer items-center px-4 transition-colors duration-150 ease-in-out select-none hover:brightness-85"
|
||||
:class="{
|
||||
'bg-brand font-bold text-brand-inverted': selectedValue === item.option,
|
||||
'bg-brand text-brand-inverted font-bold': selectedValue === item.option,
|
||||
'bg-bg-raised': focusedOptionIndex === item.index,
|
||||
'rounded-b-xl': item.index === props.options.length - 1 && !isRenderingUp,
|
||||
'rounded-t-xl': item.index === 0 && isRenderingUp,
|
||||
@@ -177,7 +177,7 @@ const radioValue = computed<OptionValue>({
|
||||
});
|
||||
|
||||
const triggerClasses = computed(() => ({
|
||||
"!cursor-not-allowed opacity-50 grayscale": props.disabled,
|
||||
"cursor-not-allowed! opacity-50 grayscale": props.disabled,
|
||||
"rounded-b-none": dropdownVisible.value && !isRenderingUp.value && !props.disabled,
|
||||
"rounded-t-none": dropdownVisible.value && isRenderingUp.value && !props.disabled,
|
||||
}));
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
v-if="isOpen"
|
||||
ref="menuRef"
|
||||
data-pyro-telepopover-root
|
||||
class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-divider bg-bg-raised p-2 shadow-lg"
|
||||
class="experimental-styles-within border-divider bg-bg-raised fixed isolate z-9999 flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border p-2 shadow-lg"
|
||||
:style="menuStyle"
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
@@ -36,7 +36,7 @@
|
||||
v-for="(option, index) in filteredOptions"
|
||||
:key="isDivider(option) ? `divider-${index}` : option.id"
|
||||
>
|
||||
<div v-if="isDivider(option)" class="h-px w-full bg-button-bg"></div>
|
||||
<div v-if="isDivider(option)" class="bg-button-bg h-px w-full"></div>
|
||||
<ButtonStyled v-else type="transparent" role="menuitem" :color="option.color">
|
||||
<button
|
||||
v-if="typeof option.action === 'function'"
|
||||
@@ -45,7 +45,7 @@
|
||||
if (el) menuItemsRef[index] = el as HTMLElement;
|
||||
}
|
||||
"
|
||||
class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
|
||||
class="w-full justify-start! whitespace-nowrap! focus-visible:outline-hidden!"
|
||||
:aria-selected="index === selectedIndex"
|
||||
:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
|
||||
@click="handleItemClick(option, index)"
|
||||
@@ -62,7 +62,7 @@
|
||||
}
|
||||
"
|
||||
:to="option.action"
|
||||
class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
|
||||
class="w-full justify-start! whitespace-nowrap! focus-visible:outline-hidden!"
|
||||
:aria-selected="index === selectedIndex"
|
||||
:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
|
||||
@click="handleItemClick(option, index)"
|
||||
@@ -80,7 +80,7 @@
|
||||
"
|
||||
:href="option.action"
|
||||
target="_blank"
|
||||
class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
|
||||
class="w-full justify-start! whitespace-nowrap! focus-visible:outline-hidden!"
|
||||
:aria-selected="index === selectedIndex"
|
||||
:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
|
||||
@click="handleItemClick(option, index)"
|
||||
|
||||
@@ -108,22 +108,22 @@ const billingMonths = computed(() => {
|
||||
}
|
||||
: undefined
|
||||
"
|
||||
class="flex w-full flex-col justify-between gap-4 rounded-2xl bg-bg p-8 text-left"
|
||||
class="bg-bg flex w-full flex-col justify-between gap-4 rounded-2xl p-8 text-left"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-row flex-wrap items-center gap-3">
|
||||
<h1 class="m-0">{{ formatMessage(plans[plan].name) }}</h1>
|
||||
<h1 class="m-0 text-3xl">{{ formatMessage(plans[plan].name) }}</h1>
|
||||
<div
|
||||
v-if="plans[plan].mostPopular"
|
||||
class="rounded-full bg-brand-highlight px-2 py-1 text-xs font-bold text-brand"
|
||||
class="bg-highlight-brand text-brand rounded-full px-2 py-1 text-xs font-bold"
|
||||
>
|
||||
Most popular
|
||||
</div>
|
||||
</div>
|
||||
<span class="m-0 text-2xl font-bold text-contrast">
|
||||
<span class="text-contrast m-0 text-2xl font-bold">
|
||||
{{ formatPrice(locale, price / billingMonths, currency, true) }}
|
||||
{{ isUsa ? "" : currency }}
|
||||
<span class="text-lg font-semibold text-secondary">
|
||||
<span class="text-secondary text-lg font-semibold">
|
||||
/ month<template v-if="interval !== 'monthly'">, billed {{ interval }}</template>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -110,7 +110,7 @@ defineExpose({ show, hide });
|
||||
<template>
|
||||
<NewModal ref="modal" :on-hide="() => emit('close')">
|
||||
<template #title>
|
||||
<span class="text-lg font-extrabold text-contrast">
|
||||
<span class="text-contrast text-lg font-extrabold">
|
||||
Editing assignments of notice #{{ notice?.id }}
|
||||
</span>
|
||||
</template>
|
||||
@@ -125,7 +125,7 @@ defineExpose({ show, hide });
|
||||
/>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="server-assign-field" class="flex flex-col gap-1">
|
||||
<span class="text-lg font-semibold text-contrast"> Assigned servers </span>
|
||||
<span class="text-contrast text-lg font-semibold"> Assigned servers </span>
|
||||
</label>
|
||||
<Accordion
|
||||
v-if="assignedServers.length > 0"
|
||||
@@ -149,7 +149,7 @@ defineExpose({ show, hide });
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="server-assign-field" class="flex flex-col gap-1">
|
||||
<span class="text-lg font-semibold text-contrast"> Assigned nodes </span>
|
||||
<span class="text-contrast text-lg font-semibold"> Assigned nodes </span>
|
||||
</label>
|
||||
<Accordion
|
||||
v-if="assignedNodes.length > 0"
|
||||
@@ -175,7 +175,7 @@ defineExpose({ show, hide });
|
||||
</Accordion>
|
||||
<span v-else class="mb-2"> No nodes assigned yet </span>
|
||||
</div>
|
||||
<div class="flex w-[45rem] items-center gap-2">
|
||||
<div class="flex w-180 items-center gap-2">
|
||||
<input
|
||||
id="server-assign-field"
|
||||
v-model="inputField"
|
||||
|
||||
@@ -14,7 +14,7 @@ const props = defineProps<{
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-span-full grid grid-cols-subgrid gap-4 rounded-2xl bg-bg-raised p-4">
|
||||
<div class="bg-bg-raised col-span-full grid grid-cols-subgrid gap-4 rounded-2xl p-4">
|
||||
<div class="col-span-full grid grid-cols-subgrid items-center gap-4">
|
||||
<div>
|
||||
<CopyCode :text="`${notice.id}`" />
|
||||
@@ -104,7 +104,7 @@ const props = defineProps<{
|
||||
</span>
|
||||
•
|
||||
<button
|
||||
class="m-0 flex items-center gap-1 border-none bg-transparent p-0 text-blue hover:underline hover:brightness-125 active:scale-95 active:brightness-150"
|
||||
class="text-blue m-0 flex items-center gap-1 border-none bg-transparent p-0 hover:underline hover:brightness-125 active:scale-95 active:brightness-150"
|
||||
@click="() => startEditing(notice, true)"
|
||||
>
|
||||
<SettingsIcon />
|
||||
|
||||
@@ -13,13 +13,13 @@
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="animation-ring-3 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-40"
|
||||
class="animation-ring-3 border-brand bg-highlight-brand flex items-center justify-center rounded-full border-4 opacity-40"
|
||||
></div>
|
||||
<div
|
||||
class="animation-ring-2 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-60"
|
||||
class="animation-ring-2 border-brand bg-highlight-brand flex items-center justify-center rounded-full border-4 opacity-60"
|
||||
></div>
|
||||
<div
|
||||
class="animation-ring-1 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight text-9xl font-extrabold text-contrast"
|
||||
class="animation-ring-1 border-brand bg-highlight-brand text-contrast flex items-center justify-center rounded-full border-4 text-9xl font-extrabold"
|
||||
>
|
||||
?
|
||||
</div>
|
||||
@@ -112,11 +112,11 @@
|
||||
</template>
|
||||
</PagewideBanner>
|
||||
<header
|
||||
class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
|
||||
class="experimental-styles-within desktop-only relative z-5 mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
|
||||
>
|
||||
<div>
|
||||
<NuxtLink to="/" aria-label="Modrinth home page">
|
||||
<BrandTextLogo aria-hidden="true" class="h-7 w-auto text-contrast" />
|
||||
<BrandTextLogo aria-hidden="true" class="text-contrast h-7 w-auto" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div
|
||||
@@ -246,7 +246,7 @@
|
||||
<CompassIcon v-else aria-hidden="true" />
|
||||
<span class="hidden md:contents">Discover content</span>
|
||||
<span class="contents md:hidden">Discover</span>
|
||||
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
|
||||
<DropdownIcon aria-hidden="true" class="text-secondary h-5 w-5" />
|
||||
|
||||
<template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
|
||||
<template #resourcepacks>
|
||||
@@ -321,7 +321,7 @@
|
||||
]"
|
||||
>
|
||||
<ModrinthIcon aria-hidden="true" />
|
||||
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
|
||||
<DropdownIcon aria-hidden="true" class="text-secondary h-5 w-5" />
|
||||
<template #review-projects> <ScaleIcon aria-hidden="true" /> Review projects </template>
|
||||
<template #review-reports> <ReportIcon aria-hidden="true" /> Reports </template>
|
||||
<template #user-lookup> <UserIcon aria-hidden="true" /> Lookup by email </template>
|
||||
@@ -355,7 +355,7 @@
|
||||
]"
|
||||
>
|
||||
<PlusIcon aria-hidden="true" />
|
||||
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
|
||||
<DropdownIcon aria-hidden="true" class="text-secondary h-5 w-5" />
|
||||
<template #new-project> <BoxIcon aria-hidden="true" /> New project </template>
|
||||
<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
|
||||
<template #new-collection>
|
||||
@@ -373,7 +373,7 @@
|
||||
:options="userMenuOptions"
|
||||
>
|
||||
<Avatar :src="auth.user.avatar_url" aria-hidden="true" circle />
|
||||
<DropdownIcon class="h-5 w-5 text-secondary" />
|
||||
<DropdownIcon class="text-secondary h-5 w-5" />
|
||||
<template #profile> <UserIcon aria-hidden="true" /> Profile </template>
|
||||
<template #notifications> <BellIcon aria-hidden="true" /> Notifications </template>
|
||||
<template #saved> <BookmarkIcon aria-hidden="true" /> Saved projects </template>
|
||||
@@ -577,12 +577,10 @@
|
||||
<OrganizationCreateModal ref="modal_organization_creation" />
|
||||
<slot id="main" />
|
||||
</main>
|
||||
<footer
|
||||
class="footer-brand-background experimental-styles-within border-0 border-t-[1px] border-solid"
|
||||
>
|
||||
<div class="mx-auto flex max-w-screen-xl flex-col gap-6 p-6 pb-20 sm:px-12 md:py-12">
|
||||
<footer class="footer-brand-background experimental-styles-within border-t border-solid">
|
||||
<div class="mx-auto flex max-w-(--breakpoint-xl) flex-col gap-6 p-6 pb-20 sm:px-12 md:py-12">
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 text-primary md:grid-cols-[1fr_2fr] lg:grid-cols-[auto_auto_auto_auto_auto]"
|
||||
class="text-primary grid grid-cols-1 gap-4 md:grid-cols-[1fr_2fr] lg:grid-cols-[auto_auto_auto_auto_auto]"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center gap-3 md:items-start"
|
||||
@@ -591,7 +589,7 @@
|
||||
>
|
||||
<BrandTextLogo
|
||||
aria-hidden="true"
|
||||
class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
|
||||
class="text-logo button-base text-contrast h-6 w-auto lg:h-8"
|
||||
@click="developerModeIncrement()"
|
||||
/>
|
||||
<div class="flex flex-wrap justify-center gap-px sm:-mx-2">
|
||||
@@ -635,7 +633,7 @@
|
||||
:key="group.label"
|
||||
class="flex flex-col items-center gap-3 sm:items-start"
|
||||
>
|
||||
<h3 class="m-0 text-base text-contrast">{{ group.label }}</h3>
|
||||
<h3 class="text-contrast m-0 text-base">{{ group.label }}</h3>
|
||||
<template v-for="item in group.links" :key="item.label">
|
||||
<nuxt-link
|
||||
v-if="item.href.startsWith('/')"
|
||||
@@ -657,7 +655,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center text-center text-xs font-medium text-secondary opacity-50">
|
||||
<div class="text-secondary flex justify-center text-center text-xs font-medium opacity-50">
|
||||
{{ formatMessage(footerMessages.legalDisclaimer) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1354,6 +1352,7 @@ const footerLinks = [
|
||||
<style lang="scss">
|
||||
@import "~/assets/styles/global.scss";
|
||||
// @import '@modrinth/assets';
|
||||
//@import "~/assets/styles/tailwind.css";
|
||||
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
|
||||
@@ -1200,7 +1200,7 @@
|
||||
"message": "Collection"
|
||||
},
|
||||
"settings.display.sidebar.advanced-rendering.description": {
|
||||
"message": "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering."
|
||||
"message": "Enables advanced rendering such as blur-sm effects that may cause performance issues without hardware-accelerated rendering."
|
||||
},
|
||||
"settings.display.sidebar.advanced-rendering.title": {
|
||||
"message": "Advanced rendering"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user