mirror of
https://github.com/andy-stack/vaultkeeper-ai.git
synced 2026-07-22 06:42:03 +00:00
9276d2d0cd
- Add horizontal margin to conversation divider in TopBar - Adjust grid row sizing in conversation history modal - Remove margin from modals on mobile screens (≤600px) - Reduce bottom margin for diff mobile controls - Remove redundant background styling from diff button container - Fix diff view height calculation on mobile to avoid control overlap
306 lines
No EOL
7.6 KiB
CSS
306 lines
No EOL
7.6 KiB
CSS
/* 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);
|
|
}
|
|
} |