mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-02-03 20:51:07 -05:00
36ea60023a
The REAME on a repositories home page is 2px wider than the other elements in the main container. 1px on each side. There appear to be at least 330 files that have one of these styles, I have tried to go through the UI and look for any regressions, but I may have missed some. ```sh rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\bheader\b)' --pcre2|wc 275 rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\bsegment\b)' --pcre2|wc 330 rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\btable\b)' --pcre2|wc 56 ``` I tried to track down the origin. I found the following information. The behavior originates in semantic-ui, and was carried on in the fomantic-ui fork. It looks like the author was trying to achieve a 1px box-shadow look, but decided to implement it using a border after poor results with box-shadow. * attachedHorizontalOffset introduced,a623e4411c* attachedHorizontalOffset used for the margin on `.ui.segment.attached`,5c7d5f13d8 (diff-ce37074faff5ddf9591ee8fd88818b6e99376519ce9e6e451cdb7db20dcbecf6R449)I also found some upstream issues raised about the same bug: * https://github.com/Semantic-Org/Semantic-UI/issues/3592 * https://github.com/Semantic-Org/Semantic-UI/issues/4248 * https://github.com/Semantic-Org/Semantic-UI/issues/6763 * https://github.com/fomantic/Fomantic-UI/issues/1401 Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10240 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Reviewed-by: Gusted <gusted@noreply.codeberg.org> Co-authored-by: Magnus Jason <magnus@magnusjason.com> Co-committed-by: Magnus Jason <magnus@magnusjason.com>
176 lines
3.5 KiB
CSS
176 lines
3.5 KiB
CSS
/* based on Fomantic UI header module, with just the parts extracted that we use. If you find any
|
|
unused rules here after refactoring, please remove them. */
|
|
|
|
.ui.header {
|
|
color: var(--color-text);
|
|
border: none;
|
|
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
|
padding: 0;
|
|
font-family: var(--fonts-regular);
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.28571429;
|
|
}
|
|
|
|
.ui.header:first-child {
|
|
margin-top: -0.14285714em;
|
|
}
|
|
|
|
.ui.header:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ui.header .ui.label {
|
|
margin-left: 0.25rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui.header > .ui.label.compact {
|
|
margin-top: inherit;
|
|
}
|
|
|
|
.ui.header .sub.header {
|
|
display: block;
|
|
font-weight: var(--font-weight-normal);
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
line-height: 1.2;
|
|
color: var(--color-text-light-1);
|
|
}
|
|
|
|
.ui.header > i.icon {
|
|
display: table-cell;
|
|
opacity: 1;
|
|
font-size: 1.5em;
|
|
padding-top: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui.header > i.icon:only-child {
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
.ui.header + p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h2.ui.header {
|
|
font-size: 1.71428571rem;
|
|
}
|
|
h2.ui.header .sub.header {
|
|
font-size: 1.14285714rem;
|
|
}
|
|
|
|
h4.ui.header {
|
|
font-size: 1.07142857rem;
|
|
}
|
|
h4.ui.header .sub.header {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.ui.sub.header {
|
|
padding: 0;
|
|
margin-bottom: 0.14285714rem;
|
|
font-weight: var(--font-weight-normal);
|
|
font-size: 0.85714286em;
|
|
}
|
|
|
|
.ui.icon.header svg {
|
|
width: 3em;
|
|
height: 3em;
|
|
float: none;
|
|
display: block;
|
|
line-height: var(--line-height-default);
|
|
padding: 0;
|
|
margin: 0 auto 0.5rem;
|
|
opacity: 1;
|
|
}
|
|
|
|
.ui.header:not(h1,h2,h3,h4,h5,h6) {
|
|
font-size: 1.28571429em;
|
|
}
|
|
|
|
.ui.attached.header {
|
|
position: relative;
|
|
background: var(--color-box-header);
|
|
padding: 0.78571429rem 1rem;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
border: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.ui.attached:not(.top).header {
|
|
border-top: none;
|
|
}
|
|
|
|
.ui.top.attached.header {
|
|
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
|
}
|
|
|
|
.ui.bottom.attached.header {
|
|
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
|
}
|
|
|
|
.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* fix misaligned right buttons on box headers */
|
|
.ui.attached.header > .ui.right {
|
|
position: absolute;
|
|
right: 0.78571429rem;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
|
|
.ui.attached.header > .ui.right .ui.tiny.button {
|
|
padding: 6px 10px;
|
|
font-weight: var(--font-weight-normal);
|
|
}
|
|
|
|
/* open dropdown menus to the left in right-attached headers */
|
|
.ui.attached.header > .ui.right .ui.dropdown .menu {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
/* if a .top.attached.header is followed by a .segment, add some margin */
|
|
.ui.segments + .ui.top.attached.header,
|
|
.ui.attached.segment + .ui.top.attached.header {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.ui.dividing.header {
|
|
border-bottom-color: var(--color-secondary);
|
|
}
|
|
|
|
.ui.dividing.header .sub.header {
|
|
padding-bottom: 0.21428571rem;
|
|
}
|
|
|
|
.ui.dividing.header i.icon {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ui.error.header {
|
|
background: var(--color-error-bg) !important;
|
|
color: var(--color-error-text) !important;
|
|
border-color: var(--color-error-border) !important;
|
|
}
|
|
|
|
.ui.warning.header {
|
|
background: var(--color-warning-bg) !important;
|
|
color: var(--color-warning-text) !important;
|
|
border-color: var(--color-warning-border) !important;
|
|
}
|
|
|
|
.attention-header {
|
|
padding: 0.5em 0.75em !important;
|
|
color: var(--color-text) !important;
|
|
}
|