mirror of
https://github.com/andy-stack/vaultkeeper-ai.git
synced 2026-07-22 06:42:03 +00:00
Refactor diff2html styles to use CSS variable remapping
Replace direct color overrides with systematic CSS variable remapping that delegates to Obsidian's theme system. Map both light and dark diff2html variables to corresponding Obsidian variables, allowing automatic theme adaptation. Remove redundant theme-specific rules and unnecessary !important declarations for cleaner, more maintainable code.
This commit is contained in:
Andrew Beal
parent
aed4caf347
commit
4887a10764
1 changed files with 77 additions and 202 deletions
|
|
@ -1,60 +1,99 @@
|
|||
/* Override diff2html blue tones with Obsidian's CSS variables */
|
||||
/*
|
||||
* Remap diff2html's CSS variables to Obsidian's theme variables.
|
||||
* Because .d2h-wrapper is more specific than :root (where diff2html defines
|
||||
* its defaults), these win without !important — and any Obsidian theme that
|
||||
* overrides --background-primary, --color-red, etc. flows through for free.
|
||||
*/
|
||||
.d2h-wrapper {
|
||||
--d2h-bg-color: var(--background-primary);
|
||||
--d2h-border-color: var(--background-modifier-border);
|
||||
--d2h-line-border-color: var(--background-modifier-border);
|
||||
--d2h-file-header-bg-color: var(--background-secondary);
|
||||
--d2h-file-header-border-color: var(--background-modifier-border);
|
||||
--d2h-info-bg-color: var(--background-secondary);
|
||||
--d2h-info-border-color: var(--background-modifier-border);
|
||||
--d2h-empty-placeholder-bg-color: var(--background-secondary-alt);
|
||||
--d2h-empty-placeholder-border-color: var(--background-modifier-border);
|
||||
--d2h-selected-color: var(--background-modifier-hover);
|
||||
--d2h-dim-color: var(--text-muted);
|
||||
|
||||
--d2h-ins-bg-color: rgba(var(--color-green-rgb), 0.15);
|
||||
--d2h-ins-border-color: rgba(var(--color-green-rgb), 0.4);
|
||||
--d2h-ins-highlight-bg-color: rgba(var(--color-green-rgb), 0.35);
|
||||
--d2h-ins-label-color: var(--color-green);
|
||||
--d2h-del-bg-color: rgba(var(--color-red-rgb), 0.15);
|
||||
--d2h-del-border-color: rgba(var(--color-red-rgb), 0.4);
|
||||
--d2h-del-highlight-bg-color: rgba(var(--color-red-rgb), 0.35);
|
||||
--d2h-del-label-color: var(--color-red);
|
||||
--d2h-change-del-color: rgba(var(--color-yellow-rgb), 0.2);
|
||||
--d2h-change-ins-color: rgba(var(--color-green-rgb), 0.2);
|
||||
--d2h-change-label-color: var(--color-yellow);
|
||||
--d2h-moved-label-color: var(--color-blue);
|
||||
|
||||
/*
|
||||
* Dark-scheme twins: diff2html applies .d2h-dark-color-scheme or
|
||||
* .d2h-auto-color-scheme (via prefers-color-scheme) and switches its rules
|
||||
* to the --d2h-dark-* variables. Point those at the same Obsidian
|
||||
* variables — Obsidian itself swaps --background-primary etc. when the
|
||||
* vault theme toggles, so one mapping covers both modes.
|
||||
*/
|
||||
--d2h-dark-color: var(--text-normal);
|
||||
--d2h-dark-bg-color: var(--background-primary);
|
||||
--d2h-dark-border-color: var(--background-modifier-border);
|
||||
--d2h-dark-dim-color: var(--text-muted);
|
||||
--d2h-dark-line-border-color: var(--background-modifier-border);
|
||||
--d2h-dark-file-header-bg-color: var(--background-secondary);
|
||||
--d2h-dark-file-header-border-color: var(--background-modifier-border);
|
||||
--d2h-dark-empty-placeholder-bg-color: var(--background-secondary-alt);
|
||||
--d2h-dark-empty-placeholder-border-color: var(--background-modifier-border);
|
||||
--d2h-dark-selected-color: var(--background-modifier-hover);
|
||||
--d2h-dark-ins-bg-color: rgba(var(--color-green-rgb), 0.15);
|
||||
--d2h-dark-ins-border-color: rgba(var(--color-green-rgb), 0.4);
|
||||
--d2h-dark-ins-highlight-bg-color: rgba(var(--color-green-rgb), 0.35);
|
||||
--d2h-dark-ins-label-color: var(--color-green);
|
||||
--d2h-dark-del-bg-color: rgba(var(--color-red-rgb), 0.15);
|
||||
--d2h-dark-del-border-color: rgba(var(--color-red-rgb), 0.4);
|
||||
--d2h-dark-del-highlight-bg-color: rgba(var(--color-red-rgb), 0.35);
|
||||
--d2h-dark-del-label-color: var(--color-red);
|
||||
--d2h-dark-change-del-color: rgba(var(--color-yellow-rgb), 0.2);
|
||||
--d2h-dark-change-ins-color: rgba(var(--color-green-rgb), 0.2);
|
||||
--d2h-dark-change-label-color: var(--color-yellow);
|
||||
--d2h-dark-moved-label-color: var(--color-blue);
|
||||
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
/* ============================== */
|
||||
/* Structural / layout fixes */
|
||||
/* ============================== */
|
||||
|
||||
/* Main diff container background */
|
||||
.d2h-wrapper {
|
||||
container-type: size;
|
||||
container-name: diff-wrapper;
|
||||
transform: translateZ(0);
|
||||
background-color: var(--background-primary) !important;
|
||||
height: 100cqh;
|
||||
}
|
||||
|
||||
/* File header background */
|
||||
.d2h-file-header {
|
||||
height: 35px;
|
||||
padding: 0 !important;
|
||||
background-color: var(--background-primary) !important;
|
||||
border-color: var(--background-modifier-border) !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* File name container */
|
||||
.d2h-file-name-wrapper {
|
||||
padding-left: 8px !important;
|
||||
background-color: var(--background-primary-alt) !important;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.d2h-code-linenumber {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Line number backgrounds - only override context lines */
|
||||
.d2h-code-linenumber.d2h-cntx {
|
||||
background-color: var(--background-primary-alt) !important;
|
||||
border-color: var(--background-modifier-border) !important;
|
||||
}
|
||||
|
||||
/* Code line backgrounds - only override context lines */
|
||||
.d2h-code-line.d2h-cntx {
|
||||
background-color: var(--background-primary) !important;
|
||||
}
|
||||
|
||||
/* Info section background */
|
||||
.d2h-info {
|
||||
background-color: var(--background-secondary) !important;
|
||||
border-color: var(--background-modifier-border) !important;
|
||||
}
|
||||
|
||||
/* File diff background */
|
||||
.d2h-file-diff {
|
||||
overflow: auto;
|
||||
background-color: var(--background-primary) !important;
|
||||
border-color: var(--background-modifier-border) !important;
|
||||
max-height: calc(100cqh - 37px);
|
||||
}
|
||||
|
||||
/* Empty placeholder */
|
||||
.d2h-emptyplaceholder {
|
||||
background-color: var(--background-secondary-alt) !important;
|
||||
.d2h-diff-table {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.d2h-code-side-linenumber {
|
||||
|
|
@ -62,172 +101,8 @@
|
|||
display: table-cell;
|
||||
}
|
||||
|
||||
/* Code side backgrounds for side-by-side view - only override context lines */
|
||||
.d2h-code-side-linenumber.d2h-cntx,
|
||||
.d2h-code-side-line.d2h-cntx {
|
||||
background-color: var(--background-primary) !important;
|
||||
}
|
||||
|
||||
/* Fix transparent backgrounds on insertion/deletion line numbers */
|
||||
/* Dark mode styles - side-by-side view */
|
||||
.theme-dark .d2h-code-side-linenumber.d2h-ins {
|
||||
background-color: #1e3a1e !important; /* Dark green - solid color */
|
||||
}
|
||||
|
||||
.theme-dark .d2h-code-side-linenumber.d2h-del {
|
||||
background-color: #3a1e1e !important; /* Dark red - solid color */
|
||||
}
|
||||
|
||||
/* Dark mode styles - inline view */
|
||||
.theme-dark .d2h-code-linenumber.d2h-ins {
|
||||
background-color: #1e3a1e !important; /* Dark green - solid color */
|
||||
}
|
||||
|
||||
.theme-dark .d2h-code-linenumber.d2h-del {
|
||||
background-color: #3a1e1e !important; /* Dark red - solid color */
|
||||
}
|
||||
|
||||
/* Light mode styles - side-by-side view */
|
||||
.theme-light .d2h-code-side-linenumber.d2h-ins {
|
||||
background-color: #c8e6c9 !important; /* Light green with better contrast */
|
||||
}
|
||||
|
||||
.theme-light .d2h-code-side-linenumber.d2h-del {
|
||||
background-color: #ffcdd2 !important; /* Light red with better contrast */
|
||||
}
|
||||
|
||||
/* Light mode styles - inline view */
|
||||
.theme-light .d2h-code-linenumber.d2h-ins {
|
||||
background-color: #c8e6c9 !important; /* Light green with better contrast */
|
||||
}
|
||||
|
||||
.theme-light .d2h-code-linenumber.d2h-del {
|
||||
background-color: #ffcdd2 !important; /* Light red with better contrast */
|
||||
}
|
||||
|
||||
/* Tags and labels */
|
||||
.d2h-tag {
|
||||
background-color: var(--background-secondary) !important;
|
||||
border-color: var(--background-modifier-border) !important;
|
||||
}
|
||||
|
||||
/* File list wrapper */
|
||||
.d2h-file-list-wrapper {
|
||||
background-color: var(--background-primary) !important;
|
||||
}
|
||||
|
||||
/* File list header */
|
||||
.d2h-file-list-header {
|
||||
background-color: var(--background-primary-alt) !important;
|
||||
border-color: var(--background-modifier-border) !important;
|
||||
}
|
||||
|
||||
/* File list line */
|
||||
.d2h-file-list-line {
|
||||
background-color: var(--background-primary) !important;
|
||||
border-color: var(--background-modifier-border) !important;
|
||||
}
|
||||
|
||||
/* File switch container */
|
||||
.d2h-file-switch {
|
||||
background-color: var(--background-primary-alt) !important;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.d2h-file-diff-toolbar {
|
||||
background-color: var(--background-secondary) !important;
|
||||
}
|
||||
|
||||
/* Text colors */
|
||||
.d2h-file-header,
|
||||
.d2h-file-name,
|
||||
.d2h-file-stats,
|
||||
.d2h-code-linenumber,
|
||||
.d2h-info {
|
||||
color: var(--text-normal) !important;
|
||||
}
|
||||
|
||||
.d2h-diff-table {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Light mode syntax highlighting overrides for better visibility */
|
||||
.theme-light .d2h-code-side-line {
|
||||
color: var(--text-normal) !important;
|
||||
}
|
||||
|
||||
/* Force base text color for all code content in light mode */
|
||||
.theme-light .d2h-code-line-ctn,
|
||||
.theme-light .d2h-code-line-ctn * {
|
||||
color: var(--text-normal) !important;
|
||||
}
|
||||
|
||||
/* Override Monokai theme colors in light mode for better contrast */
|
||||
.theme-light .hljs-comment,
|
||||
.theme-light .hljs-quote {
|
||||
color: #5c6370 !important; /* Medium gray for comments */
|
||||
}
|
||||
|
||||
.theme-light .hljs-keyword,
|
||||
.theme-light .hljs-selector-tag,
|
||||
.theme-light .hljs-literal,
|
||||
.theme-light .hljs-type {
|
||||
color: #a626a4 !important; /* Purple for keywords */
|
||||
}
|
||||
|
||||
.theme-light .hljs-string,
|
||||
.theme-light .hljs-doctag {
|
||||
color: #50a14f !important; /* Green for strings */
|
||||
}
|
||||
|
||||
.theme-light .hljs-title,
|
||||
.theme-light .hljs-section,
|
||||
.theme-light .hljs-selector-id {
|
||||
color: #4078f2 !important; /* Blue for titles/functions */
|
||||
}
|
||||
|
||||
.theme-light .hljs-subst,
|
||||
.theme-light .hljs-tag,
|
||||
.theme-light .hljs-name,
|
||||
.theme-light .hljs-attr,
|
||||
.theme-light .hljs-attribute {
|
||||
color: #e45649 !important; /* Red for tags/attributes */
|
||||
}
|
||||
|
||||
.theme-light .hljs-variable,
|
||||
.theme-light .hljs-template-variable {
|
||||
color: #986801 !important; /* Orange for variables */
|
||||
}
|
||||
|
||||
.theme-light .hljs-number,
|
||||
.theme-light .hljs-built_in,
|
||||
.theme-light .hljs-builtin-name,
|
||||
.theme-light .hljs-class .hljs-title {
|
||||
color: #c18401 !important; /* Gold for numbers/built-ins */
|
||||
}
|
||||
|
||||
.theme-light .hljs-meta,
|
||||
.theme-light .hljs-meta-keyword {
|
||||
color: #a626a4 !important; /* Purple for meta */
|
||||
}
|
||||
|
||||
.theme-light .hljs-symbol,
|
||||
.theme-light .hljs-bullet,
|
||||
.theme-light .hljs-link {
|
||||
color: #0184bc !important; /* Cyan for symbols */
|
||||
}
|
||||
|
||||
/* Ensure deletion and insertion text is visible */
|
||||
.theme-light .d2h-code-line.d2h-del .hljs {
|
||||
color: #24292e !important; /* Dark text on light red background */
|
||||
}
|
||||
|
||||
.theme-light .d2h-code-line.d2h-ins .hljs {
|
||||
color: #24292e !important; /* Dark text on light green background */
|
||||
}
|
||||
|
||||
/* ============================== */
|
||||
/* Mobile Controls */
|
||||
/* Mobile Controls */
|
||||
/* ============================== */
|
||||
|
||||
.diff-mobile-controls {
|
||||
|
|
@ -268,11 +143,11 @@
|
|||
in srgb,
|
||||
var(--color-green) 75%,
|
||||
var(--background-primary) 25%
|
||||
) !important;
|
||||
);
|
||||
}
|
||||
|
||||
.diff-mobile-accept:active {
|
||||
background-color: var(--color-green) !important;
|
||||
background-color: var(--color-green);
|
||||
}
|
||||
|
||||
.diff-mobile-reject {
|
||||
|
|
@ -280,11 +155,11 @@
|
|||
in srgb,
|
||||
var(--color-red) 75%,
|
||||
var(--background-primary) 25%
|
||||
) !important;
|
||||
);
|
||||
}
|
||||
|
||||
.diff-mobile-reject:active {
|
||||
background-color: var(--color-red) !important;
|
||||
background-color: var(--color-red);
|
||||
}
|
||||
|
||||
/* Adjust diff height on mobile to account for buttons */
|
||||
|
|
|
|||
Loading…
Reference in a new issue