gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 12:14:23 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

style/card: improve

Browse Source
This commit is contained in:
Adorian Doran 2026-02-15 18:34:00 +02:00
parent f645d9d721
commit 10cf1a371e
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/widgets/react/Card.css
View File

@ -1,6 +1,7 @@
.tn-card {
--card-border-radius: 8px;
--card-padding: 8px 16px;
--card-padding-block: 8px;
--card-padding-inline: 16px;
--card-section-gap: 3px;
--card-nested-section-indent: 30px;
@ -9,7 +10,7 @@
gap: var(--card-section-gap);
.tn-card-section {
padding: var(--card-padding);
padding: var(--card-padding-block) var(--card-padding-inline);
border: 1px solid var(--card-border-color, var(--main-border-color));
background: var(--card-background-color);
@ -24,11 +25,11 @@
}
&.tn-card-section-nested {
padding-left: calc(var(--card-nested-section-indent) * var(--tn-card-section-nesting-level));
padding-left: calc(var(--card-padding-inline) + var(--card-nested-section-indent) * var(--tn-card-section-nesting-level));
background-color: color-mix(in srgb, var(--card-background-color) calc(100% / (var(--tn-card-section-nesting-level) + 1)) , transparent);
}
&.tn-action:hover {
&.tn-card-section-highlight-on-hover:hover {
background-color: var(--card-background-hover-color);
transition: background-color .2s ease-out;
}

7
apps/client/src/widgets/react/Card.tsx
View File

@ -17,7 +17,8 @@ export function Card(props: {children: ComponentChildren} & CardProps) {
interface CardSectionProps {
className?: string;
subSections?: JSX.Element | JSX.Element[];
childrenVisible?: boolean;
subSectionsVisible?: boolean;
highlightOnHover?: boolean;
hasAction?: boolean;
onAction?: () => void;
}
@ -29,14 +30,14 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
return <>
<section className={clsx("tn-card-section", props.className, {
"tn-card-section-nested": nestingLevel > 0,
"tn-action": props.hasAction
"tn-card-section-highlight-on-hover": props.highlightOnHover || props.hasAction
})}
style={{"--tn-card-section-nesting-level": nestingLevel}}
onClick={props.onAction}>
{props.children}
</section>
{props.childrenVisible &&
{props.subSectionsVisible &&
<CardSectionContext.Provider value={{nestingLevel}}>
{props.subSections}
</CardSectionContext.Provider>