diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte index dbc898385..22d714acf 100644 --- a/packages/web/src/Screen.svelte +++ b/packages/web/src/Screen.svelte @@ -146,7 +146,7 @@ left: var(--dim-content-left); height: var(--dim-tabs-panel-height); right: 0; - background-color: var(--theme-bg-2); + background-color: var(--theme-bg-1); border-top: 1px solid var(--theme-border); overflow-x: auto; diff --git a/packages/web/src/modals/DropDownMenu.svelte b/packages/web/src/modals/DropDownMenu.svelte index 6dcbd2aa5..881dd22d5 100644 --- a/packages/web/src/modals/DropDownMenu.svelte +++ b/packages/web/src/modals/DropDownMenu.svelte @@ -142,9 +142,9 @@ ul { position: absolute; list-style: none; - background-color: #fff; + background-color: var(--theme-bg-0); border-radius: 4px; - border: 1px solid rgba(0, 0, 0, 0.15); + border: 1px solid var(--theme-border); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); padding: 5px 0; margin: 2px 0 0; @@ -168,25 +168,25 @@ padding: 3px 20px; line-height: 1.42; white-space: nop-wrap; - color: #262626; + color: var(--theme-font-1); display: flex; justify-content: space-between; } a.disabled { - color: gray; + color: var(--theme-font-3); } a:hover:not(.disabled) { - background-color: #f5f5f5; + background-color: var(--theme-bg-1); text-decoration: none; - color: #262626; + color: var(--theme-font-1); } .divider { margin: 9px 0px 9px 0px; - border-top: 1px solid #f2f2f2; - border-bottom: 1px solid #fff; + border-top: 1px solid var(--theme-border); + border-bottom: 1px solid var(--theme-bg-0); } .menu-right { diff --git a/packages/web/src/modals/HorizontalMenu.svelte b/packages/web/src/modals/HorizontalMenu.svelte index 2d0c7e5f8..b85c986ed 100644 --- a/packages/web/src/modals/HorizontalMenu.svelte +++ b/packages/web/src/modals/HorizontalMenu.svelte @@ -6,6 +6,7 @@ export let items; let isOpened; + let openedLabel; function handleOpenMenu(element, item) { const rect = element.getBoundingClientRect(); @@ -14,11 +15,13 @@ const items = item.submenu; $currentDropDownMenu = { left, top, items }; isOpened = true; + openedLabel = item.text || item.label; } $: preparedItems = prepareMenuItems(items, {}, $commandsCustomized); $: if (!$currentDropDownMenu) { isOpened = false; + openedLabel = null; } @@ -26,6 +29,7 @@ {#each preparedItems as item}
handleOpenMenu(e.target, item)} on:mousemove={e => { if (isOpened) { @@ -62,4 +66,8 @@ .item:hover { background: var(--theme-bg-3); } + + .item.opened { + background: var(--theme-bg-3); + } diff --git a/packages/web/src/widgets/TabsPanel.svelte b/packages/web/src/widgets/TabsPanel.svelte index 5698924d6..2f0202ce9 100644 --- a/packages/web/src/widgets/TabsPanel.svelte +++ b/packages/web/src/widgets/TabsPanel.svelte @@ -424,7 +424,7 @@ background-color: var(--theme-bg-3); } */ .db-name.selected { - background-color: var(--theme-bg-1); + background-color: var(--theme-bg-0); } .file-tab-item { border-right: 1px solid var(--theme-border); @@ -439,7 +439,7 @@ user-select: none; } .file-tab-item.selected { - background-color: var(--theme-bg-1); + background-color: var(--theme-bg-0); } .file-name { margin-left: 5px;