upstream/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-02-03 20:51:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
forgejo/web_src/css/modules/segment.css

204 lines
4.2 KiB
CSS
Raw Normal View History

Remove fomantic segment module (#30042) Another CSS-only module. Also, I re-ordered the imports based on [original fomantic order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less). (cherry picked from commit 8d93cea2969730fc8f3bdeb3704a3b89db0bbcc0)
2024-03-24 12:48:06 -04:00
/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
unused rules here after refactoring, please remove them. */
.ui.segment {
position: relative;
margin: 1rem 0;
padding: 1em;
border-radius: 0.28571429rem;
border: 1px solid var(--color-secondary);
background: var(--color-box-body);
color: var(--color-text);
}
.ui.segment:first-child {
margin-top: 0;
}
.ui.segment:last-child {
margin-bottom: 0;
}
.ui.grid.segment {
margin: 1rem 0;
border-radius: 0.28571429rem;
}
.ui.segment.tab:last-child {
margin-bottom: 1rem;
}
.ui.segments {
flex-direction: column;
position: relative;
margin: 1rem 0;
border: 1px solid var(--color-secondary);
border-radius: 0.28571429rem;
background: var(--color-box-body);
color: var(--color-text);
}
.ui.segments:first-child {
margin-top: 0;
}
.ui.segments:last-child {
margin-bottom: 0;
}
.ui.segments > .segment {
top: 0;
bottom: 0;
border-radius: 0;
margin: 0;
width: auto;
box-shadow: none;
border: none;
border-top: 1px solid var(--color-secondary);
}
.ui.segments:not(.horizontal) > .segment:first-child {
top: 0;
bottom: 0;
border-top: none;
margin-top: 0;
margin-bottom: 0;
border-radius: 0.28571429rem 0.28571429rem 0 0;
}
.ui.segments:not(.horizontal) > .segment:last-child {
top: 0;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
border-radius: 0 0 0.28571429rem 0.28571429rem;
}
.ui.segments:not(.horizontal) > .segment:only-child {
Fix selector inner radius - Fixes https://codeberg.org/forgejo/forgejo/issues/2835
2024-03-30 12:04:48 -04:00
border-radius: 0.214285717rem;
Remove fomantic segment module (#30042) Another CSS-only module. Also, I re-ordered the imports based on [original fomantic order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less). (cherry picked from commit 8d93cea2969730fc8f3bdeb3704a3b89db0bbcc0)
2024-03-24 12:48:06 -04:00
}
Fix:the rounded corners of the folded file are not displayed correctly (#29953) Fix: [#29933](https://github.com/go-gitea/gitea/issues/29933) **Before** ![image](https://github.com/go-gitea/gitea/assets/37935145/71ec80f6-5896-4e4a-b686-4d792c11ebe2) **After** ![image](https://github.com/go-gitea/gitea/assets/37935145/81348a61-946a-4562-881d-8d873e50228f) --------- Co-authored-by: silverwind <me@silverwind.io> Conflicts: - web_src/css/modules/segment.css Ported by adding the new selector with a larger radius, keeping the existing one with ours.
2024-03-29 11:39:46 -04:00
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */
border-radius: 0.28571429rem;
}
Remove fomantic segment module (#30042) Another CSS-only module. Also, I re-ordered the imports based on [original fomantic order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less). (cherry picked from commit 8d93cea2969730fc8f3bdeb3704a3b89db0bbcc0)
2024-03-24 12:48:06 -04:00
.ui.segments > .ui.segments {
border-top: 1px solid var(--color-secondary);
margin: 1rem;
}
.ui.segments > .segments:first-child {
border-top: none;
}
.ui.segments > .segment + .segments:not(.horizontal) {
margin-top: 0;
}
.ui.horizontal.segments {
display: flex;
flex-direction: row;
background-color: transparent;
padding: 0;
margin: 1rem 0;
border-radius: 0.28571429rem;
border: 1px solid var(--color-secondary);
}
.ui.horizontal.segments > .segment {
margin: 0;
min-width: 0;
border-radius: 0;
border: none;
box-shadow: none;
border-left: 1px solid var(--color-secondary);
}
.ui.segments > .horizontal.segments:first-child {
border-top: none;
}
.ui.horizontal.segments:not(.stackable) > .segment:first-child {
border-left: none;
}
.ui.horizontal.segments > .segment:first-child {
border-radius: 0.28571429rem 0 0 0.28571429rem;
}
.ui.horizontal.segments > .segment:last-child {
border-radius: 0 0.28571429rem 0.28571429rem 0;
}
.ui.clearing.segment::after {
content: "";
display: block;
clear: both;
}
.ui[class*="left aligned"].segment {
text-align: left;
}
.ui[class*="center aligned"].segment {
text-align: center;
}
.ui.secondary.segment {
background: var(--color-secondary-bg);
color: var(--color-text-light);
}
.ui.attached.segment {
top: 0;
bottom: 0;
border-radius: 0;
fix(ui): fix width of attached fomantic segments (#10240) 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, https://github.com/fomantic/Fomantic-UI/commit/a623e4411c1ff958610e7b9da2d84ef55ecd4ec9 * attachedHorizontalOffset used for the margin on `.ui.segment.attached`, https://github.com/fomantic/Fomantic-UI/commit/5c7d5f13d83b25ec93b538f46e75835e1d7c2d98#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>
2025-11-30 11:13:23 -05:00
margin: 0;
width: 100%;
max-width: 100%;
Remove fomantic segment module (#30042) Another CSS-only module. Also, I re-ordered the imports based on [original fomantic order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less). (cherry picked from commit 8d93cea2969730fc8f3bdeb3704a3b89db0bbcc0)
2024-03-24 12:48:06 -04:00
box-shadow: none;
border: 1px solid var(--color-secondary);
background: var(--color-box-body);
color: var(--color-text);
}
.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
border-top: none;
}
Fix border-radius of header+segment boxes (#30667) This is a very old bug with the bottom border-radiuses not being there and the `:has` selector now makes it possible to cleanly solve it. It affects all header+segment boxes, which there are many throughout the UI: <img width="1017" alt="Screenshot 2024-04-23 at 20 47 21" src="https://github.com/go-gitea/gitea/assets/115237/870fe352-cc38-4bd6-bfe6-9fe8c3066f92"> (cherry picked from commit 3f19a6334575e1d2849999e8339f1b515cefaf1a)
2024-04-24 09:11:52 -04:00
.ui.attached.segment:has(+ .ui[class*="top attached"].header),
.ui.attached.segment:last-child {
border-radius: 0 0 0.28571429rem 0.28571429rem;
}
Remove fomantic segment module (#30042) Another CSS-only module. Also, I re-ordered the imports based on [original fomantic order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less). (cherry picked from commit 8d93cea2969730fc8f3bdeb3704a3b89db0bbcc0)
2024-03-24 12:48:06 -04:00
.ui[class*="top attached"].segment {
bottom: 0;
margin-bottom: 0;
top: 0;
margin-top: 1rem;
border-radius: 0.28571429rem 0.28571429rem 0 0;
}
.ui.segment[class*="top attached"]:first-child {
margin-top: 0;
}
.ui.segment[class*="bottom attached"] {
bottom: 0;
margin-top: 0;
top: 0;
margin-bottom: 1rem;
border-radius: 0 0 0.28571429rem 0.28571429rem;
}
.ui.segment[class*="bottom attached"]:last-child {
margin-bottom: 1rem;
}
.ui.fitted.segment:not(.horizontally) {
padding-top: 0;
padding-bottom: 0;
}
.ui.fitted.segment:not(.vertically) {
padding-left: 0;
padding-right: 0;
}
.ui.segments .segment,
.ui.segment {
font-size: 1rem;
}
.ui.error.segment {
border-color: var(--color-error-border) !important;
}
.ui.warning.segment {
border-color: var(--color-warning-border) !important;
}
Reference in a new issue Copy permalink