ynkmr/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-09-25 14:13:40 +09:00
Code Issues Projects Releases Wiki Activity

fix(ui): misc ui fixes (#39336)

Browse Source 
1. Give menu items an inset pill highlight, text position and menu width are unchanged in most menus
1. Add arrow key, Enter, Space and Escape handling to all tippy menus
1. Mark the keyboard cursor of fomantic and tippy menus with the focus ring instead of the hover background
1. Mark the current dropdown item with the active color so it stands out from the hovered one
1. Stop navbar dropdown links from taking the navbar item hover color
1. Replace the actions job log options dropdown with the shared tippy menu, its hover highlight was invisible
1. Stop changing font weight on active and selected menu items, it resized rows while arrowing
1. Stretch the "All extensions" button in the diff file extension filter to the full menu width
1. Fix the actions run summary block covering the panel's rounded corners and indenting wrapped stats
This commit is contained in:
silverwind
2026-09-25 00:01:09 +00:00
committed by GitHub
parent f757631a47
commit 7f3b4a0bdd
17 changed files with 187 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/css/base.css
+12 -19
View File
@@ -445,11 +445,6 @@ a.label,
color: var(--color-text) !important;
}
.user-menu > .item {
width: 100%;
border-radius: 0 !important;
}
.color-preview {
display: inline-block;
margin-left: 0.4em;
@@ -544,24 +539,22 @@ overflow-menu .overflow-menu-popup::after {
border-bottom-color: var(--color-menu);
}
overflow-menu .overflow-menu-popup > .item {
display: flex;
align-items: center;
padding: 9px 18px !important;
color: var(--color-text) !important;
background: transparent !important;
text-decoration: none;
gap: 10px;
width: 100%;
overflow-menu.ui.menu .overflow-menu-popup > .item.item { /* doubled class beats the host menu's item styles */
margin: 0 4px;
padding-inline: 8px !important; /* plus the margin, matches the host's tab padding */
border: none;
border-radius: var(--border-radius);
color: var(--color-text);
width: calc(100% - 8px);
}
overflow-menu .overflow-menu-popup > .item:hover,
overflow-menu .overflow-menu-popup > .item:focus {
background: var(--color-hover) !important;
overflow-menu.ui.menu .overflow-menu-popup > .item.item:hover,
overflow-menu.ui.menu .overflow-menu-popup > .item.item:focus {
background: var(--color-hover);
}
overflow-menu .overflow-menu-popup > .item.active {
background: var(--color-active) !important;
overflow-menu.ui.menu .overflow-menu-popup > .item.item.active {
background: var(--color-active);
}
overflow-menu .overflow-menu-items {
web_src/css/modules/dropdown.css
+15 -24
View File
@@ -18,7 +18,7 @@
top: 100%;
min-width: max-content;
margin: 0;
padding: 0;
padding: 4px 0;
background: var(--color-menu);
font-size: 1em;
text-align: left;
@@ -69,7 +69,10 @@
line-height: var(--line-height-default);
font-size: 1rem;
color: var(--color-text);
padding: 0.78571429rem 1.14285714rem !important;
width: calc(100% - 8px); /* button items do not stretch on their own */
margin: 0 4px;
padding: 0.78571429rem 0.85714286rem !important; /* 12px, the margin adds the remaining 4px */
border-radius: var(--border-radius);
text-transform: none;
font-weight: var(--font-weight-normal);
box-shadow: none;
@@ -211,6 +214,7 @@ select.ui.dropdown {
border-top-width: 0 !important;
outline: none;
margin: 0 -1px;
padding: 0;
min-width: calc(100% + 2px);
width: calc(100% + 2px);
border-radius: 0 0 0.28571429rem 0.28571429rem;
@@ -252,15 +256,14 @@ select.ui.dropdown {
.ui.selection.dropdown .menu > .item {
border-top: 1px solid var(--color-secondary);
width: 100%;
margin: 0;
padding: 0.78571429rem 1.14285714rem !important;
border-radius: 0;
white-space: normal;
overflow-wrap: normal;
}
.ui.selection.dropdown .menu .item:first-of-type {
border-radius: 0;
}
.ui.selection.dropdown .menu > .hidden.addition.item {
display: none;
}
@@ -505,7 +508,11 @@ select.ui.dropdown {
color: var(--color-text);
box-shadow: none;
z-index: 12;
border-radius: 0;
}
.ui.dropdown.keyboard-nav .menu .selected.item {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.ui.dropdown .menu > .item:hover {
@@ -579,7 +586,7 @@ select.ui.dropdown {
.ui.dropdown .menu .selected.item {
color: var(--color-text);
background: var(--color-hover);
background: var(--color-active);
}
.ui.dropdown > .filtered.text {
@@ -821,18 +828,6 @@ select.ui.dropdown {
margin-right: 0.78571429rem;
}
.ui.dropdown .menu .item {
border-radius: 0;
}
.ui.dropdown .menu .item:first-of-type {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.ui.dropdown .menu .item:last-of-type {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
.ui.ui.dropdown > .icon.icon {
position: initial;
@@ -897,10 +892,6 @@ select.ui.dropdown {
max-width: 80vw;
}
.scrolling.menu .item.selected {
font-weight: var(--font-weight-semibold) !important;
}
/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content
the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */
.ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {
web_src/css/modules/menu.css
+2 -28
View File
@@ -96,33 +96,6 @@
flex-direction: column !important;
}
.ui.menu .ui.dropdown .menu > .item {
margin: 0;
text-align: left;
font-size: 1em !important;
padding: 0.78571429em 1.14285714em !important;
background: transparent !important;
color: var(--color-text) !important;
font-weight: var(--font-weight-normal) !important;
}
.ui.menu .ui.dropdown .menu > .item:hover {
color: var(--color-text) !important;
background: var(--color-hover) !important;
}
.ui.menu .ui.dropdown .menu > .selected.item {
color: var(--color-text) !important;
background: var(--color-hover) !important;
}
.ui.menu .ui.dropdown .menu > .active.item {
color: var(--color-text) !important;
background: var(--color-active) !important;
font-weight: var(--font-weight-medium) !important;
}
.ui.menu .ui.dropdown.item .menu .item {
width: 100%;
}
.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
display: block;
}
@@ -442,7 +415,8 @@
.ui.stackable.menu {
flex-direction: column;
}
.ui.stackable.menu .item {
.ui.stackable.menu > .item,
.ui.stackable.menu > .menu > .item {
width: 100% !important;
}
.ui.stackable.menu .left.menu {
web_src/css/modules/navbar.css
+1 -2
View File
@@ -34,8 +34,7 @@
background: var(--color-active);
}
#navbar a.item:hover,
#navbar button.item:hover {
#navbar :is(a, button).item:not(.dropdown *):hover {
background: var(--color-nav-hover-bg);
}
web_src/css/modules/tippy.css
+4 -6
View File
@@ -91,22 +91,20 @@
.tippy-box[data-theme="menu"] .item {
display: flex;
align-items: center;
padding: 9px 18px;
margin: 0 4px;
padding: 9px 14px;
border-radius: var(--border-radius);
color: inherit;
background: inherit;
text-decoration: none;
gap: 10px;
width: 100%;
width: calc(100% - 8px); /* button items do not stretch on their own */
}
.tippy-box[data-theme="menu"] .item:hover {
background: var(--color-hover);
}
.tippy-box[data-theme="menu"] .item:focus-visible {
background: var(--color-hover);
}
.tippy-box[data-theme="menu"] .item.active {
background: var(--color-active);
}
web_src/css/repo/reactions.css
+1
View File
@@ -50,6 +50,7 @@
.ui.dropdown.select-reaction .menu > .item {
width: 34px;
height: 34px;
margin: 0;
font-size: 16px;
border-radius: var(--border-radius);
display: flex;
web_src/css/themes/theme-gitea-dark.css
-3
View File
@@ -66,11 +66,8 @@ gitea-theme-meta-info {
--color-console-fg: #f8f8f8;
--color-console-fg-subtle: #c1c3c8;
--color-console-bg: #191a1c;
--color-console-border: #313338;
--color-console-hover-bg: #2a2c30;
--color-console-active-bg: #313338;
--color-console-menu-bg: #292b2e;
--color-console-menu-border: #46494f;
--color-console-link: #969aa1;
/* named colors */
--color-red: #cc4848;
web_src/css/themes/theme-gitea-light.css
-3
View File
@@ -66,11 +66,8 @@ gitea-theme-meta-info {
--color-console-fg: #0d1117;
--color-console-fg-subtle: #40474d;
--color-console-bg: #ffffff;
--color-console-border: #d0d7de;
--color-console-hover-bg: #f1f3f5;
--color-console-active-bg: #d0d7de;
--color-console-menu-bg: #f8f9fb;
--color-console-menu-border: #d0d7de;
--color-console-link: #5c656d;
/* named colors */
--color-red: #db2828;