diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index 55b9751cc6..4438a31c9d 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -28,6 +28,10 @@ z-index: 1; } +.tippy-box[data-theme="default"] { + box-shadow: 0 6px 18px var(--color-shadow); +} + /* bare theme, no styling at all, except box-shadow */ .tippy-box[data-theme="bare"] { border: none; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 7a39a725a5..cb75f7745a 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1669,7 +1669,7 @@ td .commit-summary { } .repo-button-row-left { - flex: 1; + flex-grow: 1; } .repo-button-row .button { diff --git a/web_src/css/repo/clone.css b/web_src/css/repo/clone.css index 3f6a1323fe..c6887fbf16 100644 --- a/web_src/css/repo/clone.css +++ b/web_src/css/repo/clone.css @@ -20,10 +20,12 @@ .clone-panel-tab .item { padding: 5px 10px; background: none; + color: var(--color-text-light-2); } .clone-panel-tab .item.active { - border-bottom: 3px solid var(--color-secondary); + color: var(--color-text-dark); + border-bottom: 3px solid currentcolor; } .clone-panel-tab + .divider { diff --git a/web_src/js/features/repo-common.ts b/web_src/js/features/repo-common.ts index 90860720e4..86e14585c7 100644 --- a/web_src/js/features/repo-common.ts +++ b/web_src/js/features/repo-common.ts @@ -99,6 +99,7 @@ function initClonePanelButton(btn: HTMLButtonElement) { placement: 'bottom-end', interactive: true, hideOnClick: true, + arrow: false, }); } diff --git a/web_src/js/modules/tippy.ts b/web_src/js/modules/tippy.ts index 4e7f1ac093..6eca6d9a86 100644 --- a/web_src/js/modules/tippy.ts +++ b/web_src/js/modules/tippy.ts @@ -42,16 +42,17 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance { visibleInstances.add(instance); return onShow?.(instance); }, - arrow: arrow || (theme === 'bare' ? false : arrowSvg), + arrow: arrow ?? (theme === 'bare' ? false : arrowSvg), // HTML role attribute, ideally the default role would be "popover" but it does not exist role: role || 'menu', // CSS theme, either "default", "tooltip", "menu", "box-with-header" or "bare" theme: theme || role || 'default', + offset: [0, arrow ? 10 : 6], plugins: [followCursor], ...other, } satisfies Partial); - if (role === 'menu') { + if (instance.props.role === 'menu') { target.setAttribute('aria-haspopup', 'true'); }