olivier/monster-menus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace 'accent' with 'hover-text' for consistency in color properties

Browse Source
This commit is contained in:
Olivier
2025-09-26 20:30:23 -04:00
parent c85d1eaf64
commit e7dd34d323
4 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -86,7 +86,7 @@ Add color properties using YAML syntax:
layout: default
bg: #1a1a1a
text: #ffffff
accent: #ff6b6b
hover-text: #ff6b6b
border: #333333
[[Home]]
[GitHub](https://github.com)
@@ -96,8 +96,8 @@ border: #333333
### Global Color Variables
- `bg`: Background color
- `text`: Text color
- `accent`: Hover/accent color
- `border`: Border color
- `hover-text`: Hover text color
- `hover-bg`: Hover background
- `hover-border`: Hover border color
- `font`: Font family
@@ -124,7 +124,7 @@ external-font: "Georgia"
- `{type}-bg`: Background color
- `{type}-border`: Border color
- `{type}-font`: Font family
- `{type}-accent`: Hover text color
- `{type}-hover-text`: Hover text color
- `{type}-hover-bg`: Hover background
- `{type}-hover-border`: Hover border color
@@ -136,7 +136,7 @@ external-font: "Georgia"
layout: horizon
bg: linear-gradient(45deg, #667eea, #764ba2)
text: white
accent: #ffd700
hover-text: #ffd700
[[Dashboard]]
[Projects](https://github.com)
```

15
main.js
View File

File diff suppressed because one or more lines are too long

17
main.ts
View File

@@ -54,7 +54,14 @@ export default class MenuPlugin extends Plugin {
// Apply custom colors as CSS variables
if (Object.keys(colors).length > 0) {
for (const [key, value] of Object.entries(colors)) {
container.style.setProperty(`--${key}`, value);
// Replace 'accent' with 'hover-text' for consistency
let cssKey = key.replace(/accent/g, 'hover-text');
container.style.setProperty(`--${cssKey}`, value);
}
// Example: ensure hover-text is set and add a comment for usage
if (colors['hover-text']) {
container.style.setProperty('--hover-text', colors['hover-text']);
// To use in CSS: a:hover { color: var(--hover-text); }
}
}
@@ -73,6 +80,14 @@ export default class MenuPlugin extends Plugin {
attr: { 'data-href': href }
});
a.addClass('menu-internal-link');
a.style.cursor = 'pointer';
a.addEventListener('click', (e) => {
e.preventDefault();
const vaultName = this.app.vault.getName();
const encodedFile = encodeURIComponent(href);
const uri = `obsidian://open?vault=${encodeURIComponent(vaultName)}&file=${encodedFile}`;
window.open(uri);
});
} else if (link.match(/^\[.*\]\(.*\)$/)) {
// External link
const match = link.match(/^\[(.*)\]\((.*)\)$/);

40
styles.css
View File

@@ -54,7 +54,7 @@
font-family: var(--font, inherit);
&:hover {
color: var(--accent, var(--text-accent));
color: var(--hover-text, var(--accent, var(--text-accent)));
border-color: var(--hover-border, var(--accent, var(--text-accent)));
}
@@ -65,7 +65,7 @@
font-family: var(--internal-font, var(--font, inherit));
&:hover {
color: var(--internal-accent, var(--accent, var(--text-accent)));
color: var(--internal-hover-text, var(--internal-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--internal-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--internal-hover-bg, var(--hover-bg, transparent));
}
@@ -78,7 +78,7 @@
font-family: var(--external-font, var(--font, inherit));
&:hover {
color: var(--external-accent, var(--accent, var(--text-accent)));
color: var(--external-hover-text, var(--external-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--external-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--external-hover-bg, var(--hover-bg, transparent));
}
@@ -91,7 +91,7 @@
font-family: var(--file-font, var(--font, inherit));
&:hover {
color: var(--file-accent, var(--accent, var(--text-accent)));
color: var(--file-hover-text, var(--file-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--file-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--file-hover-bg, var(--hover-bg, transparent));
}
@@ -132,7 +132,7 @@
&:hover {
background-color: var(--hover-bg, var(--background-secondary));
color: var(--accent, var(--text-accent));
color: var(--hover-text, var(--accent, var(--text-accent)));
}
&.menu-internal-link {
@@ -140,7 +140,7 @@
font-family: var(--internal-font, var(--font, inherit));
&:hover {
color: var(--internal-accent, var(--internal-hover, var(--text-accent-hover)));
color: var(--internal-hover-text, var(--internal-accent, var(--hover-text, var(--internal-hover, var(--text-accent-hover)))));
background-color: var(--internal-hover-bg, var(--hover-bg, var(--background-secondary)));
}
}
@@ -150,7 +150,7 @@
font-family: var(--external-font, var(--font, inherit));
&:hover {
color: var(--external-accent, var(--external-hover, var(--text-normal)));
color: var(--external-hover-text, var(--external-accent, var(--hover-text, var(--external-hover, var(--text-normal)))));
background-color: var(--external-hover-bg, var(--hover-bg, var(--background-secondary)));
}
}
@@ -160,7 +160,7 @@
font-family: var(--file-font, var(--font, inherit));
&:hover {
color: var(--file-accent, var(--file-hover, var(--text-normal)));
color: var(--file-hover-text, var(--file-accent, var(--hover-text, var(--file-hover, var(--text-normal)))));
background-color: var(--file-hover-bg, var(--hover-bg, var(--background-secondary)));
}
}
@@ -189,7 +189,7 @@
&:hover {
background-color: var(--hover-bg, var(--background-secondary));
color: var(--accent, var(--text-accent));
color: var(--hover-text, var(--accent, var(--text-accent)));
border: 1px solid var(--hover-border, var(--accent, var(--text-accent)));
}
@@ -200,7 +200,7 @@
font-family: var(--internal-font, var(--font, inherit));
&:hover {
color: var(--internal-accent, var(--accent, var(--text-accent)));
color: var(--internal-hover-text, var(--internal-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--internal-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--internal-hover-bg, var(--hover-bg, var(--background-secondary)));
}
@@ -213,7 +213,7 @@
font-family: var(--external-font, var(--font, inherit));
&:hover {
color: var(--external-accent, var(--accent, var(--text-accent)));
color: var(--external-hover-text, var(--external-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--external-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--external-hover-bg, var(--hover-bg, var(--background-secondary)));
}
@@ -226,7 +226,7 @@
font-family: var(--file-font, var(--font, inherit));
&:hover {
color: var(--file-accent, var(--accent, var(--text-accent)));
color: var(--file-hover-text, var(--file-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--file-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--file-hover-bg, var(--hover-bg, var(--background-secondary)));
}
@@ -257,7 +257,7 @@
transition: 250ms;
&:hover {
color: var(--accent, var(--orange-500, darkorange));
color: var(--hover-text, var(--accent, var(--orange-500, darkorange)));
border: 1px solid var(--hover-border, var(--accent, var(--orange-500, darkorange)));
}
@@ -268,7 +268,7 @@
font-family: var(--internal-font, var(--font, 'Space Grotesk', Inter, sans-serif));
&:hover {
color: var(--internal-accent, var(--accent, var(--orange-500, darkorange)));
color: var(--internal-hover-text, var(--internal-accent, var(--hover-text, var(--accent, var(--orange-500, darkorange)))));
border-color: var(--internal-hover-border, var(--hover-border, var(--accent, var(--orange-500, darkorange))));
background-color: var(--internal-hover-bg, var(--hover-bg, transparent));
}
@@ -281,7 +281,7 @@
font-family: var(--external-font, var(--font, 'Space Grotesk', Inter, sans-serif));
&:hover {
color: var(--external-accent, var(--accent, var(--orange-500, darkorange)));
color: var(--external-hover-text, var(--external-accent, var(--hover-text, var(--accent, var(--orange-500, darkorange)))));
border-color: var(--external-hover-border, var(--hover-border, var(--accent, var(--orange-500, darkorange))));
background-color: var(--external-hover-bg, var(--hover-bg, transparent));
}
@@ -294,7 +294,7 @@
font-family: var(--file-font, var(--font, 'Space Grotesk', Inter, sans-serif));
&:hover {
color: var(--file-accent, var(--accent, var(--orange-500, darkorange)));
color: var(--file-hover-text, var(--file-accent, var(--hover-text, var(--accent, var(--orange-500, darkorange)))));
border-color: var(--file-hover-border, var(--hover-border, var(--accent, var(--orange-500, darkorange))));
background-color: var(--file-hover-bg, var(--hover-bg, transparent));
}
@@ -326,7 +326,7 @@
font-family: var(--font, inherit);
&:hover {
color: var(--accent, var(--text-accent));
color: var(--hover-text, var(--accent, var(--text-accent)));
border-color: var(--hover-border, var(--accent, var(--text-accent)));
background-color: var(--hover-bg, var(--background-modifier-hover));
}
@@ -338,7 +338,7 @@
font-family: var(--internal-font, var(--font, inherit));
&:hover {
color: var(--internal-accent, var(--accent, var(--text-accent)));
color: var(--internal-hover-text, var(--internal-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--internal-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--internal-hover-bg, var(--hover-bg, var(--background-modifier-hover)));
}
@@ -351,7 +351,7 @@
font-family: var(--external-font, var(--font, inherit));
&:hover {
color: var(--external-accent, var(--accent, var(--text-accent)));
color: var(--external-hover-text, var(--external-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--external-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--external-hover-bg, var(--hover-bg, var(--background-modifier-hover)));
}
@@ -364,7 +364,7 @@
font-family: var(--file-font, var(--font, inherit));
&:hover {
color: var(--file-accent, var(--accent, var(--text-accent)));
color: var(--file-hover-text, var(--file-accent, var(--hover-text, var(--accent, var(--text-accent)))));
border-color: var(--file-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--file-hover-bg, var(--hover-bg, var(--background-modifier-hover)));
}