mirror of
https://github.com/HangarMC/Hangar.git
synced 2025-02-23 15:12:52 +08:00
windi config color cleanup
This commit is contained in:
fabianmakila
parent
ba079e383e
commit
36f96a2394
@ -13,12 +13,11 @@ const props = withDefaults(
|
||||
|
||||
const clazz = computed(() => {
|
||||
return {
|
||||
"bg-white": true,
|
||||
"dark:bg-background-dark-90": true,
|
||||
"background-default": true,
|
||||
border: true,
|
||||
"dark:border-neutral-800": true,
|
||||
"dark:border-gray-800": true,
|
||||
"!border-top-primary": props.accent,
|
||||
"shadow-xl": true,
|
||||
"shadow-md": true,
|
||||
"rounded-md": true,
|
||||
"p-4": true,
|
||||
"overflow-auto": true,
|
||||
|
||||
@ -34,9 +34,7 @@ const props = withDefaults(
|
||||
</template>
|
||||
</Button>
|
||||
</MenuButton>
|
||||
<MenuItems
|
||||
class="absolute flex flex-col mt-1 z-10 py-1 rounded border-t-2 border-primary-400 bg-background-light-0 dark:bg-background-dark-80 drop-shadow-xl"
|
||||
>
|
||||
<MenuItems class="absolute flex flex-col mt-1 z-10 py-1 rounded border-t-2 border-primary-400 background-default shadow-lg">
|
||||
<slot></slot>
|
||||
</MenuItems>
|
||||
</div>
|
||||
|
||||
@ -48,10 +48,7 @@ const attrs = computed(() => {
|
||||
<MenuItem>
|
||||
<component
|
||||
:is="type"
|
||||
:class="
|
||||
'px-4 py-2 font-semibold hover:(bg-background-light-10 dark:bg-background-dark-90) ' +
|
||||
(disabled ? 'cursor-not-allowed text-opacity-50' : 'cursor-pointer')
|
||||
"
|
||||
:class="'px-4 py-2 font-semibold hover:(bg-gray-100 dark:bg-gray-700) ' + (disabled ? 'cursor-not-allowed text-opacity-50' : 'cursor-pointer')"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<slot></slot>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<footer class="relative flex items-end mt-10 bg-[#ecf2fb] dark:bg-[#212121] px-8 pb-2 text-light-10 min-h-10">
|
||||
<footer class="relative flex items-end mt-10 background-default px-8 pb-2 text-light-10 min-h-10">
|
||||
<div class="footerContent w-screen">
|
||||
<div class="footerBar flex items-center justify-around mt-4 max-w-1200px m-auto text-sm">
|
||||
<p>© 2022 <a href="https://papermc.io/">PaperMC</a></p>
|
||||
|
||||
@ -63,7 +63,7 @@ authLog("render with user " + authStore.user?.name);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="background-header">
|
||||
<header class="background-default shadow-md">
|
||||
<div v-if="backendData.announcements">
|
||||
<Announcement v-for="(announcement, idx) in backendData.announcements" :key="idx" :announcement="announcement" />
|
||||
</div>
|
||||
@ -84,7 +84,7 @@ authLog("render with user " + authStore.user?.name);
|
||||
leave-to-class="translate-y-1 opacity-0"
|
||||
>
|
||||
<PopoverPanel
|
||||
class="fixed z-10 w-9/10 background-header top-1/14 left-1/20 drop-shadow-md rounded-md border-top-primary text-xs p-[20px]"
|
||||
class="fixed z-10 w-9/10 background-default top-1/14 left-1/20 drop-shadow-md rounded-md border-top-primary text-xs p-[20px]"
|
||||
md="absolute w-max top-10 rounded-none rounded-bl-md rounded-r-md"
|
||||
>
|
||||
<p class="text-base font-semibold color-primary mb-4">Hangar</p>
|
||||
@ -158,9 +158,7 @@ authLog("render with user " + authStore.user?.name);
|
||||
{{ authStore.user.name }}
|
||||
</div>
|
||||
</MenuButton>
|
||||
<MenuItems
|
||||
class="absolute flex flex-col mt-1 z-10 py-1 rounded border-t-2 border-primary-400 bg-background-light-0 dark:bg-background-dark-80 drop-shadow-xl"
|
||||
>
|
||||
<MenuItems class="absolute flex flex-col mt-1 z-10 py-1 rounded border-t-2 border-primary-400 background-default drop-shadow-xl">
|
||||
<DropdownItem :to="'/' + authStore.user.name">{{ t("nav.user.profile") }}</DropdownItem>
|
||||
<DropdownItem to="/notifications">{{ t("nav.user.notifications") }}</DropdownItem>
|
||||
<DropdownItem :href="'/' + authStore.user.name + '/settings/api-keys'">{{ t("nav.user.apiKeys") }}</DropdownItem>
|
||||
@ -199,7 +197,7 @@ authLog("render with user " + authStore.user?.name);
|
||||
|
||||
<style lang="css" scoped>
|
||||
nav .router-link-active {
|
||||
color: #4080ff;
|
||||
@apply color-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
@ -107,7 +107,7 @@ useHead(meta);
|
||||
<Alert v-if="loggedOut" type="success">You have been logged out!</Alert>
|
||||
<h2 class="text-3xl font-bold uppercase text-center my-4">{{ i18n.t("hangar.projectSearch.title") }}</h2>
|
||||
<!-- Search Bar -->
|
||||
<div class="relative rounded-md flex shadow-lg w-full max-w-screen-md">
|
||||
<div class="relative rounded-md flex shadow-md w-full max-w-screen-md">
|
||||
<!-- Text Input -->
|
||||
<input
|
||||
v-model="query"
|
||||
@ -117,7 +117,7 @@ useHead(meta);
|
||||
/>
|
||||
<!-- Sorting Button -->
|
||||
<Menu>
|
||||
<MenuButton class="bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-r-md text-left font-semibold flex items-center gap-2 text-white p-2">
|
||||
<MenuButton class="bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-r-md text-left font-semibold flex items-center gap-2 text-gray-50 p-2">
|
||||
<span class="whitespace-nowrap">{{ i18n.t("hangar.projectSearch.sortBy") }}</span>
|
||||
<icon-mdi-sort-variant class="text-xl pointer-events-none" />
|
||||
</MenuButton>
|
||||
@ -131,7 +131,7 @@ useHead(meta);
|
||||
>
|
||||
<MenuItems class="absolute right-0 top-16 flex flex-col z-10 background-header drop-shadow-md rounded-md border-top-primary">
|
||||
<MenuItem v-for="sorter in sorters" :key="sorter.id" v-slot="{ active }">
|
||||
<button :class="{ 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white': active }" class="p-2 text-left">
|
||||
<button :class="{ 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-gray-50': active }" class="p-2 text-left">
|
||||
{{ sorter.label }}
|
||||
</button>
|
||||
</MenuItem>
|
||||
|
||||
@ -28,6 +28,27 @@ export default defineConfig({
|
||||
}),
|
||||
],
|
||||
theme: {
|
||||
colors: {
|
||||
transparent: "transparent",
|
||||
current: "currentColor",
|
||||
primary: {
|
||||
0: "#E6EDFD", // old primary-50
|
||||
50: "#CCDCFB",
|
||||
100: "#99B8F6", // old primary-70
|
||||
200: "#6695F2",
|
||||
300: "#3371ED",
|
||||
400: "#004EE9", // old primary-100
|
||||
500: "#003EBA",
|
||||
600: "#002F8C",
|
||||
700: "#001F5D",
|
||||
800: "#00102F",
|
||||
900: "#000817",
|
||||
},
|
||||
red: colors.red,
|
||||
gray: colors.zinc,
|
||||
white: colors.zinc[50],
|
||||
black: colors.zinc[900],
|
||||
},
|
||||
extend: {
|
||||
typography: {
|
||||
DEFAULT: {
|
||||
@ -77,52 +98,19 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: {
|
||||
primary: {
|
||||
0: "#E6EDFD", // old primary-50
|
||||
50: "#CCDCFB",
|
||||
100: "#99B8F6", // old primary-70
|
||||
200: "#6695F2",
|
||||
300: "#3371ED",
|
||||
400: "#004EE9", // old primary-100
|
||||
500: "#003EBA",
|
||||
600: "#002F8C",
|
||||
700: "#001F5D",
|
||||
800: "#00102F",
|
||||
900: "#000817",
|
||||
},
|
||||
"primary-light": {
|
||||
0: "#FFFFFF",
|
||||
100: "#F5F8FE",
|
||||
200: "#EBF1FD",
|
||||
300: "#E0EAFC",
|
||||
400: "#D6E3FB",
|
||||
500: "#CCDCFB",
|
||||
600: "#C2D4FA",
|
||||
700: "#B8CDF9",
|
||||
800: "#ADC6F8",
|
||||
900: "#A3BFF7",
|
||||
1000: "#99B8F6",
|
||||
},
|
||||
"background-dark-90": "#111111",
|
||||
"background-dark-80": "#181a1b",
|
||||
"background-light-10": "#f8faff",
|
||||
"background-light-0": "#ffffff",
|
||||
},
|
||||
},
|
||||
},
|
||||
shortcuts: {
|
||||
"background-header": "bg-background-light-0 dark:bg-background-dark-90",
|
||||
"background-body": "bg-background-light-10 dark:bg-background-dark-80",
|
||||
"color-primary": "text-primary-400 dark:text-primary-100",
|
||||
"background-body": "bg-gray-100 dark:bg-gray-800",
|
||||
"background-default": "bg-gray-50 dark:bg-gray-900",
|
||||
"color-primary": "text-primary-400 dark:text-primary-200",
|
||||
"border-top-primary": "border-solid border-t-4 border-t-primary-400",
|
||||
"button-primary":
|
||||
"text-white bg-primary-400 disabled:(bg-primary-100 dark:(bg-primary-800 text-neutral-500) cursor-not-allowed) enabled:hover:bg-primary-300",
|
||||
"button-primary": "text-white bg-primary-400 disabled:(bg-primary-100 dark:(bg-primary-800 text-gray-500) cursor-not-allowed) enabled:hover:bg-primary-300",
|
||||
"button-transparent":
|
||||
"bg-transparent disabled:(text-black/50 dark:text-white/50 cursor-not-allowed) enabled:hover:(bg-primary-400/15 text-primary-400 dark:text-primary-100)",
|
||||
"bg-transparent disabled:(text-gray-900 dark:text-white cursor-not-allowed) enabled:hover:(bg-primary-400/15 text-primary-400 dark:text-primary-100)",
|
||||
"button-red":
|
||||
"text-white bg-red-500 dark:bg-red-600 disabled:(bg-red-300 dark:(bg-red-900 text-neutral-400) cursor-not-allowed) enabled:hover:(bg-red-400 dark:bg-red-500)",
|
||||
"text-white bg-red-500 dark:bg-red-600 disabled:(bg-red-300 dark:(bg-red-900 text-gray-400) cursor-not-allowed) enabled:hover:(bg-red-400 dark:bg-red-500)",
|
||||
"button-gray":
|
||||
"text-white bg-zinc-500 dark:bg-slate-700 disabled:(bg-zinc-300 text-neutral-500 dark:bg-zinc-800 cursor-not-allowed) enabled:hover:(bg-zinc-400 dark:bg-slate-600)",
|
||||
"text-white bg-gray-500 dark:bg-slate-700 disabled:(bg-gray-300 text-gray-500 dark:bg-gray-800 cursor-not-allowed) enabled:hover:(bg-gray-400 dark:bg-slate-600)",
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user