fix(desktop): add color fallbacks for legacy webviews
This commit is contained in:
t8y2 committed
1 parent
8942356eed
commit
ee94157055
7 files changed
+352
-123
No files matched your search
@@ -8183,35 +8183,68 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
|
||||
<style scoped>
|
||||
[data-grid-root] {
|
||||
--data-grid-row-muted-bg: color-mix(in oklab, var(--muted) 30%, transparent);
|
||||
--data-grid-row-new-bg: color-mix(in oklab, var(--primary) 5%, transparent);
|
||||
--data-grid-row-deleted-bg: color-mix(in oklab, var(--destructive) 5%, transparent);
|
||||
--data-grid-cell-active-bg: color-mix(in oklab, var(--primary) 15%, transparent);
|
||||
--data-grid-cell-dirty-bg: color-mix(in oklab, oklch(79.5% 0.184 86.047) 10%, transparent);
|
||||
--data-grid-cell-selected-bg: color-mix(in oklab, var(--primary) 25%, transparent);
|
||||
--data-grid-cell-selected-dirty-bg: color-mix(
|
||||
in oklab,
|
||||
oklch(0.8 0.15 85) 30%,
|
||||
color-mix(in oklab, var(--primary) 18%, transparent)
|
||||
);
|
||||
--data-grid-cell-selected-border: color-mix(in oklab, var(--primary) 70%, transparent);
|
||||
--data-grid-cell-hover-bg: color-mix(in oklab, var(--accent) 50%, transparent);
|
||||
--data-grid-row-muted-bg: rgb(248 248 248);
|
||||
--data-grid-row-new-bg: rgb(243 243 243);
|
||||
--data-grid-row-deleted-bg: rgb(255 244 244);
|
||||
--data-grid-cell-active-bg: rgb(232 232 232);
|
||||
--data-grid-cell-dirty-bg: rgb(255 248 230);
|
||||
--data-grid-cell-selected-bg: rgb(226 226 226);
|
||||
--data-grid-cell-selected-dirty-bg: rgb(244 229 186);
|
||||
--data-grid-cell-selected-border: rgb(90 90 90);
|
||||
--data-grid-cell-hover-bg: rgb(245 245 245);
|
||||
--data-grid-cell-search-bg: rgb(253 245 184);
|
||||
--data-grid-cell-current-search-bg: rgb(253 224 71 / 52%);
|
||||
--data-grid-cell-current-search-border: rgb(234 179 8 / 82%);
|
||||
--data-grid-row-number-default-bg: rgb(255 255 255);
|
||||
--data-grid-row-number-new-bg: color-mix(in oklab, rgb(16 185 129) 15%, var(--background));
|
||||
--data-grid-row-number-edited-bg: color-mix(in oklab, rgb(245 158 11) 15%, var(--background));
|
||||
--data-grid-row-number-deleted-bg: color-mix(in oklab, var(--destructive) 15%, var(--background));
|
||||
--data-grid-row-number-active-bg: color-mix(in oklab, var(--primary) 15%, var(--background));
|
||||
--data-grid-row-number-selected-bg: color-mix(in oklab, var(--primary) 25%, var(--background));
|
||||
--data-grid-row-number-new-bg: rgb(219 244 233);
|
||||
--data-grid-row-number-edited-bg: rgb(253 241 219);
|
||||
--data-grid-row-number-deleted-bg: rgb(255 244 244);
|
||||
--data-grid-row-number-active-bg: rgb(232 232 232);
|
||||
--data-grid-row-number-selected-bg: rgb(226 226 226);
|
||||
}
|
||||
|
||||
:global(.dark) [data-grid-root] {
|
||||
--data-grid-row-muted-bg: rgb(32 32 34);
|
||||
--data-grid-row-new-bg: rgb(51 51 55);
|
||||
--data-grid-row-deleted-bg: rgb(55 31 32);
|
||||
--data-grid-cell-active-bg: rgb(64 64 64);
|
||||
--data-grid-cell-dirty-bg: rgb(94 75 26);
|
||||
--data-grid-cell-selected-bg: rgb(66 67 70);
|
||||
--data-grid-cell-selected-dirty-bg: rgb(94 75 26);
|
||||
--data-grid-cell-selected-border: rgb(170 170 175);
|
||||
--data-grid-cell-hover-bg: rgb(46 47 51);
|
||||
--data-grid-cell-search-bg: rgb(72 57 8);
|
||||
--data-grid-cell-current-search-bg: rgb(116 87 0);
|
||||
--data-grid-cell-current-search-border: rgb(239 177 0);
|
||||
--data-grid-row-number-default-bg: rgb(35 37 42);
|
||||
--data-grid-row-number-new-bg: rgb(33 45 40);
|
||||
--data-grid-row-number-edited-bg: rgb(48 41 28);
|
||||
--data-grid-row-number-deleted-bg: rgb(55 31 32);
|
||||
--data-grid-row-number-active-bg: rgb(64 64 64);
|
||||
--data-grid-row-number-selected-bg: rgb(66 67 70);
|
||||
}
|
||||
|
||||
@supports (background: color-mix(in oklab, white 50%, transparent)) {
|
||||
[data-grid-root] {
|
||||
--data-grid-row-muted-bg: color-mix(in oklab, var(--muted) 30%, transparent);
|
||||
--data-grid-row-new-bg: color-mix(in oklab, var(--primary) 5%, transparent);
|
||||
--data-grid-row-deleted-bg: color-mix(in oklab, var(--destructive) 5%, transparent);
|
||||
--data-grid-cell-active-bg: color-mix(in oklab, var(--primary) 15%, transparent);
|
||||
--data-grid-cell-dirty-bg: color-mix(in oklab, rgb(240 177 0) 10%, transparent);
|
||||
--data-grid-cell-selected-bg: color-mix(in oklab, var(--primary) 25%, transparent);
|
||||
--data-grid-cell-selected-dirty-bg: color-mix(
|
||||
in oklab,
|
||||
rgb(234 181 50) 30%,
|
||||
color-mix(in oklab, var(--primary) 18%, transparent)
|
||||
);
|
||||
--data-grid-cell-selected-border: color-mix(in oklab, var(--primary) 70%, transparent);
|
||||
--data-grid-cell-hover-bg: color-mix(in oklab, var(--accent) 50%, transparent);
|
||||
--data-grid-row-number-new-bg: color-mix(in oklab, rgb(16 185 129) 15%, var(--background));
|
||||
--data-grid-row-number-edited-bg: color-mix(in oklab, rgb(245 158 11) 15%, var(--background));
|
||||
--data-grid-row-number-deleted-bg: color-mix(in oklab, var(--destructive) 15%, var(--background));
|
||||
--data-grid-row-number-active-bg: color-mix(in oklab, var(--primary) 15%, var(--background));
|
||||
--data-grid-row-number-selected-bg: color-mix(in oklab, var(--primary) 25%, var(--background));
|
||||
}
|
||||
}
|
||||
|
||||
.data-grid-topbar {
|
||||
@@ -8335,15 +8368,18 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
||||
}
|
||||
|
||||
.ddl-code :deep(.ddl-kw) {
|
||||
color: rgb(39 132 213);
|
||||
color: oklch(0.6 0.15 250);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ddl-code :deep(.ddl-ident) {
|
||||
color: rgb(58 168 91);
|
||||
color: oklch(0.65 0.15 150);
|
||||
}
|
||||
|
||||
.ddl-code :deep(.ddl-str) {
|
||||
color: rgb(213 111 44);
|
||||
color: oklch(0.65 0.15 50);
|
||||
}
|
||||
</style>
|
||||
@@ -194,13 +194,16 @@ function confirmRemoveChild() {
|
||||
align-items: start;
|
||||
margin: 4px 0 4px 2ch;
|
||||
padding: 7px 8px;
|
||||
border: 1px solid var(--border);
|
||||
border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
|
||||
border-left-width: 3px;
|
||||
border-radius: 8px;
|
||||
background: var(--muted);
|
||||
background: color-mix(in oklab, var(--background) 76%, var(--muted));
|
||||
}
|
||||
|
||||
.json-edit-row:hover {
|
||||
background: var(--accent);
|
||||
background: color-mix(in oklab, var(--background) 58%, var(--muted));
|
||||
}
|
||||
|
||||
@@ -271,6 +274,7 @@ function confirmRemoveChild() {
|
||||
|
||||
.json-edit-value:focus {
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 2px rgb(59 130 246 / 0.18);
|
||||
box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 28%, transparent);
|
||||
}
|
||||
|
||||
|
||||
@@ -3752,27 +3752,29 @@ function treeItemMenuItems(): ContextMenuItem[] {
|
||||
|
||||
/* Unfocused: subtle gray */
|
||||
.tree-item-active {
|
||||
background-color: var(--tree-connection-active-bg, oklch(0.94 0 0)) !important;
|
||||
background-color: var(--tree-connection-active-bg, rgb(235 235 235)) !important;
|
||||
}
|
||||
:root.dark .tree-item-active {
|
||||
background-color: var(--tree-connection-active-bg, oklch(0.26 0 0)) !important;
|
||||
background-color: var(--tree-connection-active-bg, rgb(36 36 36)) !important;
|
||||
}
|
||||
|
||||
/* Focused: soft blue */
|
||||
.tree-item-active:focus {
|
||||
background-color: var(--tree-connection-active-focus-bg, oklch(0.91 0.03 250)) !important;
|
||||
background-color: var(--tree-connection-active-focus-bg, rgb(211 227 245)) !important;
|
||||
}
|
||||
:root.dark .tree-item-active:focus {
|
||||
background-color: var(--tree-connection-active-focus-bg, oklch(0.35 0.06 250)) !important;
|
||||
background-color: var(--tree-connection-active-focus-bg, rgb(33 60 89)) !important;
|
||||
}
|
||||
|
||||
/* Locate highlight: instant amber, then fade on removal */
|
||||
.tree-item-highlight {
|
||||
background-color: rgb(253 225 167) !important;
|
||||
background-color: oklch(0.92 0.08 85) !important;
|
||||
transition: background-color 0.8s ease-out 0.6s;
|
||||
}
|
||||
|
||||
:root.dark .tree-item-highlight {
|
||||
background-color: rgb(110 67 0) !important;
|
||||
background-color: oklch(0.42 0.12 80) !important;
|
||||
transition: background-color 0.8s ease-out 0.6s;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user