mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

ui: use alt bg color for labels in hovered menu items (#4458) 

A followup for https://codeberg.org/forgejo/forgejo/pulls/2935.
Re-use the alt bg color for labels inside menu items that are hovered, to keep the label box visible.

Preview: https://codeberg.org/attachments/d649b2d9-0838-49af-be6a-766de2faf52e

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4458
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
This commit is contained in:
0ko 2024-07-12 11:12:51 +00:00
parent e5379117fb
commit 16224ebd33
2 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web_src/css/base.css
View File

@ -1185,7 +1185,8 @@ svg.text.purple,
color: var(--color-label-text); color: var(--color-label-text);
} }
.ui.menu .active.item > .label { .ui.menu .active.item > .label,
.ui.menu.tabs-with-labels .item:hover > .label {
background: var(--color-label-bg-alt, var(--color-label-bg)); background: var(--color-label-bg-alt, var(--color-label-bg));
} }

2
web_src/js/components/DashboardRepoList.vue
View File

@ -339,7 +339,7 @@ export default sfc; // activate the IDE's Vue plugin
</script> </script>
<template> <template>
<div> <div>
<div v-if="!isOrganization" class="ui secondary stackable menu"> <div v-if="!isOrganization" class="ui secondary stackable menu tabs-with-labels">
<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{ textMyRepos }} <span class="ui grey label tw-ml-2">{{ reposTotalCount }}</span></a> <a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{ textMyRepos }} <span class="ui grey label tw-ml-2">{{ reposTotalCount }}</span></a>
<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textMyOrgs }} <span class="ui grey label tw-ml-2">{{ organizationsTotalCount }}</span></a> <a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textMyOrgs }} <span class="ui grey label tw-ml-2">{{ organizationsTotalCount }}</span></a>
</div> </div>