obsidian-plugin/yazanammar_obsidian-theme-engine
1
0
Fork 0
mirror of https://github.com/yazanammar/obsidian-theme-engine.git synced 2026-07-22 06:44:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: remove core UI overrides and simplify CSS scoping

Browse source
This commit is contained in:
YazanAmmar 2026-04-15 00:32:43 +03:00
parent 989939fb80
commit 5966647b84
4 changed files with 67 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/core/style-engine.ts
View file

@ -209,8 +209,6 @@ export const applyStyles = async (plugin: ThemeEngine): Promise<void> => {
return;
}
document.body.classList.add('theme-engine-overrides-active');
const profileVars = Object.entries(profile.vars);
if (profileVars.length > 0) {
const cssString = `body.theme-dark, body.theme-light {
@ -321,7 +319,6 @@ export const clearStyles = (plugin: ThemeEngine): void => {
overrideStyleEl.remove();
}
plugin.app.workspace.trigger('css-change');
document.body.classList.remove('theme-engine-overrides-active');
document.body.classList.remove('theme-engine-rtl');
plugin._clearBackgroundMedia();
};

68
src/styles/base/_editor.scss
View file

@ -44,71 +44,3 @@ body.cm-settings-background-active .theme-engine-settings-tab {
background-repeat: no-repeat;
background-attachment: fixed;
}
/* --- Editor & Markdown Overrides --- */
body.theme-engine-overrides-active {
/* Tag Styling */
.tag {
color: var(--tag-color) !important;
background-color: var(--tag-bg) !important;
padding: 2px 8px;
border-radius: 12px;
text-decoration: none;
&:hover {
color: var(--tag-color-hover) !important;
}
}
/* Live Preview Tags */
.cm-s-obsidian span.cm-hashtag {
background-color: var(--tag-bg) !important;
color: var(--tag-color) !important;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 0;
padding-left: 0;
padding-right: 0;
&-begin {
background-color: var(--tag-bg) !important;
color: var(--tag-color) !important;
padding-top: 2px;
padding-bottom: 2px;
padding-inline-start: 8px;
border-start-start-radius: 12px;
border-end-start-radius: 12px;
}
&-end {
background-color: var(--tag-bg) !important;
color: var(--tag-color) !important;
padding-top: 2px;
padding-bottom: 2px;
padding-inline-end: 8px;
border-start-end-radius: 12px;
border-end-end-radius: 12px;
}
}
/* Inline Code */
.cm-s-obsidian span.cm-inline-code,
.markdown-preview-view code:not(pre code) {
color: var(--code-normal) !important;
background-color: var(--code-background) !important;
}
/* Highlights */
.markdown-source-view.mod-cm6 .cm-highlight,
.markdown-preview-view mark,
.markdown-preview-view .highlight {
background-color: var(--text-highlight-bg) !important;
}
/* Blockquotes */
.markdown-preview-view blockquote,
.cm-s-obsidian span.cm-quote {
background-color: var(--blockquote-bg) !important;
}
}

16
src/styles/base/_utilities.scss
View file

@ -12,13 +12,11 @@
font-weight: 600;
}
body.theme-engine-overrides-active {
[data-cm-theme-engine-notice='true'] {
padding: 8px 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
max-width: 300px;
border-radius: 6px !important;
min-width: 120px !important;
box-sizing: border-box !important;
}
[data-cm-theme-engine-notice='true'] {
padding: 8px 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
max-width: 300px;
border-radius: 6px !important;
min-width: 120px !important;
box-sizing: border-box !important;
}

116
src/styles/settings/_inputs.scss
View file

@ -92,67 +92,71 @@
}
}
/* Select Dropdown & Search Small Input Styling */
.setting-item-control select,
.cm-search-small {
background-color: transparent;
border: 1px solid var(--background-modifier-border);
box-shadow: none;
transition: all 0.2s ease-in-out;
cursor: pointer;
/* Settings + modal controls owned by Theme Engine */
.theme-engine-settings-tab,
.theme-engine-modal,
.color-master-modal {
.setting-item-control select,
.cm-search-small {
background-color: transparent;
border: 1px solid var(--background-modifier-border);
box-shadow: none;
transition: all 0.2s ease-in-out;
cursor: pointer;
font-size: 12px;
border-radius: 6px;
color: var(--text-normal) !important;
-webkit-appearance: none !important;
appearance: none !important;
background-repeat: no-repeat !important;
background-position: right 7px center !important;
font-size: 12px;
border-radius: 6px;
color: var(--text-normal) !important;
-webkit-appearance: none !important;
appearance: none !important;
background-repeat: no-repeat !important;
background-position: right 7px center !important;
&:hover {
background-color: var(--background-modifier-hover);
border-color: var(--background-modifier-border-hover);
&:hover {
background-color: var(--background-modifier-hover);
border-color: var(--background-modifier-border-hover);
}
&.is-active {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
&:hover {
background-color: var(--interactive-accent-hover) !important;
}
}
}
&.is-active {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
/* Generic Control Buttons */
.setting-item-control .cm-control-button {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--text-normal);
transition: all 0.2s ease-in-out;
cursor: pointer;
&:hover {
background-color: var(--interactive-accent-hover) !important;
background-color: var(--background-modifier-hover) !important;
color: var(--text-normal);
border-color: var(--background-modifier-border-hover) !important;
}
&[disabled],
&.is-disabled {
cursor: not-allowed;
}
}
/* Focus State for Checkboxes */
.setting-item .checkbox-container {
outline: none !important;
box-shadow: none !important;
&:focus,
&:focus-visible {
outline: none !important;
box-shadow: none !important;
border-color: var(--background-modifier-border) !important;
}
}
}
/* Generic Control Buttons */
.setting-item-control .cm-control-button {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--text-normal);
transition: all 0.2s ease-in-out;
cursor: pointer;
&:hover {
background-color: var(--background-modifier-hover) !important;
color: var(--text-normal);
border-color: var(--background-modifier-border-hover) !important;
}
&[disabled],
&.is-disabled {
cursor: not-allowed;
}
}
/* Focus State for Checkboxes */
.setting-item .checkbox-container {
outline: none !important;
box-shadow: none !important;
&:focus,
&:focus-visible {
outline: none !important;
box-shadow: none !important;
border-color: var(--background-modifier-border) !important;
}
}