chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip moved the category-menu css in the widget library to the themes file

Browse Source
This commit is contained in:
vkuchenik
2026-09-14 08:58:09 -07:00
parent 0c8820d109
commit 10cbedb6ef
2 changed files with 74 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/theme.js
+65 -49
View File
@@ -288,22 +288,6 @@ const homeRecipe = defineSlotRecipe({
},
})
const settingsButtonRecipe = defineSlotRecipe({
slots: ["root", "dialog"],
base: {
root: {
gap: 2,
"& > button": {
}
},
dialog: {
}
}
})
// const canvasRecipe = defineRecipe({
// base: {
// bg: "{transparent}",
@@ -486,7 +470,18 @@ const glassPanelRecipe = defineSlotRecipe({
"& > div.chakra-dialog__body": {
p: 0,
// everything below is specific to the widget menu found in the settings button component
// IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
// box container of the widget category menu
"& div.chakra-tabs__root > div:first-child": {
position: "relative",
display: "flex",
maxW: "100%",
mx: 5,
mt: 4,
mb: 6
},
// the horizontal widget categories menu
"& div.chakra-tabs__list": {
bg: {
@@ -507,6 +502,8 @@ const glassPanelRecipe = defineSlotRecipe({
scrollbarWidth: "none",
"&::-webkit-scrollbar": {display: "none"},
// the pill shaped menu options
"& button.chakra-tabs__trigger": {
px: 5,
py: 2,
@@ -540,37 +537,57 @@ const glassPanelRecipe = defineSlotRecipe({
}
},
// "& div.chakra-tabs__root > div:first-child div > svg": {
// position: "absolute",
// top: "0",
// bottom: "0",
// w: "50px",
// align: "center",
// justify: "center",
// zIndex: 2,
// cursor: "pointer",
// bg: {
// base: "rgba(255, 255, 255, 0.7)",
// _dark: "rgba(30, 30, 30, 0.8)"
// },
// backdropFilter: "blur(1px)",
//
// color: {
// base: "gray.600",
// _dark: "gray.300"
// },
// transition: "background-color 0.2s",
// _hover: {
// color: {
// base: "blue.500",
// _dark: "blue.300"
// },
// bg: {
// base: "rgba(255, 255, 255, 0.9)",
// _dark: "rgba(40, 40, 40, 0.95)"
// },
// }
// }
// base styling applied to both chevron navigators
"& div.chakra-tabs__root > div:first-child div:has(svg)": {
position: "absolute",
top: "0",
bottom: "0",
w: "50px",
alignItems: "center",
justifyContent: "center",
zIndex: 2,
cursor: "pointer",
bg: {
base: "rgba(255, 255, 255, 0.7)",
_dark: "rgba(30, 30, 30, 0.8)"
},
color: {
base: "gray.600",
_dark: "gray.300"
},
backdropFilter: "blur(1px)",
transition: "background-color 0.2s",
_hover: {
color: {
base: "blue.500",
_dark: "blue.300"
},
bg: {
base: "rgba(255, 255, 255, 0.9)",
_dark: "rgba(40, 40, 40, 0.95)"
},
},
"&:has(.lucide-chevron-left)": {
left: 0,
borderTopLeftRadius: "full",
borderBottomLeftRadius: "full",
// Bites a transparent circle out of the flat right side!
WebkitMaskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 19px)",
maskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 35px)",
},
"&:has(.lucide-chevron-right)": {
right: 0,
borderTopRightRadius: "full",
borderBottomRightRadius: "full",
// THE MAGIC: Bites a transparent circle out of the flat left side!
WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)",
}
}
}
}
}
@@ -763,7 +780,6 @@ const config = defineConfig({
// widget: widgetRecipe,
glassPanel: glassPanelRecipe,
home: homeRecipe,
settingsButton: settingsButtonRecipe,
},
},
});