mirror of
https://github.com/ourongxing/newsnow.git
synced 2025-01-19 03:09:14 +08:00
chore(ui): minor changes
This commit is contained in:
parent
8ffd77b2eb
commit
12732dc0c2
@ -44,9 +44,9 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"flex flex-col h-500px rounded-2xl p-4 cursor-default",
|
"flex flex-col h-500px rounded-2xl p-4 cursor-default",
|
||||||
"bg-op-40 backdrop-blur-5 transition-opacity-300",
|
"backdrop-blur-5 transition-opacity-300",
|
||||||
isDragged && "op-50",
|
isDragged && "op-50",
|
||||||
`bg-${sources[id].color}`,
|
`bg-${sources[id].color}-500 dark:bg-${sources[id].color} bg-op-40!`,
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
transformOrigin: "50% 50%",
|
transformOrigin: "50% 50%",
|
||||||
|
@ -136,9 +136,8 @@ function DndWrapper({ items, setItems, children }: PropsWithChildren<DndProps>)
|
|||||||
function CardOverlay({ id }: { id: SourceID }) {
|
function CardOverlay({ id }: { id: SourceID }) {
|
||||||
return (
|
return (
|
||||||
<div className={clsx(
|
<div className={clsx(
|
||||||
"flex flex-col rounded-2xl p-4",
|
"flex flex-col rounded-2xl p-4 backdrop-blur-5",
|
||||||
"backdrop-blur-5 bg-op-40",
|
`bg-${sources[id].color}-500 dark:bg-${sources[id].color} bg-op-40!`,
|
||||||
`bg-${sources[id].color}`,
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className={clsx("flex justify-between mx-2 items-center")}>
|
<div className={clsx("flex justify-between mx-2 items-center")}>
|
||||||
|
@ -52,7 +52,7 @@ export function Menu() {
|
|||||||
id="dropdown-menu"
|
id="dropdown-menu"
|
||||||
className={clsx([
|
className={clsx([
|
||||||
"w-200px",
|
"w-200px",
|
||||||
"bg-primary p-1px backdrop-blur-5 bg-op-70! rounded-lg",
|
"bg-primary p-2px backdrop-blur-5 bg-op-70! rounded-lg",
|
||||||
])}
|
])}
|
||||||
initial={{
|
initial={{
|
||||||
scale: 0.9,
|
scale: 0.9,
|
||||||
|
@ -14,14 +14,11 @@ export default defineConfig({
|
|||||||
rules: [
|
rules: [
|
||||||
[/^sprinkle-(.+)$/, ([_, d], { theme }) => {
|
[/^sprinkle-(.+)$/, ([_, d], { theme }) => {
|
||||||
// @ts-expect-error >_<
|
// @ts-expect-error >_<
|
||||||
if (theme.colors[d]) {
|
const hex: any = theme.colors?.[d]?.[400]
|
||||||
// @ts-expect-error >_<
|
if (hex) {
|
||||||
const hex: any = theme.colors[d]?.[400]
|
return {
|
||||||
if (hex) {
|
"background-image": `radial-gradient(ellipse 80% 80% at 50% -30%,
|
||||||
return {
|
|
||||||
"background-image": `radial-gradient(ellipse 80% 80% at 50% -30%,
|
|
||||||
rgba(${hex2rgba(hex)?.join(", ")}, 0.3), rgba(255, 255, 255, 0));`,
|
rgba(${hex2rgba(hex)?.join(", ")}, 0.3), rgba(255, 255, 255, 0));`,
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
@ -35,11 +32,14 @@ export default defineConfig({
|
|||||||
],
|
],
|
||||||
shortcuts: {
|
shortcuts: {
|
||||||
"color-base": "color-neutral-800 dark:color-neutral-300",
|
"color-base": "color-neutral-800 dark:color-neutral-300",
|
||||||
"bg-base": "bg-white dark:bg-dark-600",
|
"bg-base": "bg-zinc-50 dark:bg-dark-600",
|
||||||
"btn": "op50 hover:op85",
|
"btn": "op50 hover:op85",
|
||||||
},
|
},
|
||||||
safelist: [
|
safelist: [
|
||||||
...["bg", "color", "border", "sprinkle", "shadow"].map(t => [...Object.values(sources)].map(c => `${t}-${c.color}`)).flat(1),
|
...[...new Set(Object.values(sources).map(k => k.color))].map(k =>
|
||||||
|
`bg-${k} color-${k} border-${k} sprinkle-${k} shadow-${k}
|
||||||
|
bg-${k}-500 color-${k}-500
|
||||||
|
dark:bg-${k} dark:color-${k}`.trim().split(/\s+/)).flat(),
|
||||||
],
|
],
|
||||||
extendTheme: (theme) => {
|
extendTheme: (theme) => {
|
||||||
// @ts-expect-error >_<
|
// @ts-expect-error >_<
|
||||||
|
Loading…
x
Reference in New Issue
Block a user