tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-03 09:07:19 +00:00
Code Releases Activity

Fix button alignments and remove unnecessary styles (#34206)

Browse Source 
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Kerwin Bryant
2025-04-16 16:14:10 +08:00
committed by GitHub
parent a4f22a3e80
commit bde014e46d
22 changed files with 98 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web_src/css/base.css
View File

@ -1037,12 +1037,13 @@ table th[data-sortt-desc] .svg {
text-align: left;
}
.ellipsis-button {
padding: 0 5px 8px !important;
display: inline-block !important;
font-weight: var(--font-weight-semibold) !important;
line-height: 6px !important;
vertical-align: middle !important;
.ui.button.ellipsis-button {
padding: 0 5px 8px;
display: inline-block;
font-weight: var(--font-weight-semibold);
line-height: 8px;
vertical-align: middle;
min-height: 0;
}
.precolors {

1
web_src/css/features/gitgraph.css
View File

@ -116,6 +116,7 @@
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
min-height: 0;
}
#git-graph-container #graph-raw-list {

103
web_src/css/modules/button.css
View File

@ -1,20 +1,15 @@
/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
unused rules here after refactoring, please remove them. */
.ui.button {
cursor: pointer;
display: inline-block;
min-height: 1em;
display: inline-flex;
outline: none;
vertical-align: baseline;
font-family: var(--fonts-regular);
margin: 0 0.25em 0 0;
padding: 0.78571429em 1.5em;
font-weight: var(--font-weight-normal);
font-size: 1rem;
text-align: center;
text-decoration: none;
line-height: 1;
border-radius: 0.28571429rem;
border-radius: var(--border-radius);
user-select: none;
-webkit-tap-highlight-color: transparent;
justify-content: center;
@ -58,12 +53,13 @@
pointer-events: none !important;
}
/* there is no "ui labeled icon button" support" because it is not used */
.ui.labeled.button:not(.icon) {
display: inline-flex;
flex-direction: row;
background: none;
padding: 0 !important;
padding: 0;
border: none;
min-height: unset;
}
.ui.labeled.button > .button {
margin: 0;
@ -102,47 +98,60 @@
margin: 0 -0.21428571em 0 0.42857143em;
}
/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
.ui.button { /* stylelint-disable-line no-duplicate-selectors */
min-height: 38px;
padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
}
.ui.compact.buttons .button,
.ui.compact.button {
padding: 0.58928571em 1.125em;
padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
min-height: 32px;
}
.ui.compact.icon.buttons .button,
.ui.compact.icon.button {
padding: 0.58928571em;
}
.ui.compact.labeled.icon.button {
padding: 0.58928571em 3.69642857em;
}
.ui.compact.labeled.icon.button > .icon {
padding: 0.58928571em 0;
padding: 0.57em /* around 8px */;
}
.ui.buttons .button,
.ui.button {
font-size: 1rem;
}
/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
.ui.mini.buttons .dropdown,
.ui.mini.buttons .dropdown .menu > .item,
.ui.mini.buttons .button,
.ui.ui.ui.ui.mini.button {
font-size: 0.78571429rem;
font-size: 11px;
min-height: 30px;
}
.ui.ui.ui.ui.mini.button.compact {
min-height: 26px;
}
/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
.ui.tiny.buttons .dropdown,
.ui.tiny.buttons .dropdown .menu > .item,
.ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {
font-size: 0.85714286rem;
font-size: 12px;
min-height: 32px;
}
.ui.ui.ui.ui.tiny.button.compact {
min-height: 28px;
}
/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
.ui.small.buttons .dropdown,
.ui.small.buttons .dropdown .menu > .item,
.ui.small.buttons .button,
.ui.ui.ui.ui.small.button {
font-size: 0.92857143rem;
font-size: 13px;
min-height: 34px;
}
.ui.ui.ui.ui.small.button.compact {
min-height: 30px;
}
.ui.icon.buttons .button,
.ui.icon.button:not(.compact) {
padding: 0.78571429em;
padding: 0.57em;
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
@ -152,12 +161,12 @@
.ui.basic.buttons .button,
.ui.basic.button {
border-radius: 0.28571429rem;
border-radius: var(--border-radius);
background: none;
}
.ui.basic.buttons {
border: 1px solid var(--color-secondary);
border-radius: 0.28571429rem;
border-radius: var(--border-radius);
}
.ui.basic.buttons .button {
border-radius: 0;
@ -188,29 +197,6 @@
background: var(--color-active);
}
.ui.labeled.icon.button {
position: relative;
padding-left: 4.07142857em !important;
padding-right: 1.5em !important;
}
.ui.labeled.icon.button > .icon {
position: absolute;
top: 0;
left: 0;
height: 100%;
line-height: 1;
border-radius: 0;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
text-align: center;
animation: none;
padding: 0.78571429em 0;
margin: 0;
width: 2.57142857em;
background: var(--color-hover);
}
.ui.button.toggle.active {
background-color: var(--color-green);
color: var(--color-white);
@ -379,12 +365,12 @@ It needs some tricks to tweak the left/right borders with active state */
.ui.buttons .button:first-child {
border-left: none;
margin-left: 0;
border-top-left-radius: 0.28571429rem;
border-bottom-left-radius: 0.28571429rem;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.ui.buttons .button:last-child {
border-top-right-radius: 0.28571429rem;
border-bottom-right-radius: 0.28571429rem;
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.ui.buttons .button:hover {
@ -414,10 +400,3 @@ It needs some tricks to tweak the left/right borders with active state */
.ui.buttons .button.active + .button {
border-left: none;
}
/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
.ui.small.button:not(.compact):has(.svg) {
padding-top: 0.58928571em;
padding-bottom: 0.58928571em;
}

13
web_src/css/repo.css
View File

@ -1629,21 +1629,17 @@ td .commit-summary {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.repo-button-row-left {
flex-grow: 1;
}
.repo-button-row .button {
padding: 6px 10px !important;
height: 30px;
.repo-button-row .ui.button {
flex-shrink: 0;
margin: 0;
}
.repo-button-row .button.dropdown:not(.icon) {
padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
min-height: 30px;
}
tbody.commit-list {
@ -2221,10 +2217,11 @@ tbody.commit-list {
max-width: min(400px, 90vw);
}
.branch-selector-dropdown .branch-dropdown-button {
.branch-selector-dropdown .ui.button.branch-dropdown-button {
margin: 0;
max-width: 340px;
line-height: var(--line-height-default);
padding: 0 0.5em 0 0.75em;
}
/* FIXME: These media selectors are not ideal (just keep them from old code).

3
web_src/css/repo/clone.css
View File

@ -1,7 +1,7 @@
/* only used by "repo/empty.tmpl" */
.clone-buttons-combo {
display: flex;
align-items: center;
align-items: stretch;
flex: 1;
}
@ -11,7 +11,6 @@
.ui.action.input.clone-buttons-combo input {
border-radius: 0; /* override fomantic border-radius for ".ui.input > input" */
height: 30px;
}
/* used by the clone-panel popup */

44
web_src/css/repo/header.css
View File

@ -27,47 +27,3 @@
.repo-header .flex-item-trailing {
flex-wrap: nowrap;
}
.repo-buttons {
align-items: center;
display: flex;
flex-flow: row wrap;
word-break: keep-all;
gap: 0.25em;
}
.repo-buttons button[disabled] ~ .label {
opacity: var(--opacity-disabled);
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons button[disabled] ~ .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled {
pointer-events: inherit !important;
}
.repo-buttons .ui.labeled.button.disabled > .label {
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons .ui.labeled.button.disabled > .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled > .button {
pointer-events: none !important;
}
@media (max-width: 767.98px) {
.repo-buttons .ui.button,
.repo-buttons .ui.label {
padding-left: 8px;
padding-right: 8px;
margin: 0;
}
}

5
web_src/css/repo/list-header.css
View File

@ -1,6 +1,6 @@
.list-header {
display: flex;
align-items: center;
align-items: stretch;
flex-wrap: wrap;
gap: .5rem;
}
@ -8,9 +8,8 @@
.list-header-search {
display: flex;
flex: 1;
align-items: center;
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
min-width: 200px; /* to enable flexbox wrapping on mobile */
}