nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

style(stage-web): colors

Browse Source
This commit is contained in:
Neko Ayaka
2025-03-09 23:16:03 +08:00
parent 981649aafd
commit 372c98107a
2 changed files with 62 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-web/src/components/Menu/IconItem.vue
+30 -7
View File
@@ -12,7 +12,7 @@ defineProps<{
<RouterLink
flex="~ row"
bg="neutral-50 dark:neutral-800"
border="neutral-100 dark:neutral-700 hover:primary-500 dark:hover:primary-400 solid 2"
border="neutral-100 dark:neutral-700 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
class="menu-icon-item"
transition="all ease-in-out duration-200"
@@ -48,24 +48,47 @@ defineProps<{
</template>
<style scoped>
.menu-icon-item::after {
--at-apply: 'bg-dotted-[neutral-200] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/80] dark:hover:bg-dotted-[primary-200/20]';
.menu-icon-item {
position: relative;
overflow: hidden;
}
.menu-icon-item::before {
--at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
content: '';
position: absolute;
inset: 0;
z-index: -1;
width: 0%;
height: 100%;
transition: all 0.35s ease-in-out;
mask-image: linear-gradient(120deg, white 30%, transparent 50%);
}
.menu-icon-item:hover::before {
--at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
width: 85%;
}
.menu-icon-item::after {
--at-apply: 'bg-dotted-[neutral-200/80] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/50] dark:hover:bg-dotted-[primary-200/20]';
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
background-size: 10px 10px;
content: '';
mask-image: linear-gradient(165deg, white 30%, transparent 50%);
transition: all 0.35s ease-in-out;
}
.menu-icon-item:hover .menu-icon-item-title {
--at-apply: text-primary-500;
--at-apply: text-primary-600;
}
.menu-icon-item:hover .menu-icon-item-description {
--at-apply: text-primary-500;
--at-apply: text-primary-600;
opacity: 0.8;
}
@@ -76,11 +99,11 @@ defineProps<{
}
.dark .menu-icon-item:hover .menu-icon-item-title {
--at-apply: text-primary-400;
--at-apply: text-primary-300;
}
.dark .menu-icon-item:hover .menu-icon-item-description {
--at-apply: text-primary-400;
--at-apply: text-primary-300;
opacity: 0.8;
}
apps/stage-web/src/components/Menu/IconStatusItem.vue
+32 -19
View File
@@ -14,7 +14,7 @@ const props = defineProps<{
<div
flex="~ col"
bg="neutral-200/50 dark:neutral-700"
border="neutral-100 dark:neutral-700 hover:primary-500 dark:hover:primary-400 solid 2"
border="neutral-100 dark:neutral-700 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
class="menu-icon-status-item"
transition="all ease-in-out duration-200"
@@ -22,6 +22,7 @@ const props = defineProps<{
>
<RouterLink
flex="~ row"
class="menu-icon-status-item-link"
bg="neutral-50 dark:neutral-800"
transition="all ease-in-out duration-200"
relative w-full items-center overflow-hidden rounded-lg p-5 text-left
@@ -81,24 +82,47 @@ const props = defineProps<{
</template>
<style scoped>
.menu-icon-status-item::after {
--at-apply: 'bg-dotted-[neutral-200] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/80] dark:hover:bg-dotted-[primary-200/20]';
.menu-icon-status-item {
position: relative;
overflow: hidden;
}
.menu-icon-status-item::before {
--at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
content: '';
position: absolute;
inset: 0;
z-index: -1;
z-index: 0;
width: 0%;
height: 100%;
transition: all 0.35s ease-in-out;
mask-image: linear-gradient(120deg, white 100%);
}
.menu-icon-status-item:hover::before {
--at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
width: 50%;
}
.menu-icon-status-item-link::after {
--at-apply: 'bg-dotted-[neutral-200/80] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/50] dark:hover:bg-dotted-[primary-200/20]';
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
background-size: 10px 10px;
content: '';
mask-image: linear-gradient(165deg, white 30%, transparent 50%);
transition: all 0.35s ease-in-out;
}
.menu-icon-status-item:hover .menu-icon-status-item-title {
--at-apply: text-primary-500;
--at-apply: text-primary-600;
}
.menu-icon-status-item:hover .menu-icon-status-item-description {
--at-apply: text-primary-500;
--at-apply: text-primary-600;
opacity: 0.8;
}
@@ -106,25 +130,14 @@ const props = defineProps<{
--at-apply: text-primary-500;
scale: 1.2;
opacity: 0.2;
filter: grayscale(0);
}
.menu-icon-status-item:hover .menu-icon-status-item-icon-color {
scale: 1.2;
filter: grayscale(0);
}
.menu-icon-status-item:hover .menu-icon-status-item-icon-image {
scale: 1.2;
filter: grayscale(0);
}
.dark .menu-icon-status-item:hover .menu-icon-status-item-title {
--at-apply: text-primary-400;
--at-apply: text-primary-300;
}
.dark .menu-icon-status-item:hover .menu-icon-status-item-description {
--at-apply: text-primary-400;
--at-apply: text-primary-300;
opacity: 0.8;
}