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).
go-gitea · Mar 24, 2024 · 8d93cea · 8d93cea
1 parent 68ec9b4
commit 8d93cea
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 720 deletions.
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -360,6 +360,7 @@ ol.ui.list li,
 .ui.vertical.menu {
   background: var(--color-menu);
   border-color: var(--color-secondary);
+  box-shadow: none;
 }
 
 .ui.menu .item {
@@ -576,14 +577,6 @@ ol.ui.list li,
   visibility: visible !important;
 }
 
-.ui.error.segment {
-  border-color: var(--color-error-border) !important;
-}
-
-.ui.warning.segment {
-  border-color: var(--color-warning-border) !important;
-}
-
 .ui.selection.active.dropdown,
 .ui.selection.active.dropdown:hover,
 .ui.selection.active.dropdown .menu,
@@ -930,12 +923,6 @@ input:-webkit-autofill:active,
   background-color: transparent;
 }
 
-.ui.menu,
-.ui.vertical.menu,
-.ui.segment {
-  box-shadow: none;
-}
-
 /* replace fomantic popover box shadows */
 .ui.dropdown .menu,
 .ui.upward.dropdown > .menu,
@@ -1029,19 +1016,6 @@ input:-webkit-autofill:active,
   vertical-align: middle;
 }
 
-.ui .info.segment.top h3,
-.ui .info.segment.top h4 {
-  margin-top: 0;
-}
-
-.ui .info.segment.top h3:last-child {
-  margin-top: 4px;
-}
-
-.ui .info.segment.top > :last-child {
-  margin-bottom: 0;
-}
-
 .ui .form .autofill-dummy {
   position: absolute;
   width: 1px;
@@ -1678,23 +1652,6 @@ a.ui.basic.label:hover {
   margin-left: 0;
 }
 
-.ui.segment,
-.ui.segments,
-.ui.attached.segment {
-  background: var(--color-box-body);
-  color: var(--color-text);
-  border-color: var(--color-secondary);
-}
-
-.ui.segments > .segment {
-  border-color: var(--color-secondary);
-}
-
-.ui.secondary.segment {
-  background: var(--color-secondary-bg);
-  color: var(--color-text-light);
-}
-
 .rss-icon {
   display: inline-flex;
   color: var(--color-text-light-1);

diff --git a/web_src/css/index.css b/web_src/css/index.css
@@ -1,21 +1,25 @@
 @import "./modules/normalize.css";
 @import "./modules/animations.css";
-@import "./modules/grid.css";
+
+/* fomantic replacements */
 @import "./modules/button.css";
+@import "./modules/container.css";
+@import "./modules/divider.css";
+@import "./modules/header.css";
+@import "./modules/segment.css";
+@import "./modules/grid.css";
+@import "./modules/message.css";
+@import "./modules/card.css";
+@import "./modules/modal.css";
+
 @import "./modules/select.css";
 @import "./modules/tippy.css";
-@import "./modules/modal.css";
 @import "./modules/breadcrumb.css";
-@import "./modules/card.css";
 @import "./modules/comment.css";
 @import "./modules/navbar.css";
 @import "./modules/toast.css";
-@import "./modules/divider.css";
 @import "./modules/svg.css";
 @import "./modules/flexcontainer.css";
-@import "./modules/message.css";
-@import "./modules/container.css";
-@import "./modules/header.css";
 
 @import "./shared/flex-list.css";
 @import "./shared/milestone.css";

diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css
@@ -0,0 +1,195 @@
+/* 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 {
+  border-radius: 0.28571429rem;
+}
+
+.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;
+  margin: 0 -1px;
+  width: calc(100% + 2px);
+  max-width: calc(100% + 2px);
+  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;
+}
+
+.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;
+}