mirror of
https://github.com/andy-stack/vaultkeeper-ai.git
synced 2026-07-22 16:30:27 +00:00
4887a10764
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.
175 lines
No EOL
5.5 KiB
CSS
175 lines
No EOL
5.5 KiB
CSS
/*
|
|
* 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 */
|
|
/* ============================== */
|
|
|
|
.d2h-wrapper {
|
|
container-type: size;
|
|
container-name: diff-wrapper;
|
|
transform: translateZ(0);
|
|
height: 100cqh;
|
|
}
|
|
|
|
.d2h-file-header {
|
|
height: 35px;
|
|
padding: 0;
|
|
}
|
|
|
|
.d2h-file-name-wrapper {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.d2h-code-linenumber {
|
|
cursor: default;
|
|
}
|
|
|
|
.d2h-file-diff {
|
|
overflow: auto;
|
|
max-height: calc(100cqh - 37px);
|
|
}
|
|
|
|
.d2h-diff-table {
|
|
position: relative;
|
|
}
|
|
|
|
.d2h-code-side-linenumber {
|
|
position: relative;
|
|
display: table-cell;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* Mobile Controls */
|
|
/* ============================== */
|
|
|
|
.diff-mobile-controls {
|
|
display: none; /* Hidden by default (desktop) */
|
|
}
|
|
|
|
/* Avoid the floating obsidian controls */
|
|
@media (max-width: 600px) {
|
|
.diff-mobile-controls {
|
|
margin-bottom: 85px;
|
|
}
|
|
}
|
|
|
|
.diff-view-mobile .diff-mobile-controls {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--size-4-2);
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: var(--size-4-3);
|
|
z-index: 10;
|
|
}
|
|
|
|
.diff-mobile-button {
|
|
min-height: 44px;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: var(--font-semibold);
|
|
border-radius: var(--button-radius);
|
|
cursor: pointer;
|
|
border: none;
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.diff-mobile-accept {
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--color-green) 75%,
|
|
var(--background-primary) 25%
|
|
);
|
|
}
|
|
|
|
.diff-mobile-accept:active {
|
|
background-color: var(--color-green);
|
|
}
|
|
|
|
.diff-mobile-reject {
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--color-red) 75%,
|
|
var(--background-primary) 25%
|
|
);
|
|
}
|
|
|
|
.diff-mobile-reject:active {
|
|
background-color: var(--color-red);
|
|
}
|
|
|
|
/* Adjust diff height on mobile to account for buttons */
|
|
.diff-view-mobile .d2h-file-diff {
|
|
max-height: calc(100cqh - 37px - 40px);
|
|
}
|
|
|
|
/* Avoid the floating obsidian controls */
|
|
@media (max-width: 600px) {
|
|
.diff-view-mobile .d2h-file-diff {
|
|
max-height: calc(100cqh - 37px - 120px);
|
|
}
|
|
} |