/* --quote-bg-color: hsl(from var(--page-bg) h 15% 35% / 35%); */ --quote-bg-color: hsl(from var(--page-bg) h 15% 15% / 35%); /* --quote-border-left: hsl(from var(--page-text-color) h 30% l / 65%) solid 4px; */ --quote-border-left: hsl(from var(--page-text-color) h 30% l / 35%) solid 4px; /* --quote-text-color: hsl(from var(--page-text-color) h s 86%); */ --quote-text-color: var(--page-text-color); --telomere-updated: hsl(from var(--interactive-color, crimson) h 100% 32.5% / 85%); --card-title-color: hsl(from var(--page-text-color) h s 80%); --card-title-hover-color: hsl(from var(--page-text-color) h s 85%); --card-description-color: hsl(from var(--page-text-color) h s l / .7); --card-description-link-color: hsl(from var(--page-link-color) h s l / .7); --card-description-code-color: hsl(from var(--code-color, #333) h s l / .7); & img.image { .search-form .form-group:focus-within input { :where(main) .lines:has(> .cursor-line) > .line:not(.cursor-line) > :is(.text, .telomere) { --new-button-bg: hsl(from var(--search-form-bg) h s l / .5); --search-form-bg: hsl(252 2% 47% / 32.5%); &:has(:where(& > body > #app-container > .app > .container > .page-column > .col-page > .page-wrapper > div.drag-and-drop-enter > main.page > .editor#editor > .pointer-event > .lines > .line).cursor-line) { --search-form-bg: hsl(252 2% 47% / 12.5%); } body { --deco-marking-pencil-color: light-dark(var(--c-red-1, crimson), var(--c-red-1, lightsalmon)); } & > a .description { aspect-ratio: 1 / 1.2; padding: 4px 4px; line-height: 1.55; font-size: 11px; font-family: var(--card-description-font-family, sans-serif); } & > a .content .header { border-top: none; }