/* Override diff2html blue tones with Obsidian's CSS variables */ /* 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; background-color: var(--background-primary) !important; border-color: var(--background-modifier-border) !important; } /* File name container */ .d2h-file-name-wrapper { background-color: var(--background-primary-alt) !important; } .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-code-side-linenumber { position: relative; 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; } .d2h-file-header { padding: 0 !important; } .d2h-file-name-wrapper { padding-left: 8px !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 */ /* ============================== */ .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% ) !important; } .diff-mobile-accept:active { background-color: var(--color-green) !important; } .diff-mobile-reject { background-color: color-mix( in srgb, var(--color-red) 75%, var(--background-primary) 25% ) !important; } .diff-mobile-reject:active { background-color: var(--color-red) !important; } /* 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); } }