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

style(stage-ui): improved style

Browse Source
This commit is contained in:
Neko Ayaka
2025-04-01 22:38:38 +08:00
parent 66bc92e439
commit 4e5645c21e
3 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stage-ui/src/components/Menu/IconItem.vue
+3 -3
View File
@@ -12,8 +12,8 @@ defineProps<{
<RouterLink
box="border"
flex="~ row"
bg="neutral-50 dark:neutral-800"
border="neutral-100 dark:neutral-700 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
bg="neutral-50 dark:neutral-800/50"
border="neutral-100 dark:neutral-800/25 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-400"
@@ -76,7 +76,7 @@ defineProps<{
}
.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]';
--at-apply: 'bg-dotted-[neutral-200/60] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/25] dark:hover:bg-dotted-[primary-200/20]';
position: absolute;
inset: 0;
z-index: -2;
packages/stage-ui/src/components/Menu/IconStatusItem.vue
+4 -4
View File
@@ -13,8 +13,8 @@ const props = defineProps<{
<template>
<div
flex="~ col"
bg="neutral-200/50 dark:neutral-700"
border="neutral-100 dark:neutral-700 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
bg="neutral-200/50 dark:neutral-800/50"
border="neutral-100 dark:neutral-800/25 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-400"
@@ -23,7 +23,7 @@ const props = defineProps<{
<RouterLink
flex="~ row"
class="menu-icon-status-item-link"
bg="neutral-50 dark:neutral-800"
bg="white dark:neutral-900"
transition="all ease-in-out duration-400"
relative h-full w-full items-center overflow-hidden rounded-lg p-5 text-left
:to=" props.to"
@@ -108,7 +108,7 @@ const props = defineProps<{
}
.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]';
--at-apply: 'bg-dotted-[neutral-200/80] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/40] dark:hover:bg-dotted-[primary-200/20]';
position: absolute;
inset: 0;
z-index: -2;
packages/stage-ui/stories/themes.css
+18
View File
@@ -24,3 +24,21 @@
--theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
--theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
}
*,
::before,
::after {
--_histoire-color-gray-50: 250 250 250;
--_histoire-color-gray-100: 244 244 245;
--_histoire-color-gray-200: 228 228 231;
--_histoire-color-gray-300: 212 212 216;
--_histoire-color-gray-400: 161 161 170;
--_histoire-color-gray-500: 113 113 122;
--_histoire-color-gray-600: 82 82 91;
--_histoire-color-gray-700: 18 18 18;
--_histoire-color-gray-750: 14 14 14;
--_histoire-color-gray-800: 10 10 10;
--_histoire-color-gray-850: 6 6 6;
--_histoire-color-gray-900: 2 2 2;
--_histoire-color-gray-950: 0 0 0;
}