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 layout: default
bg: #1a1a1a bg: #1a1a1a
text: #ffffff text: #ffffff
accent: #ff6b6b hover-text: #ff6b6b
border: #333333 border: #333333
[[Home]] [[Home]]
[GitHub](https://github.com) [GitHub](https://github.com)
@@ -96,8 +96,8 @@ border: #333333
### Global Color Variables ### Global Color Variables
- `bg`: Background color - `bg`: Background color
- `text`: Text color - `text`: Text color
- `accent`: Hover/accent color
- `border`: Border color - `border`: Border color
- `hover-text`: Hover text color
- `hover-bg`: Hover background - `hover-bg`: Hover background
- `hover-border`: Hover border color - `hover-border`: Hover border color
- `font`: Font family - `font`: Font family
@@ -124,7 +124,7 @@ external-font: "Georgia"
- `{type}-bg`: Background color - `{type}-bg`: Background color
- `{type}-border`: Border color - `{type}-border`: Border color
- `{type}-font`: Font family - `{type}-font`: Font family
- `{type}-accent`: Hover text color - `{type}-hover-text`: Hover text color
- `{type}-hover-bg`: Hover background - `{type}-hover-bg`: Hover background
- `{type}-hover-border`: Hover border color - `{type}-hover-border`: Hover border color
@@ -136,7 +136,7 @@ external-font: "Georgia"
layout: horizon layout: horizon
bg: linear-gradient(45deg, #667eea, #764ba2) bg: linear-gradient(45deg, #667eea, #764ba2)
text: white text: white
accent: #ffd700 hover-text: #ffd700
[[Dashboard]] [[Dashboard]]
[Projects](https://github.com) [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 // Apply custom colors as CSS variables
if (Object.keys(colors).length > 0) { if (Object.keys(colors).length > 0) {
for (const [key, value] of Object.entries(colors)) { 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 } attr: { 'data-href': href }
}); });
a.addClass('menu-internal-link'); 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(/^\[.*\]\(.*\)$/)) { } else if (link.match(/^\[.*\]\(.*\)$/)) {
// External link // External link
const match = link.match(/^\[(.*)\]\((.*)\)$/); const match = link.match(/^\[(.*)\]\((.*)\)$/);

40
styles.css
View File

@@ -54,7 +54,7 @@
font-family: var(--font, inherit); font-family: var(--font, inherit);
&:hover { &: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))); border-color: var(--hover-border, var(--accent, var(--text-accent)));
} }
@@ -65,7 +65,7 @@
font-family: var(--internal-font, var(--font, inherit)); font-family: var(--internal-font, var(--font, inherit));
&:hover { &: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)))); border-color: var(--internal-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--internal-hover-bg, var(--hover-bg, transparent)); background-color: var(--internal-hover-bg, var(--hover-bg, transparent));
} }
@@ -78,7 +78,7 @@
font-family: var(--external-font, var(--font, inherit)); font-family: var(--external-font, var(--font, inherit));
&:hover { &: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)))); border-color: var(--external-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--external-hover-bg, var(--hover-bg, transparent)); background-color: var(--external-hover-bg, var(--hover-bg, transparent));
} }
@@ -91,7 +91,7 @@
font-family: var(--file-font, var(--font, inherit)); font-family: var(--file-font, var(--font, inherit));
&:hover { &: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)))); border-color: var(--file-hover-border, var(--hover-border, var(--accent, var(--text-accent))));
background-color: var(--file-hover-bg, var(--hover-bg, transparent)); background-color: var(--file-hover-bg, var(--hover-bg, transparent));
} }
@@ -132,7 +132,7 @@
&:hover { &:hover {
background-color: var(--hover-bg, var(--background-secondary)); 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 { &.menu-internal-link {
@@ -140,7 +140,7 @@
font-family: var(--internal-font, var(--font, inherit)); font-family: var(--internal-font, var(--font, inherit));
&:hover { &: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))); background-color: var(--internal-hover-bg, var(--hover-bg, var(--background-secondary)));
} }
} }
@@ -150,7 +150,7 @@
font-family: var(--external-font, var(--font, inherit)); font-family: var(--external-font, var(--font, inherit));
&:hover { &: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))); background-color: var(--external-hover-bg, var(--hover-bg, var(--background-secondary)));
} }
} }
@@ -160,7 +160,7 @@
font-family: var(--file-font, var(--font, inherit)); font-family: var(--file-font, var(--font, inherit));
&:hover { &: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))); background-color: var(--file-hover-bg, var(--hover-bg, var(--background-secondary)));
} }
} }
@@ -189,7 +189,7 @@
&:hover { &:hover {
background-color: var(--hover-bg, var(--background-secondary)); 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))); border: 1px solid var(--hover-border, var(--accent, var(--text-accent)));
} }
@@ -200,7 +200,7 @@
font-family: var(--internal-font, var(--font, inherit)); font-family: var(--internal-font, var(--font, inherit));
&:hover { &: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)))); 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))); background-color: var(--internal-hover-bg, var(--hover-bg, var(--background-secondary)));
} }
@@ -213,7 +213,7 @@
font-family: var(--external-font, var(--font, inherit)); font-family: var(--external-font, var(--font, inherit));
&:hover { &: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)))); 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))); background-color: var(--external-hover-bg, var(--hover-bg, var(--background-secondary)));
} }
@@ -226,7 +226,7 @@
font-family: var(--file-font, var(--font, inherit)); font-family: var(--file-font, var(--font, inherit));
&:hover { &: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)))); 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))); background-color: var(--file-hover-bg, var(--hover-bg, var(--background-secondary)));
} }
@@ -257,7 +257,7 @@
transition: 250ms; transition: 250ms;
&:hover { &: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))); 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)); font-family: var(--internal-font, var(--font, 'Space Grotesk', Inter, sans-serif));
&:hover { &: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)))); 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)); 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)); font-family: var(--external-font, var(--font, 'Space Grotesk', Inter, sans-serif));
&:hover { &: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)))); 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)); 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)); font-family: var(--file-font, var(--font, 'Space Grotesk', Inter, sans-serif));
&:hover { &: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)))); 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)); background-color: var(--file-hover-bg, var(--hover-bg, transparent));
} }
@@ -326,7 +326,7 @@
font-family: var(--font, inherit); font-family: var(--font, inherit);
&:hover { &: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))); border-color: var(--hover-border, var(--accent, var(--text-accent)));
background-color: var(--hover-bg, var(--background-modifier-hover)); background-color: var(--hover-bg, var(--background-modifier-hover));
} }
@@ -338,7 +338,7 @@
font-family: var(--internal-font, var(--font, inherit)); font-family: var(--internal-font, var(--font, inherit));
&:hover { &: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)))); 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))); 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)); font-family: var(--external-font, var(--font, inherit));
&:hover { &: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)))); 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))); 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)); font-family: var(--file-font, var(--font, inherit));
&:hover { &: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)))); 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))); background-color: var(--file-hover-bg, var(--hover-bg, var(--background-modifier-hover)));
} }