Remove dead Fomantic UI CSS and pre-2023 vendor prefixes

Cross-checked each selector against templates, Go source, JS/TS/Vue and options/ to confirm zero usages before removal. Also drops `-webkit-mask-*` prefixes where unprefixed equivalents are present (Safari 15.4+, March 2022). Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
go-gitea · denyskon · Apr 24, 2026 · Apr 22, 2026 · Apr 23, 2026 · Apr 23, 2026
commit ddad67e4df6018b58a6fc123a5faaf559df0703f
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -341,9 +341,7 @@ a.label,
   width: 16px;
   height: 16px;
   mask-size: cover;
-  -webkit-mask-size: cover;
   mask-image: var(--select-arrows);
-  -webkit-mask-image: var(--select-arrows);
   background: currentcolor;
 }
 

diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
@@ -361,10 +361,6 @@ a.btn:hover {
   font-size: 12px;
 }
 
-.btn.small {
-  font-size: 13px;
-}
-
 /* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
 And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
 It needs some tricks to tweak the left/right borders with active state */

diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css
@@ -122,14 +122,3 @@ a.ui.card:hover {
   color: var(--color-text);
   border-top-color: var(--color-secondary-light-1) !important;
 }
-
-.ui.three.cards {
-  margin-left: -1em;
-  margin-right: -1em;
-}
-
-.ui.three.cards > .card {
-  width: calc(33.33333333333333% - 2em);
-  margin-left: 1em;
-  margin-right: 1em;
-}
diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css
@@ -35,13 +35,9 @@ input[type="checkbox"]::before {
   height: var(--checkbox-size);
   clip-path: inset(var(--checkbox-size) 0 0 0);
   mask-image: var(--checkbox-mask-checked);
-  -webkit-mask-image: var(--checkbox-mask-checked);
   mask-size: 75%;
-  -webkit-mask-size: 75%;
   mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
   mask-position: center;
-  -webkit-mask-position: center;
 }
 
 input[type="checkbox"]:checked,
@@ -67,9 +63,7 @@ input[type="radio"]:disabled:checked {
 input[type="checkbox"]:indeterminate::before {
   clip-path: inset(0);
   mask-image: var(--checkbox-mask-indeterminate);
-  -webkit-mask-image: var(--checkbox-mask-indeterminate);
   mask-size: 75%;
-  -webkit-mask-size: 75%;
 }
 
 .ui.checkbox {

diff --git a/web_src/css/modules/codeeditor.css b/web_src/css/modules/codeeditor.css
@@ -127,8 +127,6 @@
   background-color: currentcolor;
   mask-image: var(--octicon-x);
   mask-size: cover;
-  -webkit-mask-image: var(--octicon-x);
-  -webkit-mask-size: cover;
   border-radius: var(--border-radius);
 }
 

diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
@@ -32,45 +32,13 @@
   padding-top: 0;
 }
 
-.ui.comments .comment > .comments {
-  margin: 0 0 0.5em 0.5em;
-  padding: 1em 0 1em 1em;
-}
-
-.ui.comments .comment > .comments::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.ui.comments .comment > .comments .comment {
-  border: none;
-  border-top: none;
-  background: none;
-}
-
 .ui.comments .comment > .content {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
 }
 
-.ui.comments .comment .metadata {
-  display: inline-block;
-  margin-left: 0.5em;
-  font-size: 0.875em;
-}
-
-.ui.comments .comment .metadata > * {
-  display: inline-block;
-  margin: 0 0.5em 0 0;
-}
-
-.ui.comments .comment .metadata > :last-child {
-  margin-right: 0;
-}
-
 .ui.comments .comment .text {
   margin: 0.25em 0 0.5em;
   font-size: 1em;

diff --git a/web_src/css/modules/form.css b/web_src/css/modules/form.css
@@ -124,18 +124,12 @@ textarea:focus,
 .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
   margin-top: 2.21428571em;
 }
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
-  margin-top: 2.61428571em;
-}
 .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
   margin-top: 0.6em;
 }
 .ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox {
   margin-top: 0.5em;
 }
-.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox {
-  margin-top: 0.7em;
-}
 
 .ui.form .field > .selection.dropdown {
   min-width: 14em; /* matches the default min width */
@@ -289,15 +283,11 @@ textarea:focus,
   font-weight: var(--font-weight-medium);
   text-transform: none;
 }
-.ui.form .grouped.fields .field,
-.ui.form .grouped.inline.fields .field {
+.ui.form .grouped.fields .field {
   display: block;
   margin: 0.5em 0;
   padding: 0;
 }
-.ui.form .grouped.inline.fields .ui.checkbox {
-  margin-bottom: 0.4em;
-}
 
 .ui.form .fields {
   display: flex;

diff --git a/web_src/css/modules/grid.css b/web_src/css/modules/grid.css
@@ -10,10 +10,6 @@
   margin: -1rem;
 }
 
-.ui.relaxed.grid {
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
-}
 .ui[class*="very relaxed"].grid {
   margin-left: -2.5rem;
   margin-right: -2.5rem;
@@ -71,18 +67,10 @@
   margin-bottom: 0;
 }
 
-.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
-.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
-  width: 100%;
-}
-
 .ui.grid .row + .ui.divider {
   flex-grow: 1;
   margin: 1rem;
 }
-.ui.grid .column + .ui.vertical.divider {
-  height: calc(50% - 1rem);
-}
 
 .ui.grid > .row > .column:last-child > .horizontal.segment,
 .ui.grid > .column:last-child > .horizontal.segment {
@@ -140,119 +128,14 @@
   width: 100%;
 }
 
-.ui[class*="one column"].grid > .row > .column,
-.ui[class*="one column"].grid > .column:not(.row) {
-  width: 100%;
-}
 .ui[class*="two column"].grid > .row > .column,
 .ui[class*="two column"].grid > .column:not(.row) {
   width: 50%;
 }
-.ui[class*="three column"].grid > .row > .column,
-.ui[class*="three column"].grid > .column:not(.row) {
-  width: 33.33333333%;
-}
-.ui[class*="four column"].grid > .row > .column,
-.ui[class*="four column"].grid > .column:not(.row) {
-  width: 25%;
-}
-.ui[class*="five column"].grid > .row > .column,
-.ui[class*="five column"].grid > .column:not(.row) {
-  width: 20%;
-}
-.ui[class*="six column"].grid > .row > .column,
-.ui[class*="six column"].grid > .column:not(.row) {
-  width: 16.66666667%;
-}
-.ui[class*="seven column"].grid > .row > .column,
-.ui[class*="seven column"].grid > .column:not(.row) {
-  width: 14.28571429%;
-}
-.ui[class*="eight column"].grid > .row > .column,
-.ui[class*="eight column"].grid > .column:not(.row) {
-  width: 12.5%;
-}
-.ui[class*="nine column"].grid > .row > .column,
-.ui[class*="nine column"].grid > .column:not(.row) {
-  width: 11.11111111%;
-}
-.ui[class*="ten column"].grid > .row > .column,
-.ui[class*="ten column"].grid > .column:not(.row) {
-  width: 10%;
-}
-.ui[class*="eleven column"].grid > .row > .column,
-.ui[class*="eleven column"].grid > .column:not(.row) {
-  width: 9.09090909%;
-}
-.ui[class*="twelve column"].grid > .row > .column,
-.ui[class*="twelve column"].grid > .column:not(.row) {
-  width: 8.33333333%;
-}
-.ui[class*="thirteen column"].grid > .row > .column,
-.ui[class*="thirteen column"].grid > .column:not(.row) {
-  width: 7.69230769%;
-}
-.ui[class*="fourteen column"].grid > .row > .column,
-.ui[class*="fourteen column"].grid > .column:not(.row) {
-  width: 7.14285714%;
-}
-.ui[class*="fifteen column"].grid > .row > .column,
-.ui[class*="fifteen column"].grid > .column:not(.row) {
-  width: 6.66666667%;
-}
-.ui[class*="sixteen column"].grid > .row > .column,
-.ui[class*="sixteen column"].grid > .column:not(.row) {
-  width: 6.25%;
-}
 
-.ui.grid > [class*="one column"].row > .column {
-  width: 100% !important;
-}
 .ui.grid > [class*="two column"].row > .column {
   width: 50% !important;
 }
-.ui.grid > [class*="three column"].row > .column {
-  width: 33.33333333% !important;
-}
-.ui.grid > [class*="four column"].row > .column {
-  width: 25% !important;
-}
-.ui.grid > [class*="five column"].row > .column {
-  width: 20% !important;
-}
-.ui.grid > [class*="six column"].row > .column {
-  width: 16.66666667% !important;
-}
-.ui.grid > [class*="seven column"].row > .column {
-  width: 14.28571429% !important;
-}
-.ui.grid > [class*="eight column"].row > .column {
-  width: 12.5% !important;
-}
-.ui.grid > [class*="nine column"].row > .column {
-  width: 11.11111111% !important;
-}
-.ui.grid > [class*="ten column"].row > .column {
-  width: 10% !important;
-}
-.ui.grid > [class*="eleven column"].row > .column {
-  width: 9.09090909% !important;
-}
-.ui.grid > [class*="twelve column"].row > .column {
-  width: 8.33333333% !important;
-}
-.ui.grid > [class*="thirteen column"].row > .column {
-  width: 7.69230769% !important;
-}
-.ui.grid > [class*="fourteen column"].row > .column {
-  width: 7.14285714% !important;
-}
-.ui.grid > [class*="fifteen column"].row > .column {
-  width: 6.66666667% !important;
-}
-.ui.grid > [class*="sixteen column"].row > .column {
-  width: 6.25% !important;
-}
 
 .ui.grid > .row > [class*="one wide"].column,
 .ui.grid > .column.row > [class*="one wide"].column,
@@ -302,12 +185,6 @@
 .ui.column.grid > [class*="eight wide"].column {
   width: 50% !important;
 }
-.ui.grid > .row > [class*="nine wide"].column,
-.ui.grid > .column.row > [class*="nine wide"].column,
-.ui.grid > [class*="nine wide"].column,
-.ui.column.grid > [class*="nine wide"].column {
-  width: 56.25% !important;
-}
 .ui.grid > .row > [class*="ten wide"].column,
 .ui.grid > .column.row > [class*="ten wide"].column,
 .ui.grid > [class*="ten wide"].column,
@@ -338,12 +215,6 @@
 .ui.column.grid > [class*="fourteen wide"].column {
   width: 87.5% !important;
 }
-.ui.grid > .row > [class*="fifteen wide"].column,
-.ui.grid > .column.row > [class*="fifteen wide"].column,
-.ui.grid > [class*="fifteen wide"].column,
-.ui.column.grid > [class*="fifteen wide"].column {
-  width: 93.75% !important;
-}
 .ui.grid > .row > [class*="sixteen wide"].column,
 .ui.grid > .column.row > [class*="sixteen wide"].column,
 .ui.grid > [class*="sixteen wide"].column,
@@ -352,14 +223,12 @@
 }
 
 .ui.centered.grid,
-.ui.centered.grid > .row,
-.ui.grid > .centered.row {
+.ui.centered.grid > .row {
   text-align: center;
   justify-content: center;
 }
 .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
-.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
-.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
+.ui.centered.grid > .row > .column:not(.aligned):not(.justified) {
   text-align: left;
 }
 .ui.grid > .centered.column,
@@ -369,24 +238,13 @@
   margin-right: auto;
 }
 
-.ui.relaxed.grid > .column:not(.row),
-.ui.relaxed.grid > .row > .column,
-.ui.grid > .relaxed.row > .column {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
 .ui[class*="very relaxed"].grid > .column:not(.row),
 .ui[class*="very relaxed"].grid > .row > .column,
 .ui.grid > [class*="very relaxed"].row > .column {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
 
-.ui.relaxed.grid .row + .ui.divider,
-.ui.grid .relaxed.row + .ui.divider {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
 .ui[class*="very relaxed"].grid .row + .ui.divider,
 .ui.grid [class*="very relaxed"].row + .ui.divider {
   margin-left: 2.5rem;
@@ -439,23 +297,3 @@
     margin-right: -1rem !important;
   }
 }
-
-.ui.ui.ui.compact.grid > .column:not(.row),
-.ui.ui.ui.compact.grid > .row > .column {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.ui.ui.ui.compact.grid > * {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.ui.ui.ui.compact.grid > .row {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.ui.ui.ui.compact.grid > .column:not(.row) {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}