Remove more unused Fomantic variants (#25292)

Save another 50KB of CSS by removing unused and useless Fomantic
variants.

Removed the last instance if a `tertiary` button and fixed a TODO:

<img width="509" alt="Screenshot 2023-06-15 at 22 34 36"
src="https://github.com/go-gitea/gitea/assets/115237/8a16ae7b-2b17-439b-a096-60a52724e3d6">

diff --git a/.gitattributes b/.gitattributes
index 6d4698d6a8c08f5ccca8a4d81a42402c84d10684..7e7a139c9a49cd90530c14f70938e8164f5b9009 100644 (file)
--- a/.gitattributes
+++ b/.gitattributes
@@ -5,5 +5,6 @@
 /templates/swagger/v1_json.tmpl linguist-generated
 /vendor/** -text -eol linguist-vendored
 /web_src/fomantic/build/** linguist-generated
+/web_src/fomantic/_site/globals/site.variables linguist-language=Less
 /web_src/js/vendor/** -text -eol linguist-vendored
 Dockerfile.* linguist-language=Dockerfile

diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index c3728e2e264c7f3004c439420d95e7a3687c687f..a798291a0dc4b962b43acb82122a386c967c49f2 100644 (file)
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -197,22 +197,6 @@ a.btn:hover {
   border-color: var(--color-secondary-active);
 }
 
-/* tertiary */
-
-.ui.tertiary.button,
-.ui.tertiary.button:focus {
-  color: var(--color-text-light);
-  border: none;
-}
-
-.ui.tertiary.button:hover {
-  color: var(--color-text);
-}
-
-.ui.tertiary.button:active {
-  color: var(--color-text-dark);
-}
-
 /* red */
 
 .ui.red.labels .label,

diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables
index bb432f918d9fd685c9a2daf293591a58c80ad6e5..fbed597788ff7268816417866ef20f3a1fe6e47b 100644 (file)
--- a/web_src/fomantic/_site/globals/site.variables
+++ b/web_src/fomantic/_site/globals/site.variables
@@ -5,16 +5,17 @@
 @bold: 500;
 @useCustomScrollbars: false;
 @disabledOpacity: var(--opacity-disabled);
-@variationPopupTooltip: false;
 @linkHoverUnderline: underline;
-@variationButtonSocial: false;
 @pageOverflowX: visible;
 
-/* disable all inverted variations */
 @variationAccordionInverted: false;
 @variationBreadcrumbInverted: false;
+@variationButtonAnimated: false;
+@variationButtonAnimatedFade: false;
 @variationButtonAttached: false;
 @variationButtonInverted: false;
+@variationButtonSocial: false;
+@variationButtonTertiary: false;
 @variationCalendarInverted: false;
 @variationCardInverted: false;
 @variationCheckboxInverted: false;
@@ -25,12 +26,18 @@
 @variationFeedInverted: false;
 @variationFlyoutInverted: false;
 @variationFormInverted: false;
+@variationFormTransparent: false;
+@variationGridDoubling: false;
 @variationGridInverted: false;
 @variationHeaderInverted: false;
 @variationIconInverted: false;
 @variationInputInverted: false;
 @variationItemInverted: false;
+@variationLabelCorner: false;
+@variationLabelImage: false;
 @variationLabelInverted: false;
+@variationLabelRibbon: false;
+@variationLabelTag: false;
 @variationListInverted: false;
 @variationMenuInverted: false;
 @variationMessageInverted: false;
@@ -38,12 +45,17 @@
 @variationNagInverted: false;
 @variationPlaceholderInverted: false;
 @variationPopupInverted: false;
+@variationPopupTooltip: false;
 @variationProgressInverted: false;
 @variationSegmentInverted: false;
+@variationSegmentPiled: false;
+@variationSegmentStacked: false;
 @variationSliderInverted: false;
 @variationStatisticInverted: false;
 @variationStepInverted: false;
 @variationTableInverted: false;
+@variationTableMarked: false;
+@variationTableStackable: false;
 @variationTextInverted: false;
 @variationToastInverted: false;
 @variationTransitionInverted: false;

diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 77b1483c98bc881533d113341742b45a2a63d731..c9a5fd4d92a315711b4bbdc97b13d4c791eac3c9 100644 (file)
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -202,130 +202,6 @@
              Types
 *******************************/
 
-/*-------------------
-         Animated
-  --------------------*/
-
-.ui.animated.button {
-  position: relative;
-  overflow: hidden;
-  padding-right: 0 !important;
-  vertical-align: middle;
-  z-index: 1;
-}
-
-.ui.animated.button .content {
-  will-change: transform, opacity;
-}
-
-.ui.animated.button .visible.content {
-  position: relative;
-  margin-right: 1.5em;
-}
-
-.ui.animated.button .hidden.content {
-  position: absolute;
-  width: 100%;
-}
-
-/* Horizontal */
-
-.ui.animated.button .visible.content,
-.ui.animated.button .hidden.content {
-  transition: right 0.3s ease 0s;
-}
-
-.ui.animated.button .visible.content {
-  left: auto;
-  right: 0;
-}
-
-.ui.animated.button .hidden.content {
-  top: 50%;
-  left: auto;
-  right: -100%;
-  margin-top: -0.5em;
-}
-
-.ui.animated.button:focus .visible.content,
-.ui.animated.button:hover .visible.content {
-  left: auto;
-  right: 200%;
-}
-
-.ui.animated.button:focus .hidden.content,
-.ui.animated.button:hover .hidden.content {
-  left: auto;
-  right: 0;
-}
-
-/* Vertical */
-
-.ui.vertical.animated.button .visible.content,
-.ui.vertical.animated.button .hidden.content {
-  transition: top 0.3s ease, transform 0.3s ease;
-}
-
-.ui.vertical.animated.button .visible.content {
-  transform: translateY(0%);
-  right: auto;
-}
-
-.ui.vertical.animated.button .hidden.content {
-  top: -50%;
-  left: 0;
-  right: auto;
-}
-
-.ui.vertical.animated.button:focus .visible.content,
-.ui.vertical.animated.button:hover .visible.content {
-  transform: translateY(200%);
-  right: auto;
-}
-
-.ui.vertical.animated.button:focus .hidden.content,
-.ui.vertical.animated.button:hover .hidden.content {
-  top: 50%;
-  right: auto;
-}
-
-/* Fade */
-
-.ui.fade.animated.button .visible.content,
-.ui.fade.animated.button .hidden.content {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.ui.fade.animated.button .visible.content {
-  left: auto;
-  right: auto;
-  opacity: 1;
-  transform: scale(1);
-}
-
-.ui.fade.animated.button .hidden.content {
-  opacity: 0;
-  left: 0;
-  right: auto;
-  transform: scale(1.5);
-}
-
-.ui.fade.animated.button:focus .visible.content,
-.ui.fade.animated.button:hover .visible.content {
-  left: auto;
-  right: auto;
-  opacity: 0;
-  transform: scale(0.75);
-}
-
-.ui.fade.animated.button:focus .hidden.content,
-.ui.fade.animated.button:hover .hidden.content {
-  left: 0;
-  right: auto;
-  opacity: 1;
-  transform: scale(1);
-}
-
 /*-------------------
       Labeled Button
   --------------------*/
@@ -630,41 +506,6 @@
   border-top-width: 0;
 }
 
-/*-------------------
-         Tertiary
-  --------------------*/
-
-/* Overline Mixin */
-
-.ui.tertiary.button {
-  transition: color 0.1s ease !important;
-  border-radius: 0;
-  margin: 0.28571429em 0.25em 0.28571429em 0 !important;
-  padding: 0.5em !important;
-  box-shadow: none;
-  color: rgba(0, 0, 0, 0.6);
-  background: none;
-}
-
-.ui.tertiary.button:hover {
-  box-shadow: inset 0 -0.2em 0 #666666;
-  color: #333333;
-  background: none;
-}
-
-.ui.tertiary.button:focus {
-  box-shadow: inset 0 -0.2em 0 #666666;
-  color: #333333;
-  background: none;
-}
-
-.ui.tertiary.button:active {
-  box-shadow: inset 0 -0.2em 0 #999999;
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
-  color: #666666;
-  background: none;
-}
-
 /*--------------
     Labeled Icon
   ---------------*/
@@ -1076,40 +917,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.primary.buttons .button,
-.ui.tertiary.primary.buttons .tertiary.button,
-.ui.tertiary.primary.button {
-  background: transparent;
-  box-shadow: none;
-  color: #2185D0;
-}
-
-.ui.tertiary.primary.buttons .button:hover,
-.ui.tertiary.primary.buttons button:hover,
-.ui.tertiary.primary.button:hover {
-  box-shadow: inset 0 -0.2em 0 #2b75ac;
-  color: #2b75ac;
-}
-
-.ui.tertiary.primary.buttons .button:focus,
-.ui.tertiary.primary.buttons .tertiary.button:focus,
-.ui.tertiary.primary.button:focus {
-  box-shadow: inset 0 -0.2em 0 #216ea7;
-  color: #216ea7;
-}
-
-.ui.tertiary.primary.buttons .active.button,
-.ui.tertiary.primary.buttons .tertiary.active.button,
-.ui.tertiary.primary.active.button,
-.ui.tertiary.primary.buttons .button:active,
-.ui.tertiary.primary.buttons .tertiary.button:active,
-.ui.tertiary.primary.button:active {
-  box-shadow: inset 0 -0.2em 0 #007bd8;
-  color: #1279c6;
-}
-
 .ui.secondary.buttons .button,
 .ui.secondary.button {
   background-color: #1B1C1D;
@@ -1192,40 +999,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.secondary.buttons .button,
-.ui.tertiary.secondary.buttons .tertiary.button,
-.ui.tertiary.secondary.button {
-  background: transparent;
-  box-shadow: none;
-  color: #1B1C1D;
-}
-
-.ui.tertiary.secondary.buttons .button:hover,
-.ui.tertiary.secondary.buttons button:hover,
-.ui.tertiary.secondary.button:hover {
-  box-shadow: inset 0 -0.2em 0 #292929;
-  color: #292929;
-}
-
-.ui.tertiary.secondary.buttons .button:focus,
-.ui.tertiary.secondary.buttons .tertiary.button:focus,
-.ui.tertiary.secondary.button:focus {
-  box-shadow: inset 0 -0.2em 0 #303030;
-  color: #303030;
-}
-
-.ui.tertiary.secondary.buttons .active.button,
-.ui.tertiary.secondary.buttons .tertiary.active.button,
-.ui.tertiary.secondary.active.button,
-.ui.tertiary.secondary.buttons .button:active,
-.ui.tertiary.secondary.buttons .tertiary.button:active,
-.ui.tertiary.secondary.button:active {
-  box-shadow: inset 0 -0.2em 0 #1f2933;
-  color: #27292a;
-}
-
 .ui.red.buttons .button,
 .ui.red.button {
   background-color: #DB2828;
@@ -1308,40 +1081,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.red.buttons .button,
-.ui.tertiary.red.buttons .tertiary.button,
-.ui.tertiary.red.button {
-  background: transparent;
-  box-shadow: none;
-  color: #DB2828;
-}
-
-.ui.tertiary.red.buttons .button:hover,
-.ui.tertiary.red.buttons button:hover,
-.ui.tertiary.red.button:hover {
-  box-shadow: inset 0 -0.2em 0 #b93131;
-  color: #b93131;
-}
-
-.ui.tertiary.red.buttons .button:focus,
-.ui.tertiary.red.buttons .tertiary.button:focus,
-.ui.tertiary.red.button:focus {
-  box-shadow: inset 0 -0.2em 0 #b52626;
-  color: #b52626;
-}
-
-.ui.tertiary.red.buttons .active.button,
-.ui.tertiary.red.buttons .tertiary.active.button,
-.ui.tertiary.red.active.button,
-.ui.tertiary.red.buttons .button:active,
-.ui.tertiary.red.buttons .tertiary.button:active,
-.ui.tertiary.red.button:active {
-  box-shadow: inset 0 -0.2em 0 #ea0000;
-  color: #d41515;
-}
-
 .ui.orange.buttons .button,
 .ui.orange.button {
   background-color: #F2711C;
@@ -1424,40 +1163,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.orange.buttons .button,
-.ui.tertiary.orange.buttons .tertiary.button,
-.ui.tertiary.orange.button {
-  background: transparent;
-  box-shadow: none;
-  color: #F2711C;
-}
-
-.ui.tertiary.orange.buttons .button:hover,
-.ui.tertiary.orange.buttons button:hover,
-.ui.tertiary.orange.button:hover {
-  box-shadow: inset 0 -0.2em 0 #da671b;
-  color: #da671b;
-}
-
-.ui.tertiary.orange.buttons .button:focus,
-.ui.tertiary.orange.buttons .tertiary.button:focus,
-.ui.tertiary.orange.button:focus {
-  box-shadow: inset 0 -0.2em 0 #ce6017;
-  color: #ce6017;
-}
-
-.ui.tertiary.orange.buttons .active.button,
-.ui.tertiary.orange.buttons .tertiary.active.button,
-.ui.tertiary.orange.active.button,
-.ui.tertiary.orange.buttons .button:active,
-.ui.tertiary.orange.buttons .tertiary.button:active,
-.ui.tertiary.orange.button:active {
-  box-shadow: inset 0 -0.2em 0 #f56100;
-  color: #f56100;
-}
-
 .ui.yellow.buttons .button,
 .ui.yellow.button {
   background-color: #FBBD08;
@@ -1540,40 +1245,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.yellow.buttons .button,
-.ui.tertiary.yellow.buttons .tertiary.button,
-.ui.tertiary.yellow.button {
-  background: transparent;
-  box-shadow: none;
-  color: #FBBD08;
-}
-
-.ui.tertiary.yellow.buttons .button:hover,
-.ui.tertiary.yellow.buttons button:hover,
-.ui.tertiary.yellow.button:hover {
-  box-shadow: inset 0 -0.2em 0 #d2a217;
-  color: #d2a217;
-}
-
-.ui.tertiary.yellow.buttons .button:focus,
-.ui.tertiary.yellow.buttons .tertiary.button:focus,
-.ui.tertiary.yellow.button:focus {
-  box-shadow: inset 0 -0.2em 0 #c49816;
-  color: #c49816;
-}
-
-.ui.tertiary.yellow.buttons .active.button,
-.ui.tertiary.yellow.buttons .tertiary.active.button,
-.ui.tertiary.yellow.active.button,
-.ui.tertiary.yellow.buttons .button:active,
-.ui.tertiary.yellow.buttons .tertiary.button:active,
-.ui.tertiary.yellow.button:active {
-  box-shadow: inset 0 -0.2em 0 #eaae00;
-  color: #eaae00;
-}
-
 .ui.olive.buttons .button,
 .ui.olive.button {
   background-color: #B5CC18;
@@ -1656,40 +1327,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.olive.buttons .button,
-.ui.tertiary.olive.buttons .tertiary.button,
-.ui.tertiary.olive.button {
-  background: transparent;
-  box-shadow: none;
-  color: #B5CC18;
-}
-
-.ui.tertiary.olive.buttons .button:hover,
-.ui.tertiary.olive.buttons button:hover,
-.ui.tertiary.olive.button:hover {
-  box-shadow: inset 0 -0.2em 0 #98a922;
-  color: #98a922;
-}
-
-.ui.tertiary.olive.buttons .button:focus,
-.ui.tertiary.olive.buttons .tertiary.button:focus,
-.ui.tertiary.olive.button:focus {
-  box-shadow: inset 0 -0.2em 0 #92a418;
-  color: #92a418;
-}
-
-.ui.tertiary.olive.buttons .active.button,
-.ui.tertiary.olive.buttons .tertiary.active.button,
-.ui.tertiary.olive.active.button,
-.ui.tertiary.olive.buttons .button:active,
-.ui.tertiary.olive.buttons .tertiary.button:active,
-.ui.tertiary.olive.button:active {
-  box-shadow: inset 0 -0.2em 0 #b1cb00;
-  color: #aac109;
-}
-
 .ui.green.buttons .button,
 .ui.green.button {
   background-color: #21BA45;
@@ -1772,40 +1409,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.green.buttons .button,
-.ui.tertiary.green.buttons .tertiary.button,
-.ui.tertiary.green.button {
-  background: transparent;
-  box-shadow: none;
-  color: #21BA45;
-}
-
-.ui.tertiary.green.buttons .button:hover,
-.ui.tertiary.green.buttons button:hover,
-.ui.tertiary.green.button:hover {
-  box-shadow: inset 0 -0.2em 0 #2a9844;
-  color: #2a9844;
-}
-
-.ui.tertiary.green.buttons .button:focus,
-.ui.tertiary.green.buttons .tertiary.button:focus,
-.ui.tertiary.green.button:focus {
-  box-shadow: inset 0 -0.2em 0 #20923b;
-  color: #20923b;
-}
-
-.ui.tertiary.green.buttons .active.button,
-.ui.tertiary.green.buttons .tertiary.active.button,
-.ui.tertiary.green.active.button,
-.ui.tertiary.green.buttons .button:active,
-.ui.tertiary.green.buttons .tertiary.button:active,
-.ui.tertiary.green.button:active {
-  box-shadow: inset 0 -0.2em 0 #00c22e;
-  color: #13ae38;
-}
-
 .ui.teal.buttons .button,
 .ui.teal.button {
   background-color: #00B5AD;
@@ -1888,40 +1491,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.teal.buttons .button,
-.ui.tertiary.teal.buttons .tertiary.button,
-.ui.tertiary.teal.button {
-  background: transparent;
-  box-shadow: none;
-  color: #00B5AD;
-}
-
-.ui.tertiary.teal.buttons .button:hover,
-.ui.tertiary.teal.buttons button:hover,
-.ui.tertiary.teal.button:hover {
-  box-shadow: inset 0 -0.2em 0 #108c86;
-  color: #108c86;
-}
-
-.ui.tertiary.teal.buttons .button:focus,
-.ui.tertiary.teal.buttons .tertiary.button:focus,
-.ui.tertiary.teal.button:focus {
-  box-shadow: inset 0 -0.2em 0 #0e7e79;
-  color: #0e7e79;
-}
-
-.ui.tertiary.teal.buttons .active.button,
-.ui.tertiary.teal.buttons .tertiary.active.button,
-.ui.tertiary.teal.active.button,
-.ui.tertiary.teal.buttons .button:active,
-.ui.tertiary.teal.buttons .tertiary.button:active,
-.ui.tertiary.teal.button:active {
-  box-shadow: inset 0 -0.2em 0 #009c95;
-  color: #009c95;
-}
-
 .ui.blue.buttons .button,
 .ui.blue.button {
   background-color: #2185D0;
@@ -2004,40 +1573,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.blue.buttons .button,
-.ui.tertiary.blue.buttons .tertiary.button,
-.ui.tertiary.blue.button {
-  background: transparent;
-  box-shadow: none;
-  color: #2185D0;
-}
-
-.ui.tertiary.blue.buttons .button:hover,
-.ui.tertiary.blue.buttons button:hover,
-.ui.tertiary.blue.button:hover {
-  box-shadow: inset 0 -0.2em 0 #2b75ac;
-  color: #2b75ac;
-}
-
-.ui.tertiary.blue.buttons .button:focus,
-.ui.tertiary.blue.buttons .tertiary.button:focus,
-.ui.tertiary.blue.button:focus {
-  box-shadow: inset 0 -0.2em 0 #216ea7;
-  color: #216ea7;
-}
-
-.ui.tertiary.blue.buttons .active.button,
-.ui.tertiary.blue.buttons .tertiary.active.button,
-.ui.tertiary.blue.active.button,
-.ui.tertiary.blue.buttons .button:active,
-.ui.tertiary.blue.buttons .tertiary.button:active,
-.ui.tertiary.blue.button:active {
-  box-shadow: inset 0 -0.2em 0 #007bd8;
-  color: #1279c6;
-}
-
 .ui.violet.buttons .button,
 .ui.violet.button {
   background-color: #6435C9;
@@ -2120,40 +1655,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.violet.buttons .button,
-.ui.tertiary.violet.buttons .tertiary.button,
-.ui.tertiary.violet.button {
-  background: transparent;
-  box-shadow: none;
-  color: #6435C9;
-}
-
-.ui.tertiary.violet.buttons .button:hover,
-.ui.tertiary.violet.buttons button:hover,
-.ui.tertiary.violet.button:hover {
-  box-shadow: inset 0 -0.2em 0 #6040a5;
-  color: #6040a5;
-}
-
-.ui.tertiary.violet.buttons .button:focus,
-.ui.tertiary.violet.buttons .tertiary.button:focus,
-.ui.tertiary.violet.button:focus {
-  box-shadow: inset 0 -0.2em 0 #5735a0;
-  color: #5735a0;
-}
-
-.ui.tertiary.violet.buttons .active.button,
-.ui.tertiary.violet.buttons .tertiary.active.button,
-.ui.tertiary.violet.active.button,
-.ui.tertiary.violet.buttons .button:active,
-.ui.tertiary.violet.buttons .tertiary.button:active,
-.ui.tertiary.violet.button:active {
-  box-shadow: inset 0 -0.2em 0 #4e0fd6;
-  color: #5626bf;
-}
-
 .ui.purple.buttons .button,
 .ui.purple.button {
   background-color: #A333C8;
@@ -2236,40 +1737,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.purple.buttons .button,
-.ui.tertiary.purple.buttons .tertiary.button,
-.ui.tertiary.purple.button {
-  background: transparent;
-  box-shadow: none;
-  color: #A333C8;
-}
-
-.ui.tertiary.purple.buttons .button:hover,
-.ui.tertiary.purple.buttons button:hover,
-.ui.tertiary.purple.button:hover {
-  box-shadow: inset 0 -0.2em 0 #8a3ea4;
-  color: #8a3ea4;
-}
-
-.ui.tertiary.purple.buttons .button:focus,
-.ui.tertiary.purple.buttons .tertiary.button:focus,
-.ui.tertiary.purple.button:focus {
-  box-shadow: inset 0 -0.2em 0 #84339f;
-  color: #84339f;
-}
-
-.ui.tertiary.purple.buttons .active.button,
-.ui.tertiary.purple.buttons .tertiary.active.button,
-.ui.tertiary.purple.active.button,
-.ui.tertiary.purple.buttons .button:active,
-.ui.tertiary.purple.buttons .tertiary.button:active,
-.ui.tertiary.purple.button:active {
-  box-shadow: inset 0 -0.2em 0 #a30dd4;
-  color: #9724be;
-}
-
 .ui.pink.buttons .button,
 .ui.pink.button {
   background-color: #E03997;
@@ -2352,40 +1819,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.pink.buttons .button,
-.ui.tertiary.pink.buttons .tertiary.button,
-.ui.tertiary.pink.button {
-  background: transparent;
-  box-shadow: none;
-  color: #E03997;
-}
-
-.ui.tertiary.pink.buttons .button:hover,
-.ui.tertiary.pink.buttons button:hover,
-.ui.tertiary.pink.button:hover {
-  box-shadow: inset 0 -0.2em 0 #cc3389;
-  color: #cc3389;
-}
-
-.ui.tertiary.pink.buttons .button:focus,
-.ui.tertiary.pink.buttons .tertiary.button:focus,
-.ui.tertiary.pink.button:focus {
-  box-shadow: inset 0 -0.2em 0 #c92782;
-  color: #c92782;
-}
-
-.ui.tertiary.pink.buttons .active.button,
-.ui.tertiary.pink.buttons .tertiary.active.button,
-.ui.tertiary.pink.active.button,
-.ui.tertiary.pink.buttons .button:active,
-.ui.tertiary.pink.buttons .tertiary.button:active,
-.ui.tertiary.pink.button:active {
-  box-shadow: inset 0 -0.2em 0 #ff0090;
-  color: #ea158d;
-}
-
 .ui.brown.buttons .button,
 .ui.brown.button {
   background-color: #A5673F;
@@ -2468,40 +1901,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.brown.buttons .button,
-.ui.tertiary.brown.buttons .tertiary.button,
-.ui.tertiary.brown.button {
-  background: transparent;
-  box-shadow: none;
-  color: #A5673F;
-}
-
-.ui.tertiary.brown.buttons .button:hover,
-.ui.tertiary.brown.buttons button:hover,
-.ui.tertiary.brown.button:hover {
-  box-shadow: inset 0 -0.2em 0 #835f48;
-  color: #835f48;
-}
-
-.ui.tertiary.brown.buttons .button:focus,
-.ui.tertiary.brown.buttons .tertiary.button:focus,
-.ui.tertiary.brown.button:focus {
-  box-shadow: inset 0 -0.2em 0 #7d573e;
-  color: #7d573e;
-}
-
-.ui.tertiary.brown.buttons .active.button,
-.ui.tertiary.brown.buttons .tertiary.active.button,
-.ui.tertiary.brown.active.button,
-.ui.tertiary.brown.buttons .button:active,
-.ui.tertiary.brown.buttons .tertiary.button:active,
-.ui.tertiary.brown.button:active {
-  box-shadow: inset 0 -0.2em 0 #ae561d;
-  color: #995a31;
-}
-
 .ui.grey.buttons .button,
 .ui.grey.button {
   background-color: #767676;
@@ -2584,40 +1983,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.grey.buttons .button,
-.ui.tertiary.grey.buttons .tertiary.button,
-.ui.tertiary.grey.button {
-  background: transparent;
-  box-shadow: none;
-  color: #767676;
-}
-
-.ui.tertiary.grey.buttons .button:hover,
-.ui.tertiary.grey.buttons button:hover,
-.ui.tertiary.grey.button:hover {
-  box-shadow: inset 0 -0.2em 0 #838383;
-  color: #838383;
-}
-
-.ui.tertiary.grey.buttons .button:focus,
-.ui.tertiary.grey.buttons .tertiary.button:focus,
-.ui.tertiary.grey.button:focus {
-  box-shadow: inset 0 -0.2em 0 #8a8a8a;
-  color: #8a8a8a;
-}
-
-.ui.tertiary.grey.buttons .active.button,
-.ui.tertiary.grey.buttons .tertiary.active.button,
-.ui.tertiary.grey.active.button,
-.ui.tertiary.grey.buttons .button:active,
-.ui.tertiary.grey.buttons .tertiary.button:active,
-.ui.tertiary.grey.button:active {
-  box-shadow: inset 0 -0.2em 0 #7e5454;
-  color: #696969;
-}
-
 .ui.black.buttons .button,
 .ui.black.button {
   background-color: #1B1C1D;
@@ -2700,40 +2065,6 @@
   margin-left: -1px;
 }
 
-/* Tertiary */
-
-.ui.tertiary.black.buttons .button,
-.ui.tertiary.black.buttons .tertiary.button,
-.ui.tertiary.black.button {
-  background: transparent;
-  box-shadow: none;
-  color: #1B1C1D;
-}
-
-.ui.tertiary.black.buttons .button:hover,
-.ui.tertiary.black.buttons button:hover,
-.ui.tertiary.black.button:hover {
-  box-shadow: inset 0 -0.2em 0 #8b8f93;
-  color: #8b8f93;
-}
-
-.ui.tertiary.black.buttons .button:focus,
-.ui.tertiary.black.buttons .tertiary.button:focus,
-.ui.tertiary.black.button:focus {
-  box-shadow: inset 0 -0.2em 0 #93969a;
-  color: #93969a;
-}
-
-.ui.tertiary.black.buttons .active.button,
-.ui.tertiary.black.buttons .tertiary.active.button,
-.ui.tertiary.black.active.button,
-.ui.tertiary.black.buttons .button:active,
-.ui.tertiary.black.buttons .tertiary.button:active,
-.ui.tertiary.black.button:active {
-  box-shadow: inset 0 -0.2em 0 #404245;
-  color: #0f0f10;
-}
-
 /*---------------
     Positive
 ----------------*/
@@ -6763,23 +6094,6 @@ select.ui.dropdown {
   margin-top: 0.7em;
 }
 
-/*--------------------
-        Transparent
-  ---------------------*/
-
-.ui.form .field .transparent.input:not(.icon) input,
-.ui.form .field input.transparent,
-.ui.form .field textarea.transparent {
-  padding: 0.67857143em 1em;
-}
-
-.ui.form .field input.transparent,
-.ui.form .field textarea.transparent {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  box-shadow: none !important;
-}
-
 /*--------------------------
   Input w/ attached Button
 ---------------------------*/
@@ -10082,265 +9396,40 @@ select.ui.dropdown {
     flex-direction: row-reverse;
   }
 
-  .ui[class*="computer vertically reversed"].grid {
-    flex-direction: column-reverse;
-  }
-
-  /* Divided Reversed */
-
-  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
-  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
-    box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
-  }
-
-  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
-  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
-    box-shadow: none;
-  }
-
-  /* Vertically Divided Reversed */
-
-  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
-    box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
-  }
-
-  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
-    box-shadow: none;
-  }
-
-  /* Celled Reversed */
-
-  .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
-    box-shadow: -1px 0 0 0 #D4D4D5;
-  }
-
-  .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
-    box-shadow: none;
-  }
-}
-
-/*-------------------
-        Doubling
-  --------------------*/
-
-/* Tablet Only */
-
-@media only screen and (min-width: 768px) and (max-width: 991.98px) {
-  .ui.doubling.grid {
-    width: auto;
-  }
-
-  .ui.grid > .doubling.row,
-  .ui.doubling.grid > .row {
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-
-  .ui.grid > .doubling.row > .column,
-  .ui.doubling.grid > .row > .column {
-    display: inline-block !important;
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important;
-    box-shadow: none !important;
-    margin: 0;
-  }
-
-  .ui[class*="two column"].doubling.grid > .row > .column,
-  .ui[class*="two column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="two column"].doubling.row.row > .column {
-    width: 100% !important;
-  }
-
-  .ui[class*="three column"].doubling.grid > .row > .column,
-  .ui[class*="three column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="three column"].doubling.row.row > .column {
-    width: 50% !important;
-  }
-
-  .ui[class*="four column"].doubling.grid > .row > .column,
-  .ui[class*="four column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="four column"].doubling.row.row > .column {
-    width: 50% !important;
-  }
-
-  .ui[class*="five column"].doubling.grid > .row > .column,
-  .ui[class*="five column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="five column"].doubling.row.row > .column {
-    width: 33.33333333% !important;
-  }
-
-  .ui[class*="six column"].doubling.grid > .row > .column,
-  .ui[class*="six column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="six column"].doubling.row.row > .column {
-    width: 33.33333333% !important;
-  }
-
-  .ui[class*="seven column"].doubling.grid > .row > .column,
-  .ui[class*="seven column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="seven column"].doubling.row.row > .column {
-    width: 33.33333333% !important;
-  }
-
-  .ui[class*="eight column"].doubling.grid > .row > .column,
-  .ui[class*="eight column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="eight column"].doubling.row.row > .column {
-    width: 25% !important;
-  }
-
-  .ui[class*="nine column"].doubling.grid > .row > .column,
-  .ui[class*="nine column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="nine column"].doubling.row.row > .column {
-    width: 25% !important;
-  }
-
-  .ui[class*="ten column"].doubling.grid > .row > .column,
-  .ui[class*="ten column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="ten column"].doubling.row.row > .column {
-    width: 20% !important;
-  }
-
-  .ui[class*="eleven column"].doubling.grid > .row > .column,
-  .ui[class*="eleven column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="eleven column"].doubling.row.row > .column {
-    width: 20% !important;
-  }
-
-  .ui[class*="twelve column"].doubling.grid > .row > .column,
-  .ui[class*="twelve column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="twelve column"].doubling.row.row > .column {
-    width: 16.66666667% !important;
-  }
-
-  .ui[class*="thirteen column"].doubling.grid > .row > .column,
-  .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
-    width: 16.66666667% !important;
-  }
-
-  .ui[class*="fourteen column"].doubling.grid > .row > .column,
-  .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
-    width: 14.28571429% !important;
-  }
-
-  .ui[class*="fifteen column"].doubling.grid > .row > .column,
-  .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
-    width: 14.28571429% !important;
-  }
-
-  .ui[class*="sixteen column"].doubling.grid > .row > .column,
-  .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
-  .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
-    width: 12.5% !important;
-  }
-}
-
-/* Mobile Only */
-
-@media only screen and (max-width: 767.98px) {
-  .ui.grid > .doubling.row,
-  .ui.doubling.grid > .row {
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-
-  .ui.grid > .doubling.row > .column,
-  .ui.doubling.grid > .row > .column {
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important;
-    margin: 0 !important;
-    box-shadow: none !important;
-  }
-
-  .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
-    width: 100% !important;
-  }
-
-  .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
-    width: 50% !important;
-  }
-
-  .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
-    width: 50% !important;
-  }
-
-  .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
-    width: 50% !important;
-  }
-
-  .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
-    width: 50% !important;
-  }
-
-  .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
-    width: 50% !important;
-  }
-
-  .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
-    width: 50% !important;
+  .ui[class*="computer vertically reversed"].grid {
+    flex-direction: column-reverse;
   }
 
-  .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
-    width: 33.33333333% !important;
-  }
+  /* Divided Reversed */
 
-  .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
-    width: 33.33333333% !important;
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+    box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
   }
 
-  .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
-    width: 33.33333333% !important;
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+    box-shadow: none;
   }
 
-  .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
-    width: 33.33333333% !important;
-  }
+  /* Vertically Divided Reversed */
 
-  .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
-    width: 33.33333333% !important;
+  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
+    box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
   }
 
-  .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
-    width: 25% !important;
+  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
+    box-shadow: none;
   }
 
-  .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
-    width: 25% !important;
+  /* Celled Reversed */
+
+  .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
+    box-shadow: -1px 0 0 0 #D4D4D5;
   }
 
-  .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
-  .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
-  .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
-    width: 25% !important;
+  .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
+    box-shadow: none;
   }
 }
 
@@ -12717,445 +11806,147 @@ a.ui.label {
   opacity: 1;
 }
 
-/* Image */
-
-.ui.label > img {
-  width: auto !important;
-  vertical-align: middle;
-  height: 2.1666em;
-}
-
-/* Icon */
-
-.ui.left.icon.label > .icon,
-.ui.label > .icon {
-  width: auto;
-  margin: 0 0.75em 0 0;
-}
-
-/* Detail */
-
-.ui.label > .detail {
-  display: inline-block;
-  vertical-align: top;
-  font-weight: 500;
-  margin-left: 1em;
-  opacity: 0.8;
-}
-
-.ui.label > .detail .icon {
-  margin: 0 0.25em 0 0;
-}
-
-/* Removable label */
-
-.ui.label > .close.icon,
-.ui.label > .delete.icon {
-  cursor: pointer;
-  font-size: 0.92857143em;
-  opacity: 0.5;
-  transition: background 0.1s ease;
-}
-
-.ui.label > .close.icon:hover,
-.ui.label > .delete.icon:hover {
-  opacity: 1;
-}
-
-/* Backward compatible positioning */
-
-.ui.label.left.icon > .close.icon,
-.ui.label.left.icon > .delete.icon {
-  margin: 0 0.5em 0 0;
-}
-
-.ui.label:not(.icon) > .close.icon,
-.ui.label:not(.icon) > .delete.icon {
-  margin: 0 0 0 0.5em;
-}
-
-/* Label for only an icon */
-
-.ui.icon.label > .icon {
-  margin: 0 auto;
-}
-
-/* Right Side Icon */
-
-.ui.right.icon.label > .icon {
-  margin: 0 0 0 0.75em;
-}
-
-/*-------------------
-       Group
---------------------*/
-
-.ui.labels > .label {
-  margin: 0 0.5em 0.5em 0;
-}
-
-/*-------------------
-       Coupling
---------------------*/
-
-.ui.header > .ui.label {
-  margin-top: -0.29165em;
-}
-
-/* Remove border radius on attached segment */
-
-.ui.attached.segment > .ui.top.left.attached.label,
-.ui.bottom.attached.segment > .ui.top.left.attached.label {
-  border-top-left-radius: 0;
-}
-
-.ui.attached.segment > .ui.top.right.attached.label,
-.ui.bottom.attached.segment > .ui.top.right.attached.label {
-  border-top-right-radius: 0;
-}
-
-.ui.top.attached.segment > .ui.bottom.left.attached.label {
-  border-bottom-left-radius: 0;
-}
-
-.ui.top.attached.segment > .ui.bottom.right.attached.label {
-  border-bottom-right-radius: 0;
-}
-
-/* Padding on next content after a label */
-
-.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached),
-.ui.top.attached.label + :not(.attached) {
-  margin-top: 2rem !important;
-}
-
-.ui.bottom.attached.label ~ :last-child:not(.attached) {
-  margin-top: 0;
-  margin-bottom: 2rem !important;
-}
-
-.ui.segment:not(.basic) > .ui.top.attached.label {
-  margin-top: -1px;
-}
-
-.ui.segment:not(.basic) > .ui.bottom.attached.label {
-  margin-bottom: -1px;
-}
-
-.ui.segment:not(.basic) > .ui.attached.label:not(.right) {
-  margin-left: -1px;
-}
-
-.ui.segment:not(.basic) > .ui.right.attached.label {
-  margin-right: -1px;
-}
-
-.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) {
-  width: calc(100% + 2px);
-}
-
-/*******************************
-             Types
-*******************************/
-
-.ui.image.label {
-  width: auto;
-  margin-top: 0;
-  margin-bottom: 0;
-  max-width: 9999px;
-  vertical-align: baseline;
-  text-transform: none;
-  background: #E8E8E8;
-  padding: 0.5833em 0.833em 0.5833em 0.5em;
-  border-radius: 0.28571429rem;
-  box-shadow: none;
-}
-
-.ui.image.label.attached:not(.basic) {
-  padding: 0.5833em 0.833em 0.5833em 0.5em;
-}
-
-.ui.image.label img {
-  display: inline-block;
-  vertical-align: top;
-  height: 2.1666em;
-  margin: -0.5833em 0.5em -0.5833em -0.5em;
-  border-radius: 0.28571429rem 0 0 0.28571429rem;
-}
-
-.ui.image.label .detail {
-  background: rgba(0, 0, 0, 0.1);
-  margin: -0.5833em -0.833em -0.5833em 0.5em;
-  padding: 0.5833em 0.833em;
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-}
-
-.ui.bottom.attached.image.label:not(.right) > img,
-.ui.top.right.attached.image.label > img {
-  border-top-left-radius: 0;
-}
-
-.ui.top.attached.image.label:not(.right) > img,
-.ui.bottom.right.attached.image.label > img {
-  border-bottom-left-radius: 0;
-}
-
-/*-------------------
-         Tag
---------------------*/
-
-.ui.tag.labels .label,
-.ui.tag.label {
-  margin-left: 1em;
-  position: relative;
-  padding-left: 1.5em;
-  padding-right: 1.5em;
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-  transition: none;
-}
-
-.ui.tag.labels .label:before,
-.ui.tag.label:before {
-  position: absolute;
-  transform: translateY(-50%) translateX(50%) rotate(-45deg);
-  top: 50%;
-  right: 100%;
-  content: '';
-  background-color: inherit;
-  background-image: none;
-  width: 1.56em;
-  height: 1.56em;
-  transition: none;
-}
-
-.ui.tag.labels .label:after,
-.ui.tag.label:after {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: -0.25em;
-  margin-top: -0.25em;
-  background-color: #FFFFFF;
-  width: 0.5em;
-  height: 0.5em;
-  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
-  border-radius: 500rem;
-}
-
-.ui.basic.tag.labels .label:before,
-.ui.basic.tag.label:before {
-  border-color: inherit;
-  border-width: 1px 0 0 1px;
-  border-style: inherit;
-  right: calc(100% + 1px);
-}
-
-.ui.basic.tag.labels .label:after,
-.ui.basic.tag.label:after {
-  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8);
-}
-
-/*-------------------
-    Corner Label
---------------------*/
-
-.ui.corner.label {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  border-color: #E8E8E8;
-  width: 4em;
-  height: 4em;
-  z-index: 1;
-  transition: border-color 0.1s ease;
-}
-
-/* Icon Label */
-
-.ui.corner.label {
-  background-color: transparent !important;
-}
-
-.ui.corner.label:after {
-  position: absolute;
-  content: "";
-  right: 0;
-  top: 0;
-  z-index: -1;
-  width: 0;
-  height: 0;
-  background-color: transparent;
-  border-top: 0 solid transparent;
-  border-right: 4em solid transparent;
-  border-bottom: 4em solid transparent;
-  border-left: 0 solid transparent;
-  border-right-color: inherit;
-  transition: border-color 0.1s ease;
-}
-
-.ui.corner.label .icon {
-  cursor: inherit;
-  position: absolute;
-  top: 0.64285714em;
-  left: auto;
-  right: 0.57142857em;
-  font-size: 1.14285714em;
-  margin: 0;
+/* Image */
+
+.ui.label > img {
+  width: auto !important;
+  vertical-align: middle;
+  height: 2.1666em;
 }
 
-/* Left Corner */
+/* Icon */
 
-.ui.left.corner.label,
-.ui.left.corner.label:after {
-  right: auto;
-  left: 0;
+.ui.left.icon.label > .icon,
+.ui.label > .icon {
+  width: auto;
+  margin: 0 0.75em 0 0;
 }
 
-.ui.left.corner.label:after {
-  border-top: 4em solid transparent;
-  border-right: 4em solid transparent;
-  border-bottom: 0 solid transparent;
-  border-left: 0 solid transparent;
-  border-top-color: inherit;
+/* Detail */
+
+.ui.label > .detail {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: 500;
+  margin-left: 1em;
+  opacity: 0.8;
 }
 
-.ui.left.corner.label .icon {
-  left: 0.57142857em;
-  right: auto;
+.ui.label > .detail .icon {
+  margin: 0 0.25em 0 0;
 }
 
-/* Segment */
+/* Removable label */
 
-.ui.segment > .ui.corner.label {
-  top: -1px;
-  right: -1px;
+.ui.label > .close.icon,
+.ui.label > .delete.icon {
+  cursor: pointer;
+  font-size: 0.92857143em;
+  opacity: 0.5;
+  transition: background 0.1s ease;
 }
 
-.ui.segment > .ui.left.corner.label {
-  right: auto;
-  left: -1px;
+.ui.label > .close.icon:hover,
+.ui.label > .delete.icon:hover {
+  opacity: 1;
 }
 
-/*-------------------
-         Ribbon
-  --------------------*/
+/* Backward compatible positioning */
 
-.ui.ribbon.label {
-  position: relative;
-  margin: 0;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-  border-color: rgba(0, 0, 0, 0.15);
+.ui.label.left.icon > .close.icon,
+.ui.label.left.icon > .delete.icon {
+  margin: 0 0.5em 0 0;
 }
 
-.ui.ribbon.label:after {
-  position: absolute;
-  content: '';
-  top: 100%;
-  left: 0;
-  background-color: transparent;
-  border-style: solid;
-  border-width: 0 1.2em 1.2em 0;
-  border-color: transparent;
-  border-right-color: inherit;
-  width: 0;
-  height: 0;
+.ui.label:not(.icon) > .close.icon,
+.ui.label:not(.icon) > .delete.icon {
+  margin: 0 0 0 0.5em;
 }
 
-/* Positioning */
+/* Label for only an icon */
 
-.ui.ribbon.label {
-  left: calc(-1rem - 1.2em);
-  margin-right: -1.2em;
-  padding-left: calc(1rem + 1.2em);
-  padding-right: 1.2em;
+.ui.icon.label > .icon {
+  margin: 0 auto;
 }
 
-.ui[class*="right ribbon"].label {
-  left: calc(100% + 1rem + 1.2em);
-  padding-left: 1.2em;
-  padding-right: calc(1rem + 1.2em);
+/* Right Side Icon */
+
+.ui.right.icon.label > .icon {
+  margin: 0 0 0 0.75em;
 }
 
-.ui.basic.ribbon.label {
-  padding-top: calc(0.5833em - 1px);
-  padding-bottom: calc(0.5833em - 1px);
+/*-------------------
+       Group
+--------------------*/
+
+.ui.labels > .label {
+  margin: 0 0.5em 0.5em 0;
 }
 
-.ui.basic.ribbon.label:not([class*="right ribbon"]) {
-  padding-left: calc(1rem + 1.2em - 1px);
-  padding-right: calc(1.2em - 1px);
+/*-------------------
+       Coupling
+--------------------*/
+
+.ui.header > .ui.label {
+  margin-top: -0.29165em;
 }
 
-.ui.basic[class*="right ribbon"].label {
-  padding-left: calc(1.2em - 1px);
-  padding-right: calc(1rem + 1.2em - 1px);
+/* Remove border radius on attached segment */
+
+.ui.attached.segment > .ui.top.left.attached.label,
+.ui.bottom.attached.segment > .ui.top.left.attached.label {
+  border-top-left-radius: 0;
 }
 
-.ui.basic.ribbon.label::after {
-  top: calc(100% + 1px);
+.ui.attached.segment > .ui.top.right.attached.label,
+.ui.bottom.attached.segment > .ui.top.right.attached.label {
+  border-top-right-radius: 0;
 }
 
-.ui.basic.ribbon.label:not([class*="right ribbon"])::after {
-  left: -1px;
+.ui.top.attached.segment > .ui.bottom.left.attached.label {
+  border-bottom-left-radius: 0;
 }
 
-.ui.basic[class*="right ribbon"].label::after {
-  right: -1px;
+.ui.top.attached.segment > .ui.bottom.right.attached.label {
+  border-bottom-right-radius: 0;
 }
 
-/* Right Ribbon */
+/* Padding on next content after a label */
 
-.ui[class*="right ribbon"].label {
-  text-align: left;
-  transform: translateX(-100%);
-  border-radius: 0.28571429rem 0 0 0.28571429rem;
+.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached),
+.ui.top.attached.label + :not(.attached) {
+  margin-top: 2rem !important;
 }
 
-.ui[class*="right ribbon"].label:after {
-  left: auto;
-  right: 0;
-  border-style: solid;
-  border-width: 1.2em 1.2em 0 0;
-  border-color: transparent;
-  border-top-color: inherit;
+.ui.bottom.attached.label ~ :last-child:not(.attached) {
+  margin-top: 0;
+  margin-bottom: 2rem !important;
 }
 
-/* Inside Table */
-
-.ui.image > .ribbon.label,
-.ui.card .image > .ribbon.label {
-  position: absolute;
-  top: 1rem;
+.ui.segment:not(.basic) > .ui.top.attached.label {
+  margin-top: -1px;
 }
 
-.ui.card .image > .ui.ribbon.label,
-.ui.image > .ui.ribbon.label {
-  left: calc(0.05rem - 1.2em);
+.ui.segment:not(.basic) > .ui.bottom.attached.label {
+  margin-bottom: -1px;
 }
 
-.ui.card .image > .ui[class*="right ribbon"].label,
-.ui.image > .ui[class*="right ribbon"].label {
-  left: calc(100% + -0.05rem + 1.2em);
-  padding-left: 0.833em;
+.ui.segment:not(.basic) > .ui.attached.label:not(.right) {
+  margin-left: -1px;
 }
 
-/* Inside Table */
-
-.ui.table td > .ui.ribbon.label {
-  left: calc(-1em - 1.2em);
+.ui.segment:not(.basic) > .ui.right.attached.label {
+  margin-right: -1px;
 }
 
-.ui.table td > .ui[class*="right ribbon"].label {
-  left: calc(100% + 1em + 1.2em);
-  padding-left: 0.833em;
+.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) {
+  width: calc(100% + 2px);
 }
 
+/*******************************
+             Types
+*******************************/
+
 /*-------------------
         Attached
   --------------------*/
@@ -13313,10 +12104,6 @@ a.ui.active.label:hover:before {
   padding-left: calc(0.833em - 1px);
 }
 
-.ui.basic.image.label {
-  padding-left: calc(0.5em - 1px);
-}
-
 /* Link */
 
 .ui.basic.labels a.label:hover,
@@ -13363,12 +12150,6 @@ a.ui.ui.ui.primary.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.primary.ribbon.label {
-  border-color: #1a69a4;
-}
-
 /* Basic */
 
 .ui.basic.labels .primary.label,
@@ -13401,12 +12182,6 @@ a.ui.ui.ui.secondary.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.secondary.ribbon.label {
-  border-color: #020203;
-}
-
 /* Basic */
 
 .ui.basic.labels .secondary.label,
@@ -13439,12 +12214,6 @@ a.ui.ui.ui.red.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.red.ribbon.label {
-  border-color: #b21e1e;
-}
-
 /* Basic */
 
 .ui.basic.labels .red.label,
@@ -13477,12 +12246,6 @@ a.ui.ui.ui.orange.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.orange.ribbon.label {
-  border-color: #cf590c;
-}
-
 /* Basic */
 
 .ui.basic.labels .orange.label,
@@ -13515,12 +12278,6 @@ a.ui.ui.ui.yellow.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.yellow.ribbon.label {
-  border-color: #cd9903;
-}
-
 /* Basic */
 
 .ui.basic.labels .yellow.label,
@@ -13553,12 +12310,6 @@ a.ui.ui.ui.olive.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.olive.ribbon.label {
-  border-color: #8d9e13;
-}
-
 /* Basic */
 
 .ui.basic.labels .olive.label,
@@ -13591,12 +12342,6 @@ a.ui.ui.ui.green.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.green.ribbon.label {
-  border-color: #198f35;
-}
-
 /* Basic */
 
 .ui.basic.labels .green.label,
@@ -13629,12 +12374,6 @@ a.ui.ui.ui.teal.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.teal.ribbon.label {
-  border-color: #00827c;
-}
-
 /* Basic */
 
 .ui.basic.labels .teal.label,
@@ -13667,12 +12406,6 @@ a.ui.ui.ui.blue.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.blue.ribbon.label {
-  border-color: #1a69a4;
-}
-
 /* Basic */
 
 .ui.basic.labels .blue.label,
@@ -13705,12 +12438,6 @@ a.ui.ui.ui.violet.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.violet.ribbon.label {
-  border-color: #502aa1;
-}
-
 /* Basic */
 
 .ui.basic.labels .violet.label,
@@ -13743,12 +12470,6 @@ a.ui.ui.ui.purple.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.purple.ribbon.label {
-  border-color: #82299f;
-}
-
 /* Basic */
 
 .ui.basic.labels .purple.label,
@@ -13781,12 +12502,6 @@ a.ui.ui.ui.pink.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.pink.ribbon.label {
-  border-color: #c71f7e;
-}
-
 /* Basic */
 
 .ui.basic.labels .pink.label,
@@ -13819,12 +12534,6 @@ a.ui.ui.ui.brown.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.brown.ribbon.label {
-  border-color: #805031;
-}
-
 /* Basic */
 
 .ui.basic.labels .brown.label,
@@ -13857,12 +12566,6 @@ a.ui.ui.ui.grey.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.grey.ribbon.label {
-  border-color: #5d5d5d;
-}
-
 /* Basic */
 
 .ui.basic.labels .grey.label,
@@ -13895,12 +12598,6 @@ a.ui.ui.ui.black.label:hover {
   color: #FFFFFF;
 }
 
-/* Ribbon */
-
-.ui.ui.ui.black.ribbon.label {
-  border-color: #020203;
-}
-
 /* Basic */
 
 .ui.basic.labels .black.label,
@@ -20274,149 +18971,44 @@ Floated Menu / Item
   min-height: 18rem;
   background: #F9FAFB;
   border-color: rgba(34, 36, 38, 0.15);
-  box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
-}
-
-.ui.placeholder.segment .button,
-.ui.placeholder.segment textarea {
-  display: block;
-}
-
-.ui.placeholder.segment .field,
-.ui.placeholder.segment textarea,
-.ui.placeholder.segment > .ui.input,
-.ui.placeholder.segment .button {
-  max-width: 15rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.ui.placeholder.segment .column .button,
-.ui.placeholder.segment .column .field,
-.ui.placeholder.segment .column textarea,
-.ui.placeholder.segment .column > .ui.input {
-  max-width: 15rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.ui.placeholder.segment > .inline {
-  align-self: center;
-}
-
-.ui.placeholder.segment > .inline > .button {
-  display: inline-block;
-  width: auto;
-  margin: 0 0.35714286rem 0 0;
-}
-
-.ui.placeholder.segment > .inline > .button:last-child {
-  margin-right: 0;
-}
-
-/*-------------------
-          Piled
-  --------------------*/
-
-.ui.piled.segments,
-.ui.piled.segment {
-  margin: 3em 0;
-  box-shadow: '';
-  z-index: auto;
-}
-
-.ui.piled.segment:first-child {
-  margin-top: 0;
-}
-
-.ui.piled.segment:last-child {
-  margin-bottom: 0;
-}
-
-.ui.piled.segments:after,
-.ui.piled.segments:before,
-.ui.piled.segment:after,
-.ui.piled.segment:before {
-  background-color: #FFFFFF;
-  visibility: visible;
-  content: '';
-  display: block;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  width: 100%;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  box-shadow: '';
-}
-
-.ui.piled.segments:before,
-.ui.piled.segment:before {
-  transform: rotate(-1.2deg);
-  top: 0;
-  z-index: -2;
-}
-
-.ui.piled.segments:after,
-.ui.piled.segment:after {
-  transform: rotate(1.2deg);
-  top: 0;
-  z-index: -1;
-}
-
-/* Piled Attached */
-
-.ui[class*="top attached"].piled.segment {
-  margin-top: 3em;
-  margin-bottom: 0;
-}
-
-.ui.piled.segment[class*="top attached"]:first-child {
-  margin-top: 0;
+  box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
 }
 
-.ui.piled.segment[class*="bottom attached"] {
-  margin-top: 0;
-  margin-bottom: 3em;
+.ui.placeholder.segment .button,
+.ui.placeholder.segment textarea {
+  display: block;
 }
 
-.ui.piled.segment[class*="bottom attached"]:last-child {
-  margin-bottom: 0;
+.ui.placeholder.segment .field,
+.ui.placeholder.segment textarea,
+.ui.placeholder.segment > .ui.input,
+.ui.placeholder.segment .button {
+  max-width: 15rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-/*-------------------
-         Stacked
-  --------------------*/
-
-.ui.stacked.segment {
-  padding-bottom: 1.4em;
+.ui.placeholder.segment .column .button,
+.ui.placeholder.segment .column .field,
+.ui.placeholder.segment .column textarea,
+.ui.placeholder.segment .column > .ui.input {
+  max-width: 15rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.ui.stacked.segments:before,
-.ui.stacked.segments:after,
-.ui.stacked.segment:before,
-.ui.stacked.segment:after {
-  content: '';
-  position: absolute;
-  bottom: -3px;
-  left: 0;
-  border-top: 1px solid rgba(34, 36, 38, 0.15);
-  background: rgba(0, 0, 0, 0.03);
-  width: 100%;
-  height: 6px;
-  visibility: visible;
+.ui.placeholder.segment > .inline {
+  align-self: center;
 }
 
-.ui.stacked.segments:before,
-.ui.stacked.segment:before {
-  display: none;
+.ui.placeholder.segment > .inline > .button {
+  display: inline-block;
+  width: auto;
+  margin: 0 0.35714286rem 0 0;
 }
 
-/* Add additional page */
-
-.ui.tall.stacked.segments:before,
-.ui.tall.stacked.segment:before {
-  display: block;
-  bottom: 0;
+.ui.placeholder.segment > .inline > .button:last-child {
+  margin-right: 0;
 }
 
 /*-------------------
@@ -21440,126 +20032,6 @@ input::selection {
   .ui.definition.table:not(.unstackable) > thead > tr > th:first-child {
     box-shadow: none !important;
   }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.secondary.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.secondary.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.orange.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.orange.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.yellow.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.yellow.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.olive.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.olive.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.green.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.green.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.teal.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.teal.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.blue.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.blue.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.violet.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.violet.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.purple.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.purple.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.pink.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.pink.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.brown.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.brown.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.grey.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.grey.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.black.left {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
-  }
-
-  .ui.ui.ui.ui.table:not(.unstackable) tr.marked.black.right {
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
-  }
 }
 
 /*******************************
@@ -21744,191 +20216,6 @@ input::selection {
           Variations
 *******************************/
 
-/*--------------
-      Stackable
-  ---------------*/
-
-@media only screen and (max-width: 991.98px) {
-  .ui[class*="tablet stackable"].table,
-  .ui[class*="tablet stackable"].table > thead,
-  .ui[class*="tablet stackable"].table > thead > tr,
-  .ui[class*="tablet stackable"].table > tfoot,
-  .ui[class*="tablet stackable"].table > tfoot > tr,
-  .ui[class*="tablet stackable"].table > tbody,
-  .ui[class*="tablet stackable"].table > tbody > tr,
-  .ui[class*="tablet stackable"].table > tr,
-  .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned),
-  .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned),
-  .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned),
-  .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned),
-  .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned),
-  .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned),
-  .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) {
-    display: block !important;
-    width: 100% !important;
-  }
-
-  .ui[class*="tablet stackable"].table {
-    padding: 0;
-  }
-
-  .ui[class*="tablet stackable"].table > thead {
-    display: block;
-  }
-
-  .ui[class*="tablet stackable"].table > tfoot {
-    display: block;
-  }
-
-  .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr,
-  .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr,
-  .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr,
-  .ui.ui.ui.ui[class*="tablet stackable"].table > tr {
-    padding-top: 1em;
-    padding-bottom: 1em;
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
-  }
-
-  .ui[class*="tablet stackable"].table > thead > tr > th,
-  .ui[class*="tablet stackable"].table > tbody > tr > th,
-  .ui[class*="tablet stackable"].table > tfoot > tr > th,
-  .ui[class*="tablet stackable"].table > tr > th,
-  .ui[class*="tablet stackable"].table > tbody > tr > td,
-  .ui[class*="tablet stackable"].table > tfoot > tr > td,
-  .ui[class*="tablet stackable"].table > tr > td {
-    background: none;
-    border: none !important;
-    padding: 0.25em 0.75em;
-    box-shadow: none;
-  }
-
-  /* Definition Table */
-
-  .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child {
-    box-shadow: none !important;
-  }
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.secondary.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.secondary.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.orange.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.orange.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.yellow.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.yellow.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.olive.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.olive.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.green.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.green.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.teal.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.teal.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.blue.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.blue.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.violet.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.violet.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.purple.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.purple.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.pink.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.pink.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.brown.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.brown.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.grey.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.grey.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.black.left {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset;
-}
-
-.ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.black.right {
-  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset;
-}
-
 /*--------------
    Text Alignment
   ---------------*/
@@ -22155,16 +20442,6 @@ input::selection {
   color: rgba(255, 255, 255, 0.9);
 }
 
-.ui.table td.marked.primary.left,
-.ui.table tr.marked.primary.left {
-  box-shadow: 0.2em 0 0 0 #2185D0 inset;
-}
-
-.ui.table td.marked.primary.right,
-.ui.table tr.marked.primary.right {
-  box-shadow: -0.2em 0 0 0 #2185D0 inset;
-}
-
 .ui.secondary.table {
   border-top: 0.2em solid #1B1C1D;
 }
@@ -22182,16 +20459,6 @@ input::selection {
   color: rgba(255, 255, 255, 0.9);
 }
 
-.ui.table td.marked.secondary.left,
-.ui.table tr.marked.secondary.left {
-  box-shadow: 0.2em 0 0 0 #1B1C1D inset;
-}
-
-.ui.table td.marked.secondary.right,
-.ui.table tr.marked.secondary.right {
-  box-shadow: -0.2em 0 0 0 #1B1C1D inset;
-}
-
 .ui.red.table {
   border-top: 0.2em solid #DB2828;
 }
@@ -22209,16 +20476,6 @@ input::selection {
   color: #DB2828;
 }
 
-.ui.table td.marked.red.left,
-.ui.table tr.marked.red.left {
-  box-shadow: 0.2em 0 0 0 #DB2828 inset;
-}
-
-.ui.table td.marked.red.right,
-.ui.table tr.marked.red.right {
-  box-shadow: -0.2em 0 0 0 #DB2828 inset;
-}
-
 .ui.orange.table {
   border-top: 0.2em solid #F2711C;
 }
@@ -22236,16 +20493,6 @@ input::selection {
   color: #F2711C;
 }
 
-.ui.table td.marked.orange.left,
-.ui.table tr.marked.orange.left {
-  box-shadow: 0.2em 0 0 0 #F2711C inset;
-}
-
-.ui.table td.marked.orange.right,
-.ui.table tr.marked.orange.right {
-  box-shadow: -0.2em 0 0 0 #F2711C inset;
-}
-
 .ui.yellow.table {
   border-top: 0.2em solid #FBBD08;
 }
@@ -22263,16 +20510,6 @@ input::selection {
   color: #B58105;
 }
 
-.ui.table td.marked.yellow.left,
-.ui.table tr.marked.yellow.left {
-  box-shadow: 0.2em 0 0 0 #FBBD08 inset;
-}
-
-.ui.table td.marked.yellow.right,
-.ui.table tr.marked.yellow.right {
-  box-shadow: -0.2em 0 0 0 #FBBD08 inset;
-}
-
 .ui.olive.table {
   border-top: 0.2em solid #B5CC18;
 }
@@ -22290,16 +20527,6 @@ input::selection {
   color: #8ABC1E;
 }
 
-.ui.table td.marked.olive.left,
-.ui.table tr.marked.olive.left {
-  box-shadow: 0.2em 0 0 0 #B5CC18 inset;
-}
-
-.ui.table td.marked.olive.right,
-.ui.table tr.marked.olive.right {
-  box-shadow: -0.2em 0 0 0 #B5CC18 inset;
-}
-
 .ui.green.table {
   border-top: 0.2em solid #21BA45;
 }
@@ -22317,16 +20544,6 @@ input::selection {
   color: #1EBC30;
 }
 
-.ui.table td.marked.green.left,
-.ui.table tr.marked.green.left {
-  box-shadow: 0.2em 0 0 0 #21BA45 inset;
-}
-
-.ui.table td.marked.green.right,
-.ui.table tr.marked.green.right {
-  box-shadow: -0.2em 0 0 0 #21BA45 inset;
-}
-
 .ui.teal.table {
   border-top: 0.2em solid #00B5AD;
 }
@@ -22344,16 +20561,6 @@ input::selection {
   color: #10A3A3;
 }
 
-.ui.table td.marked.teal.left,
-.ui.table tr.marked.teal.left {
-  box-shadow: 0.2em 0 0 0 #00B5AD inset;
-}
-
-.ui.table td.marked.teal.right,
-.ui.table tr.marked.teal.right {
-  box-shadow: -0.2em 0 0 0 #00B5AD inset;
-}
-
 .ui.blue.table {
   border-top: 0.2em solid #2185D0;
 }
@@ -22371,16 +20578,6 @@ input::selection {
   color: #2185D0;
 }
 
-.ui.table td.marked.blue.left,
-.ui.table tr.marked.blue.left {
-  box-shadow: 0.2em 0 0 0 #2185D0 inset;
-}
-
-.ui.table td.marked.blue.right,
-.ui.table tr.marked.blue.right {
-  box-shadow: -0.2em 0 0 0 #2185D0 inset;
-}
-
 .ui.violet.table {
   border-top: 0.2em solid #6435C9;
 }
@@ -22398,16 +20595,6 @@ input::selection {
   color: #6435C9;
 }
 
-.ui.table td.marked.violet.left,
-.ui.table tr.marked.violet.left {
-  box-shadow: 0.2em 0 0 0 #6435C9 inset;
-}
-
-.ui.table td.marked.violet.right,
-.ui.table tr.marked.violet.right {
-  box-shadow: -0.2em 0 0 0 #6435C9 inset;
-}
-
 .ui.purple.table {
   border-top: 0.2em solid #A333C8;
 }
@@ -22425,16 +20612,6 @@ input::selection {
   color: #A333C8;
 }
 
-.ui.table td.marked.purple.left,
-.ui.table tr.marked.purple.left {
-  box-shadow: 0.2em 0 0 0 #A333C8 inset;
-}
-
-.ui.table td.marked.purple.right,
-.ui.table tr.marked.purple.right {
-  box-shadow: -0.2em 0 0 0 #A333C8 inset;
-}
-
 .ui.pink.table {
   border-top: 0.2em solid #E03997;
 }
@@ -22452,16 +20629,6 @@ input::selection {
   color: #E03997;
 }
 
-.ui.table td.marked.pink.left,
-.ui.table tr.marked.pink.left {
-  box-shadow: 0.2em 0 0 0 #E03997 inset;
-}
-
-.ui.table td.marked.pink.right,
-.ui.table tr.marked.pink.right {
-  box-shadow: -0.2em 0 0 0 #E03997 inset;
-}
-
 .ui.brown.table {
   border-top: 0.2em solid #A5673F;
 }
@@ -22479,16 +20646,6 @@ input::selection {
   color: #A5673F;
 }
 
-.ui.table td.marked.brown.left,
-.ui.table tr.marked.brown.left {
-  box-shadow: 0.2em 0 0 0 #A5673F inset;
-}
-
-.ui.table td.marked.brown.right,
-.ui.table tr.marked.brown.right {
-  box-shadow: -0.2em 0 0 0 #A5673F inset;
-}
-
 .ui.grey.table {
   border-top: 0.2em solid #767676;
 }
@@ -22506,16 +20663,6 @@ input::selection {
   color: #767676;
 }
 
-.ui.table td.marked.grey.left,
-.ui.table tr.marked.grey.left {
-  box-shadow: 0.2em 0 0 0 #767676 inset;
-}
-
-.ui.table td.marked.grey.right,
-.ui.table tr.marked.grey.right {
-  box-shadow: -0.2em 0 0 0 #767676 inset;
-}
-
 .ui.black.table {
   border-top: 0.2em solid #1B1C1D;
 }
@@ -22533,16 +20680,6 @@ input::selection {
   color: #FFFFFF;
 }
 
-.ui.table td.marked.black.left,
-.ui.table tr.marked.black.left {
-  box-shadow: 0.2em 0 0 0 #1B1C1D inset;
-}
-
-.ui.table td.marked.black.right,
-.ui.table tr.marked.black.right {
-  box-shadow: -0.2em 0 0 0 #1B1C1D inset;
-}
-
 /*--------------
   Column Count
 ---------------*/

diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 909ea950db050789e7dcd6a7a00d80d555771364..673773a91bb72943b10d5c58e6eab008ef65f083 100644 (file)
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -27,13 +27,9 @@
           <div class="field">
             <textarea name="merge_message_field" rows="5" :placeholder="mergeForm.mergeMessageFieldPlaceHolder" v-model="mergeMessageFieldValue"/>
             <template v-if="mergeMessageFieldValue !== mergeForm.defaultMergeMessage">
-              <button @click.prevent="clearMergeMessage" class="ui tertiary button">
+              <button @click.prevent="clearMergeMessage" class="btn gt-mt-2 gt-p-2 interact-fg" :data-tooltip-content="mergeForm.textClearMergeMessageHint">
                 {{ mergeForm.textClearMergeMessage }}
               </button>
-              <div class="ui label">
-                <!-- TODO: Convert to tooltip once we can use tooltips in Vue templates -->
-                {{ mergeForm.textClearMergeMessageHint }}
-              </div>
             </template>
           </div>
         </template>