Remove fomantic menu module (#30325)

A lot of variants are in use, so the diff stat isn't so great.

Co-authored-by: Giteabot <teabot@gitea.io>

6 files changed, 804 insertions, 2201 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 02067971a0..20f3616177 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -319,27 +319,6 @@ a.label,
   background-color: var(--color-label-bg);
 }
 
-.ui.menu {
-  display: flex;
-}
-
-.ui.menu,
-.ui.vertical.menu {
-  background: var(--color-menu);
-  border-color: var(--color-secondary);
-  box-shadow: none;
-}
-
-.ui.menu .item {
-  color: var(--color-text);
-  user-select: auto;
-  line-height: var(--line-height-default); /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */
-}
-
-.ui.menu .item > .svg {
-  margin-right: 0.35em;
-}
-
 .ui.menu .dropdown.item:hover,
 .ui.menu a.item:hover,
 .ui.menu details.item summary:hover {
@@ -347,42 +326,6 @@ a.label,
   background: var(--color-hover);
 }
 
-.ui.menu .active.item,
-.ui.menu .active.item:hover,
-.ui.vertical.menu .active.item,
-.ui.vertical.menu .active.item:hover {
-  color: var(--color-text);
-  background: var(--color-active);
-}
-
-.ui.menu a.item:active {
-  color: var(--color-text);
-  background: none;
-}
-
-.ui.ui.menu .item.disabled {
-  color: var(--color-text-light-3);
-}
-
-.ui.menu .item::before, .ui.vertical.menu .item::before {
-  background: var(--color-secondary);
-}
-
-/* sub menu of vertical menu */
-.ui.vertical.menu .item .menu .item {
-  color: var(--color-text-light-2);
-  text-indent: 16px;
-}
-
-.ui.vertical.menu .item .menu .item:hover,
-.ui.vertical.menu .item .menu a.item:hover {
-  color: var(--color-text-light-1);
-}
-
-.ui.vertical.menu .item .menu .active.item {
-  color: var(--color-text);
-}
-
 /* slightly more contrast for filters on issue list */
 .ui.ui.menu .dropdown.item.disabled {
   color: var(--color-text-light-2);
@@ -441,11 +384,6 @@ a.label,
   background: var(--color-hover);
 }
 
-.ui.menu .ui.dropdown .menu > .selected.item {
-  color: var(--color-text) !important;
-  background: var(--color-hover) !important;
-}
-
 .ui.dropdown .menu > .message:not(.ui) {
   color: var(--color-text-light-2);
 }
@@ -462,58 +400,6 @@ a.label,
   color: var(--color-text-light-2);
 }
 
-/* replace item margin on secondary menu items with gap and remove both the
-   negative margins on the menu as well as margin on the items */
-.ui.secondary.menu {
-  margin-left: 0;
-  margin-right: 0;
-  gap: .35714286em;
-}
-.ui.secondary.menu .item {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.ui.secondary.menu .dropdown.item:hover,
-.ui.secondary.menu a.item:hover {
-  color: var(--color-text);
-  background: var(--color-hover);
-}
-
-.ui.secondary.menu .active.item,
-.ui.secondary.menu .active.item:hover {
-  color: var(--color-text);
-  background: var(--color-active);
-}
-
-.ui.secondary.menu.tight .item {
-  padding-left: 0.85714286em;
-  padding-right: 0.85714286em;
-}
-
-/* remove the menu clearfix so that it won't add undesired gaps when using "gap" */
-.ui.menu::after {
-  content: normal;
-}
-
-.ui.menu .dropdown.item .menu {
-  background: var(--color-body);
-}
-
-.ui.menu .ui.dropdown .menu > .item {
-  color: var(--color-text) !important;
-}
-
-.ui.menu .ui.dropdown .menu > .item:hover {
-  color: var(--color-text) !important;
-  background: var(--color-hover) !important;
-}
-
-.ui.menu .ui.dropdown .menu > .active.item {
-  color: var(--color-text) !important;
-  background: var(--color-active) !important;
-}
-
 .ui.form textarea:not([rows]) {
   height: var(--min-height-textarea); /* override fomantic default 12em */
   min-height: var(--min-height-textarea); /* override fomantic default 8em */
@@ -606,11 +492,6 @@ img.ui.avatar,
   margin-top: calc(var(--page-spacing) - 1rem);
 }
 
-.ui.pagination.menu .active.item {
-  color: var(--color-text);
-  background: var(--color-active);
-}
-
 .ui.form .fields.error .field textarea,
 .ui.form .fields.error .field select,
 .ui.form .fields.error .field input:not([type]),
@@ -786,7 +667,7 @@ input:-webkit-autofill:active,
   font-weight: var(--font-weight-normal);
 }
 
-/* replace fomantic popover box shadows */
+/* popover box shadows */
 .ui.dropdown .menu,
 .ui.upward.dropdown > .menu,
 .ui.menu .dropdown.item .menu,
@@ -804,22 +685,6 @@ input:-webkit-autofill:active,
   background: var(--color-overlay-backdrop);
 }
 
-/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
-/* This fixes the commit graph button on the commits page */
-/* modal svg icons, copied from fomantic except width and height */
-/* center text in fomantic modal dialogs */
-.ui .menu:not(.vertical) .item > .button.compact {
-  padding: 0.58928571em 1.125em;
-}
-
-.ui .menu:not(.vertical) .item > .button.small {
-  font-size: 0.92857143rem;
-}
-
-.ui.menu .ui.dropdown.item .menu .item {
-  width: 100%;
-}
-
 .ui.dropdown .menu > .header {
   font-size: 0.8em;
 }
@@ -1010,24 +875,6 @@ input:-webkit-autofill:active,
   border-color: var(--color-gold) !important;
 }
 
-@media (max-width: 767.98px) {
-  .ui.pagination.menu .item:not(.active,.navigation),
-  .ui.pagination.menu .item.navigation span.navigation_label {
-    display: none;
-  }
-}
-
-.ui.pagination.menu.narrow .item {
-  padding-left: 8px;
-  padding-right: 8px;
-  min-width: 1em;
-  text-align: center;
-}
-
-.ui.pagination.menu.narrow .item .icon {
-  margin-right: 0;
-}
-
 .ui.floating.dropdown .overflow.menu .scrolling.menu.items {
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -1149,11 +996,6 @@ overflow-menu .ui.label {
   margin-top: 1px;
 }
 
-.ui.menu .item > .label {
-  background: var(--color-label-bg);
-  color: var(--color-label-text);
-}
-
 .lines-blame-btn {
   padding: 0 0 0 5px;
   display: flex;
@@ -1382,26 +1224,6 @@ table th[data-sortt-desc] .svg {
   vertical-align: -0.15em;
 }
 
-.ui.tabular.menu {
-  border-color: var(--color-secondary);
-}
-
-.ui.tabular.menu .active.item,
-.ui.tabular.menu .active.item:hover {
-  background: var(--color-body);
-  border-color: var(--color-secondary);
-  color: var(--color-text);
-}
-
-.ui.segment .ui.tabular.menu .active.item,
-.ui.segment .ui.tabular.menu .active.item:hover {
-  background: var(--color-box-body);
-}
-
-.ui.secondary.pointing.menu {
-  border-color: var(--color-secondary);
-}
-
 .ui.tabular.menu .item,
 .ui.secondary.pointing.menu .item {
   padding: 11.55px 12px !important; /* match .dashboard-navbar in height */
@@ -1413,12 +1235,6 @@ table th[data-sortt-desc] .svg {
   color: var(--color-text);
 }
 
-.ui.secondary.pointing.menu .active.item,
-.ui.secondary.pointing.menu .active.item:hover,
-.ui.secondary.pointing.menu .dropdown.item:hover {
-  color: var(--color-text-dark);
-}
-
 .ui.tabular.menu .active.item,
 .ui.secondary.pointing.menu .active.item,
 .resize-for-semibold::before {
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 73e10eedcb..edd6cdca8b 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -11,6 +11,7 @@
 @import "./modules/list.css";
 @import "./modules/segment.css";
 @import "./modules/grid.css";
+@import "./modules/menu.css";
 @import "./modules/message.css";
 @import "./modules/table.css";
 @import "./modules/card.css";
diff --git a/web_src/css/modules/menu.css b/web_src/css/modules/menu.css
new file mode 100644
index 0000000000..2581d8fab2
--- /dev/null
+++ b/web_src/css/modules/menu.css
@@ -0,0 +1,802 @@
+.ui.menu {
+  display: flex;
+  margin: 1rem 0;
+  font-family: var(--fonts-regular);
+  font-weight: var(--font-weight-normal);
+  background: var(--color-menu);
+  border: 1px solid var(--color-secondary);
+  border-radius: 0.28571429rem;
+  min-height: 2.85714286em;
+  font-size: 1rem;
+}
+.ui.menu:first-child {
+  margin-top: 0;
+}
+.ui.menu:last-child {
+  margin-bottom: 0;
+}
+
+.ui.menu .menu {
+  margin: 0;
+}
+.ui.menu:not(.vertical) > .menu {
+  display: flex;
+}
+
+.ui.menu:not(.vertical) .item {
+  display: flex;
+  align-items: center;
+}
+
+.ui.menu .item {
+  position: relative;
+  vertical-align: middle;
+  line-height: var(--line-height-default);
+  text-decoration: none;
+  flex: 0 0 auto;
+  background: none;
+  padding: 0.92857143em 1.14285714em;
+  color: var(--color-text);
+  font-weight: var(--font-weight-normal);
+}
+.ui.menu > .item:first-child {
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
+}
+
+.ui.menu .item::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 1px;
+  background: var(--color-secondary);
+}
+
+.ui.menu .item > .svg {
+  margin-right: 0.35em;
+}
+
+.ui.menu .item > a:not(.ui),
+.ui.menu .item > p:only-child {
+  line-height: 1.3;
+}
+.ui.menu .item > p:first-child {
+  margin-top: 0;
+}
+.ui.menu .item > p:last-child {
+  margin-bottom: 0;
+}
+
+.ui.menu .item > i.icon {
+  opacity: 0.9;
+  float: none;
+  margin: 0 0.35714286em 0 0;
+}
+
+.ui.menu:not(.vertical) .item > .button {
+  position: relative;
+  top: 0;
+  margin: -0.5em 0;
+  padding: 0.58928571em 1.125em;
+  font-size: 1em;
+}
+
+.ui.menu > .grid,
+.ui.menu > .container {
+  display: flex;
+  align-items: inherit;
+  flex-direction: inherit;
+}
+
+.ui.menu .item > .input {
+  width: 100%;
+}
+.ui.menu:not(.vertical) .item > .input {
+  position: relative;
+  top: 0;
+  margin: -0.5em 0;
+}
+.ui.menu .item > .input input {
+  font-size: 1em;
+  padding-top: 0.57142857em;
+  padding-bottom: 0.57142857em;
+}
+
+.ui.menu .header.item,
+.ui.vertical.menu .header.item {
+  margin: 0;
+  font-size: 1.1em;
+  background: var(--color-box-header);
+  font-weight: var(--font-weight-medium);
+}
+.ui.vertical.menu .item > .header:not(.ui) {
+  margin: 0 0 0.5em;
+  font-size: 1em;
+  font-weight: var(--font-weight-medium);
+}
+
+.ui.menu .item > i.dropdown.icon {
+  padding: 0;
+  float: right;
+  margin: 0 0 0 1em;
+}
+
+.ui.menu .dropdown.item .menu {
+  min-width: calc(100% - 1px);
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+  background: var(--color-body);
+  margin: 0;
+  flex-direction: column !important;
+}
+
+.ui.menu .ui.dropdown .menu > .item {
+  margin: 0;
+  text-align: left;
+  font-size: 1em !important;
+  padding: 0.78571429em 1.14285714em !important;
+  background: transparent !important;
+  color: var(--color-text) !important;
+  font-weight: var(--font-weight-normal) !important;
+}
+.ui.menu .ui.dropdown .menu > .item:hover {
+  color: var(--color-text) !important;
+  background: var(--color-hover) !important;
+}
+.ui.menu .ui.dropdown .menu > .selected.item {
+  color: var(--color-text) !important;
+  background: var(--color-hover) !important;
+}
+.ui.menu .ui.dropdown .menu > .active.item {
+  color: var(--color-text) !important;
+  background: var(--color-active) !important;
+  font-weight: var(--font-weight-medium) !important;
+}
+
+.ui.menu .ui.dropdown.item .menu .item {
+  width: 100%;
+}
+
+.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
+  display: block;
+}
+.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) {
+  display: inline-block;
+  font-size: 1em !important;
+  float: none;
+  margin: 0 0.75em 0 0 !important;
+}
+
+.ui.secondary.menu .dropdown.item > .menu {
+  border-radius: 0.28571429rem;
+  margin-top: 0.35714286em;
+}
+
+.ui.menu .pointing.dropdown.item .menu {
+  margin-top: 0.75em;
+}
+
+.ui.menu .item > .label:not(.floating) {
+  margin-left: 1em;
+  padding: 0.3em 0.78571429em;
+}
+.ui.vertical.menu .item > .label {
+  margin-top: -0.15em;
+  margin-bottom: -0.15em;
+  padding: 0.3em 0.78571429em;
+  float: right;
+  text-align: center;
+}
+.ui.menu .item > .floating.label {
+  padding: 0.3em 0.78571429em;
+}
+.ui.menu .item > .label {
+  background: var(--color-label-bg);
+  color: var(--color-label-text);
+}
+.ui.menu .item > .image.label img {
+  margin: -0.2833em 0.8em -0.2833em -0.8em;
+  height: 1.5666em;
+}
+
+.ui.menu .item > img:not(.ui) {
+  display: inline-block;
+  vertical-align: middle;
+  margin: -0.3em 0;
+  width: 2.5em;
+}
+.ui.vertical.menu .item > img:not(.ui):only-child {
+  display: block;
+  max-width: 100%;
+  width: auto;
+}
+
+.ui.menu .list .item::before {
+  background: none !important;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.menu > .ui.container {
+    width: 100% !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+.ui.menu .dropdown.item:hover,
+.ui.menu a.item:hover {
+  cursor: pointer;
+}
+
+.ui.menu a.item:active {
+  color: var(--color-text);
+  background: none;
+}
+
+.ui.menu .active.item {
+  color: var(--color-text);
+  background: var(--color-active);
+  font-weight: var(--font-weight-normal);
+}
+.ui.menu .active.item > i.icon {
+  opacity: 1;
+}
+
+.ui.ui.menu .item.disabled {
+  cursor: default;
+  background-color: transparent;
+  pointer-events: none;
+  opacity: var(--opacity-disabled);
+}
+
+.ui.menu:not(.vertical) .left.item,
+.ui.menu:not(.vertical) .left.menu {
+  display: flex;
+  margin-right: auto !important;
+}
+
+.ui.menu:not(.vertical) .right.item,
+.ui.menu:not(.vertical) .right.menu {
+  display: flex;
+  margin-left: auto !important;
+}
+.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
+.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
+  display: inherit;
+}
+
+.ui.menu:not(.vertical) .center.item {
+  display: flex;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.ui.menu .right.item::before,
+.ui.menu .right.menu > .item::before {
+  right: auto;
+  left: 0;
+}
+
+.ui.menu .center.item:last-child::before {
+  display: none;
+}
+
+.ui.vertical.menu {
+  display: block;
+  flex-direction: column;
+  background: var(--color-menu);
+  width: 15rem;
+}
+
+.ui.vertical.menu .item {
+  display: block;
+  background: none;
+  border-top: none;
+  border-right: none;
+}
+.ui.vertical.menu > .item:first-child {
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.vertical.menu > .item:last-child {
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+
+.ui.vertical.menu .item > i.icon {
+  width: 1.18em;
+  float: right;
+  margin: 0 0 0 0.5em;
+}
+.ui.vertical.menu .item > .label + i.icon {
+  float: none;
+  margin: 0 0.5em 0 0;
+}
+
+.ui.vertical.menu .item::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--color-secondary);
+}
+.ui.vertical.menu .item:first-child::before {
+  display: none !important;
+}
+
+.ui.vertical.menu .item > .menu {
+  margin: 0.5em -1.14285714em 0;
+}
+.ui.vertical.menu .menu .item {
+  background: none;
+  padding: 0.5em 1.33333333em;
+  font-size: 0.85714286em;
+  color: var(--color-text-light-2);
+}
+
+.ui.vertical.menu .item .menu .item {
+  color: var(--color-text-light-2);
+  text-indent: 16px;
+}
+
+.ui.vertical.menu .item .menu .item:hover,
+.ui.vertical.menu .item .menu a.item:hover {
+  color: var(--color-text-light-1);
+}
+
+.ui.vertical.menu .item .menu .active.item {
+  background-color: transparent;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.ui.vertical.menu .item .menu a.item:hover {
+  color: var(--color-text);
+}
+.ui.vertical.menu .menu .item::before {
+  display: none;
+}
+
+.ui.vertical.menu .active.item {
+  border-radius: 0;
+}
+.ui.vertical.menu > .active.item:first-child {
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.vertical.menu > .active.item:last-child {
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+.ui.vertical.menu > .active.item:only-child {
+  border-radius: 0.28571429rem;
+}
+.ui.vertical.menu .active.item .menu .active.item {
+  border-left: none;
+}
+
+.ui.tabular.menu {
+  border-radius: 0;
+  border: none;
+  background: none transparent;
+  border-bottom: 1px solid var(--color-secondary);
+}
+.ui.tabular.fluid.menu {
+  width: calc(100% + 2px) !important;
+}
+.ui.tabular.menu .item {
+  background: transparent;
+  border-bottom: none;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 2px solid transparent;
+  color: var(--color-text-light-2);
+}
+.ui.tabular.menu .item::before {
+  display: none;
+}
+
+.ui.tabular.menu .item:hover {
+  background-color: transparent;
+}
+
+.ui.tabular.menu .active.item,
+.ui.tabular.menu .active.item:hover {
+  background: var(--color-body);
+  border-top-width: 1px;
+  border-color: var(--color-secondary);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: -1px;
+  border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
+}
+
+.ui.tabular.menu + .attached:not(.top).segment,
+.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
+  border-top: none;
+  margin-left: 0;
+  margin-top: 0;
+  margin-right: 0;
+  width: 100%;
+}
+
+.ui.tabular.menu .active.dropdown.item {
+  margin-bottom: 0;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 2px solid transparent;
+  border-bottom: none;
+}
+
+.ui.pagination.menu {
+  margin: 0;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.ui.pagination.menu .item:last-child {
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+}
+.ui.compact.menu .item:last-child {
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+}
+.ui.pagination.menu .item:last-child::before {
+  display: none;
+}
+.ui.pagination.menu .item {
+  min-width: 3em;
+  text-align: center;
+}
+.ui.pagination.menu .icon.item i.icon {
+  vertical-align: top;
+}
+
+.ui.pagination.menu .active.item,
+.ui.pagination.menu .active.item:hover {
+  border-top: none;
+  padding-top: 0.92857143em;
+  color: var(--color-text);
+  background: var(--color-active);
+}
+
+@media (max-width: 767.98px) {
+  .ui.pagination.menu .item:not(.active,.navigation),
+  .ui.pagination.menu .item.navigation span.navigation_label {
+    display: none;
+  }
+}
+
+.ui.pagination.menu.narrow .item {
+  padding-left: 8px;
+  padding-right: 8px;
+  min-width: 1em;
+  text-align: center;
+}
+
+.ui.pagination.menu.narrow .item .icon {
+  margin-right: 0;
+}
+
+.ui.secondary.menu {
+  background: none;
+  margin-left: 0;
+  margin-right: 0;
+  gap: .35714286em;
+  border-radius: 0;
+  border: none;
+}
+
+.ui.secondary.menu .item {
+  align-self: center;
+  border: none;
+  padding: 0.78571429em 0.92857143em;
+  margin: 0;
+  background: none;
+  border-radius: 0.28571429rem;
+}
+
+.ui.secondary.menu .item::before {
+  display: none !important;
+}
+
+.ui.secondary.menu .header.item {
+  border-radius: 0;
+  border-right: none;
+  background: none transparent;
+}
+
+.ui.secondary.menu .item > img:not(.ui) {
+  margin: 0;
+}
+
+.ui.secondary.menu .dropdown.item:hover,
+.ui.secondary.menu a.item:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+}
+
+.ui.secondary.menu .active.item,
+.ui.secondary.menu .active.item:hover {
+  color: var(--color-text-dark);
+  background: var(--color-active);
+  border-radius: 0.28571429rem;
+}
+
+.ui.secondary.item.menu {
+  margin-left: 0;
+  margin-right: 0;
+}
+.ui.secondary.item.menu .item:last-child {
+  margin-right: 0;
+}
+
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
+  margin: 0 -0.92857143em;
+}
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
+  margin: 0;
+  padding: 0.5em 1.33333333em;
+}
+.ui.secondary.vertical.menu > .item {
+  border: none;
+  margin: 0 0 0.35714286em;
+  border-radius: 0.28571429rem !important;
+}
+.ui.secondary.vertical.menu > .header.item {
+  border-radius: 0;
+}
+
+.ui.vertical.secondary.menu .item > .menu .item {
+  background-color: transparent;
+}
+
+.ui.secondary.pointing.menu {
+  margin-left: 0;
+  margin-right: 0;
+  border-bottom: 2px solid var(--color-secondary);
+}
+.ui.secondary.pointing.menu .item {
+  border-bottom-color: transparent;
+  border-bottom-style: solid;
+  border-radius: 0;
+  align-self: flex-end;
+  margin: 0 0 -2px;
+  padding: 0.85714286em 1.14285714em;
+  border-bottom-width: 2px;
+}
+.ui.secondary.pointing.menu .ui.dropdown .menu .item {
+  border-bottom-width: 0;
+}
+.ui.secondary.pointing.menu .item > .label:not(.floating) {
+  margin-top: -0.3em;
+  margin-bottom: -0.3em;
+}
+.ui.secondary.pointing.menu .item > .circular.label {
+  margin-top: -0.5em;
+  margin-bottom: -0.5em;
+}
+
+.ui.secondary.pointing.menu .header.item {
+  color: var(--color-text) !important;
+}
+.ui.secondary.pointing.menu .item::after {
+  display: none;
+}
+
+.ui.secondary.pointing.menu .dropdown.item:hover,
+.ui.secondary.pointing.menu a.item:hover {
+  background-color: transparent;
+  color: var(--color-text);
+}
+
+.ui.secondary.pointing.menu .dropdown.item:active,
+.ui.secondary.pointing.menu a.item:active {
+  background-color: transparent;
+  border-color: var(--color-secondary);
+}
+
+.ui.secondary.pointing.menu .active.item {
+  background-color: transparent;
+  border-color: currentcolor;
+  font-weight: var(--font-weight-medium);
+}
+
+.ui.secondary.pointing.menu .active.item,
+.ui.secondary.pointing.menu .active.item:hover,
+.ui.secondary.pointing.menu .dropdown.item:hover {
+  color: var(--color-text-dark);
+}
+
+.ui.secondary.pointing.menu .active.dropdown.item {
+  border-color: transparent;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.stackable.menu {
+    flex-direction: column;
+  }
+  .ui.stackable.menu .item {
+    width: 100% !important;
+  }
+  .ui.stackable.menu .left.menu,
+  .ui.stackable.menu .left.item {
+    margin-right: 0 !important;
+  }
+  .ui.stackable.menu .right.menu,
+  .ui.stackable.menu .right.item {
+    margin-left: 0 !important;
+  }
+  .ui.stackable.menu .center.item {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .ui.stackable.menu .right.menu,
+  .ui.stackable.menu .left.menu {
+    flex-direction: column;
+  }
+}
+
+.ui.floated.menu {
+  float: left;
+  margin: 0 0.5rem 0 0;
+}
+.ui.floated.menu .item:last-child::before {
+  display: none;
+}
+.ui.right.floated.menu {
+  float: right;
+  margin: 0 0 0 0.5rem;
+}
+
+.ui.borderless.menu .item::before,
+.ui.borderless.menu .item .menu .item::before,
+.ui.menu .borderless.item::before {
+  background: none !important;
+}
+
+.ui.compact.menu {
+  display: inline-flex;
+  margin: 0;
+  vertical-align: middle;
+}
+.ui.compact.vertical.menu {
+  display: inline-block;
+  width: auto !important;
+}
+.ui.compact.menu:not(.secondary) .item:last-child {
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+}
+.ui.compact.menu .item:last-child::before {
+  display: none;
+}
+.ui.compact.vertical.menu .item:last-child::before {
+  display: block;
+}
+
+.ui.menu.fluid,
+.ui.vertical.menu.fluid {
+  width: 100% !important;
+}
+
+.ui.item.menu,
+.ui.item.menu .item {
+  width: 100%;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  text-align: center;
+  justify-content: center;
+}
+.ui.attached.item.menu:not(.tabular) {
+  margin: 0 -1px !important;
+}
+.ui.item.menu .item:last-child::before {
+  display: none;
+}
+.ui.menu.two.item .item {
+  width: 50%;
+}
+
+.ui.pointing.menu .item::after {
+  visibility: hidden;
+  position: absolute;
+  content: "";
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  background: none;
+  margin: 0.5px 0 0;
+  width: 0.57142857em;
+  height: 0.57142857em;
+  border: none;
+  border-bottom: 1px solid var(--color-secondary);
+  border-right: 1px solid var(--color-secondary);
+  z-index: 2;
+}
+.ui.pointing.menu .ui.dropdown .menu .item::after {
+  display: none;
+}
+
+.ui.pointing.menu .active.item::after {
+  visibility: visible;
+}
+.ui.pointing.menu .active.dropdown.item::after {
+  visibility: hidden;
+}
+
+.ui.pointing.menu .dropdown.active.item::after,
+.ui.pointing.menu .active.item .menu .active.item::after {
+  display: none;
+}
+
+.ui.pointing.menu .active.item::after,
+.ui.pointing.menu .active.item:hover::after {
+  background-color: var(--color-active);
+}
+
+.ui.attached.menu {
+  top: 0;
+  bottom: 0;
+  border-radius: 0;
+  margin: 0 -1px;
+  width: calc(100% + 2px);
+  max-width: calc(100% + 2px);
+}
+.ui.attached + .ui.attached.menu:not(.top) {
+  border-top: none;
+}
+
+.ui[class*="top attached"].menu {
+  bottom: 0;
+  margin-bottom: 0;
+  top: 0;
+  margin-top: 1rem;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.menu[class*="top attached"]:first-child {
+  margin-top: 0;
+}
+
+.ui.top.attached.menu > .item:first-child {
+  border-radius: 0.28571429rem 0 0;
+}
+
+.ui.attached.menu:not(.tabular) {
+  border: 1px solid var(--color-secondary);
+}
+.ui.attached.tabular.menu {
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+}
+
+.ui.mini.menu,
+.ui.mini.menu .dropdown,
+.ui.mini.menu .dropdown .menu > .item {
+  font-size: 0.78571429rem;
+}
+.ui.mini.vertical.menu:not(.icon) {
+  width: 9rem;
+}
+.ui.tiny.menu,
+.ui.tiny.menu .dropdown,
+.ui.tiny.menu .dropdown .menu > .item {
+  font-size: 0.85714286rem;
+}
+.ui.tiny.vertical.menu:not(.icon) {
+  width: 11rem;
+}
+.ui.small.menu,
+.ui.small.menu .dropdown,
+.ui.small.menu .dropdown .menu > .item {
+  font-size: 0.92857143rem;
+}
+.ui.small.vertical.menu:not(.icon) {
+  width: 13rem;
+}
+
+.ui .menu:not(.vertical) .item > .button.small {
+  font-size: 0.92857143rem;
+}
+
+.ui.segment .ui.tabular.menu .active.item,
+.ui.segment .ui.tabular.menu .active.item:hover {
+  background: var(--color-box-body);
+}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 4b7ad49677..52f9d5a6ca 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2079,11 +2079,6 @@ td .commit-summary {
   padding: 10px 0 0;
 }
 
-.ui.vertical.menu .header.item {
-  font-size: 1.1em;
-  background: var(--color-box-header);
-}
-
 .comment:target .comment-container {
   border-color: var(--color-primary) !important;
   box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 49c00c4dad..8ce9ee24ea 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -6477,2016 +6477,6 @@ select.ui.dropdown {
 /*******************************
          Site Overrides
 *******************************/
-/*
- * # Fomantic - Menu
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Copyright 2015 Contributor
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Standard
-*******************************/
-
-/*--------------
-      Menu
----------------*/
-
-.ui.menu {
-  display: flex;
-  margin: 1rem 0;
-  font-family: var(--fonts-regular);
-  background: #FFFFFF;
-  font-weight: normal;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-  border-radius: 0.28571429rem;
-  min-height: 2.85714286em;
-}
-
-.ui.menu:after {
-  content: '';
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-
-.ui.menu:first-child {
-  margin-top: 0;
-}
-
-.ui.menu:last-child {
-  margin-bottom: 0;
-}
-
-/*--------------
-    Sub-Menu
----------------*/
-
-.ui.menu .menu {
-  margin: 0;
-}
-
-.ui.menu:not(.vertical) > .menu {
-  display: flex;
-}
-
-/*--------------
-      Item
----------------*/
-
-.ui.menu:not(.vertical) .item {
-  display: flex;
-  align-items: center;
-}
-
-.ui.menu .item {
-  position: relative;
-  vertical-align: middle;
-  line-height: 1;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-  flex: 0 0 auto;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  background: none;
-  padding: 0.92857143em 1.14285714em;
-  text-transform: none;
-  color: rgba(0, 0, 0, 0.87);
-  font-weight: normal;
-  transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
-}
-
-.ui.menu > .item:first-child {
-  border-radius: 0.28571429rem 0 0 0.28571429rem;
-}
-
-/* Border */
-
-.ui.menu .item:before {
-  position: absolute;
-  content: '';
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: 1px;
-  background: rgba(34, 36, 38, 0.1);
-}
-
-/*--------------
-  Text Content
----------------*/
-
-.ui.menu .text.item > *,
-.ui.menu .item > a:not(.ui),
-.ui.menu .item > p:only-child {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-  line-height: 1.3;
-}
-
-.ui.menu .item > p:first-child {
-  margin-top: 0;
-}
-
-.ui.menu .item > p:last-child {
-  margin-bottom: 0;
-}
-
-/*--------------
-      Icons
----------------*/
-
-.ui.menu .item > i.icon {
-  opacity: 0.9;
-  float: none;
-  margin: 0 0.35714286em 0 0;
-}
-
-/*--------------
-     Button
----------------*/
-
-.ui.menu:not(.vertical) .item > .button {
-  position: relative;
-  top: 0;
-  margin: -0.5em 0;
-  padding-bottom: 0.78571429em;
-  padding-top: 0.78571429em;
-  font-size: 1em;
-}
-
-/*----------------
- Grid / Container
------------------*/
-
-.ui.menu > .grid,
-.ui.menu > .container {
-  display: flex;
-  align-items: inherit;
-  flex-direction: inherit;
-}
-
-/*--------------
-     Inputs
----------------*/
-
-.ui.menu .item > .input {
-  width: 100%;
-}
-
-.ui.menu:not(.vertical) .item > .input {
-  position: relative;
-  top: 0;
-  margin: -0.5em 0;
-}
-
-.ui.menu .item > .input input {
-  font-size: 1em;
-  padding-top: 0.57142857em;
-  padding-bottom: 0.57142857em;
-}
-
-/*--------------
-     Header
----------------*/
-
-.ui.menu .header.item,
-.ui.vertical.menu .header.item {
-  margin: 0;
-  background: '';
-  text-transform: normal;
-  font-weight: 500;
-}
-
-.ui.vertical.menu .item > .header:not(.ui) {
-  margin: 0 0 0.5em;
-  font-size: 1em;
-  font-weight: 500;
-}
-
-/*--------------
-    Dropdowns
----------------*/
-
-/* Dropdown Icon */
-
-.ui.menu .item > i.dropdown.icon {
-  padding: 0;
-  float: right;
-  margin: 0 0 0 1em;
-}
-
-/* Menu */
-
-.ui.menu .dropdown.item .menu {
-  min-width: calc(100% - 1px);
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
-  background: #FFFFFF;
-  margin: 0 0 0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-  flex-direction: column !important;
-}
-
-/* Menu Items */
-
-.ui.menu .ui.dropdown .menu > .item {
-  margin: 0;
-  text-align: left;
-  font-size: 1em !important;
-  padding: 0.78571429em 1.14285714em !important;
-  background: transparent !important;
-  color: rgba(0, 0, 0, 0.87) !important;
-  text-transform: none !important;
-  font-weight: normal !important;
-  box-shadow: none !important;
-  transition: none !important;
-}
-
-.ui.menu .ui.dropdown .menu > .item:hover {
-  background: rgba(0, 0, 0, 0.05) !important;
-  color: rgba(0, 0, 0, 0.95) !important;
-}
-
-.ui.menu .ui.dropdown .menu > .selected.item {
-  background: rgba(0, 0, 0, 0.05) !important;
-  color: rgba(0, 0, 0, 0.95) !important;
-}
-
-.ui.menu .ui.dropdown .menu > .active.item {
-  background: rgba(0, 0, 0, 0.03) !important;
-  font-weight: 500 !important;
-  color: rgba(0, 0, 0, 0.95) !important;
-}
-
-.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
-  display: block;
-}
-
-.ui.menu .ui.dropdown .menu > .item > .icons,
-.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) {
-  display: inline-block;
-  font-size: 1em !important;
-  float: none;
-  margin: 0 0.75em 0 0 !important;
-}
-
-/* Secondary */
-
-.ui.secondary.menu .dropdown.item > .menu,
-.ui.text.menu .dropdown.item > .menu {
-  border-radius: 0.28571429rem;
-  margin-top: 0.35714286em;
-}
-
-/* Pointing */
-
-.ui.menu .pointing.dropdown.item .menu {
-  margin-top: 0.75em;
-}
-
-/* Vertical */
-
-.ui.vertical.menu .dropdown.item > i.icon {
-  float: right;
-  content: "\f0da";
-  margin-left: 1em;
-}
-
-.ui.vertical.menu .dropdown.item .menu {
-  left: 100%;
-  /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
-  min-width: 0;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  margin: 0 0 0 0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 0 0.28571429rem 0.28571429rem 0.28571429rem;
-}
-
-.ui.vertical.menu .dropdown.item.upward .menu {
-  bottom: 0;
-}
-
-.ui.vertical.menu .dropdown.item:not(.upward) .menu {
-  top: 0;
-}
-
-.ui.vertical.menu .active.dropdown.item {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ui.vertical.menu .dropdown.active.item {
-  box-shadow: none;
-}
-
-/* Evenly Divided */
-
-.ui.item.menu .dropdown .menu .item {
-  width: 100%;
-}
-
-/*--------------
-     Labels
----------------*/
-
-.ui.menu .item > .label:not(.floating) {
-  margin-left: 1em;
-  padding: 0.3em 0.78571429em;
-}
-
-.ui.vertical.menu .item > .label {
-  margin-top: -0.15em;
-  margin-bottom: -0.15em;
-  padding: 0.3em 0.78571429em;
-}
-
-.ui.menu .item > .floating.label {
-  padding: 0.3em 0.78571429em;
-}
-
-.ui.menu .item > .label {
-  background: #999999;
-  color: #FFFFFF;
-}
-
-.ui.menu .item > .image.label img {
-  margin: -0.2833em 0.8em -0.2833em -0.8em;
-  height: 1.5666em;
-}
-
-/*--------------
-     Images
----------------*/
-
-.ui.menu .item > img:not(.ui) {
-  display: inline-block;
-  vertical-align: middle;
-  margin: -0.3em 0;
-  width: 2.5em;
-}
-
-.ui.vertical.menu .item > img:not(.ui):only-child {
-  display: block;
-  max-width: 100%;
-  width: auto;
-}
-
-/*******************************
-          Coupling
-*******************************/
-
-/*--------------
-     List
----------------*/
-
-/* Menu divider shouldnt apply */
-
-.ui.menu .list .item:before {
-  background: none !important;
-}
-
-/*--------------
-       Sidebar
-  ---------------*/
-
-/* Show vertical dividers below last */
-
-.ui.vertical.sidebar.menu > .item:first-child:before {
-  display: block !important;
-}
-
-.ui.vertical.sidebar.menu > .item::before {
-  top: auto;
-  bottom: 0;
-}
-
-/*--------------
-    Container
----------------*/
-
-@media only screen and (max-width: 767.98px) {
-  .ui.menu > .ui.container {
-    width: 100% !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
-    border-left: 1px solid rgba(34, 36, 38, 0.1);
-  }
-
-  .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child,
-  .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child {
-    border-right: 1px solid rgba(34, 36, 38, 0.1);
-  }
-}
-
-/*******************************
-             States
-*******************************/
-
-/*--------------
-      Hover
----------------*/
-
-.ui.link.menu .item:hover,
-.ui.menu .dropdown.item:hover,
-.ui.menu .link.item:hover,
-.ui.menu a.item:hover {
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.03);
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*--------------
-     Pressed
----------------*/
-
-.ui.link.menu .item:active,
-.ui.menu .link.item:active,
-.ui.menu a.item:active {
-  background: rgba(0, 0, 0, 0.03);
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*--------------
-     Active
----------------*/
-
-.ui.menu .active.item {
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-  font-weight: normal;
-  box-shadow: none;
-}
-
-.ui.menu .active.item > i.icon {
-  opacity: 1;
-}
-
-/*--------------
-  Active Hover
----------------*/
-
-.ui.menu .active.item:hover,
-.ui.vertical.menu .active.item:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*--------------
-     Disabled
----------------*/
-
-.ui.ui.menu .item.disabled {
-  cursor: default;
-  background-color: transparent;
-  color: rgba(40, 40, 40, 0.3);
-  pointer-events: none;
-}
-
-/*******************************
-             Types
-*******************************/
-
-/*------------------
-Floated Menu / Item
--------------------*/
-
-/* Left Floated */
-
-.ui.menu:not(.vertical) .left.item,
-.ui.menu:not(.vertical) .left.menu {
-  display: flex;
-  margin-right: auto !important;
-}
-
-/* Right Floated */
-
-.ui.menu:not(.vertical) .right.item,
-.ui.menu:not(.vertical) .right.menu {
-  display: flex;
-  margin-left: auto !important;
-}
-
-.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
-.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
-  display: inherit;
-}
-
-/* Center */
-
-.ui.menu:not(.vertical) .center.item,
-.ui.menu:not(.vertical) .center.menu {
-  display: flex;
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-/* Swapped Borders */
-
-.ui.menu .right.item::before,
-.ui.menu .right.menu > .item::before {
-  right: auto;
-  left: 0;
-}
-
-/* Remove Outer Borders */
-
-.ui.menu .center.item:last-child::before,
-.ui.menu .center.menu > .item:last-child::before {
-  display: none;
-}
-
-/*--------------
-      Vertical
-  ---------------*/
-
-.ui.vertical.menu {
-  display: block;
-  flex-direction: column;
-  background: #FFFFFF;
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-}
-
-/*--- Item ---*/
-
-.ui.vertical.menu .item {
-  display: block;
-  background: none;
-  border-top: none;
-  border-right: none;
-}
-
-.ui.vertical.menu > .item:first-child {
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
-}
-
-.ui.vertical.menu > .item:last-child {
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
-}
-
-/*--- Label ---*/
-
-.ui.vertical.menu .item > .label {
-  float: right;
-  text-align: center;
-}
-
-/*--- Icon ---*/
-
-.ui.vertical.menu .item > i.icon,
-.ui.vertical.menu .item > i.icons {
-  width: 1.18em;
-  float: right;
-  margin: 0 0 0 0.5em;
-}
-
-.ui.vertical.menu .item > .label + i.icon {
-  float: none;
-  margin: 0 0.5em 0 0;
-}
-
-/*--- Border ---*/
-
-.ui.vertical.menu .item:before {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: rgba(34, 36, 38, 0.1);
-}
-
-.ui.vertical.menu .item:first-child:before {
-  display: none !important;
-}
-
-/*--- Sub Menu ---*/
-
-.ui.vertical.menu .item > .menu {
-  margin: 0.5em -1.14285714em 0;
-}
-
-.ui.vertical.menu .menu .item {
-  background: none;
-  padding: 0.5em 1.33333333em;
-  font-size: 0.85714286em;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.ui.vertical.menu .item .menu a.item:hover,
-.ui.vertical.menu .item .menu .link.item:hover {
-  color: rgba(0, 0, 0, 0.85);
-}
-
-.ui.vertical.menu .menu .item:before {
-  display: none;
-}
-
-/* Vertical Active */
-
-.ui.vertical.menu .active.item {
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.ui.vertical.menu > .active.item:first-child {
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
-}
-
-.ui.vertical.menu > .active.item:last-child {
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
-}
-
-.ui.vertical.menu > .active.item:only-child {
-  border-radius: 0.28571429rem;
-}
-
-.ui.vertical.menu .active.item .menu .active.item {
-  border-left: none;
-}
-
-.ui.vertical.menu .item .menu .active.item {
-  background-color: transparent;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*--------------
-       Tabular
-  ---------------*/
-
-.ui.tabular.menu {
-  border-radius: 0;
-  box-shadow: none !important;
-  border: none;
-  background: none transparent;
-  border-bottom: 1px solid #D4D4D5;
-}
-
-.ui.tabular.fluid.menu {
-  width: calc(100% + 2px) !important;
-}
-
-.ui.tabular.menu .item {
-  background: transparent;
-  border-bottom: none;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-top: 2px solid transparent;
-  padding: 0.92857143em 1.42857143em;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-.ui.tabular.menu .item:before {
-  display: none;
-}
-
-/* Hover */
-
-.ui.tabular.menu .item:hover {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.8);
-}
-
-/* Active */
-
-.ui.tabular.menu .active.item {
-  background: none #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-  border-top-width: 1px;
-  border-color: #D4D4D5;
-  font-weight: 500;
-  margin-bottom: -1px;
-  box-shadow: none;
-  border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
-}
-
-/* Coupling with segment for attachment */
-
-.ui.tabular.menu + .attached:not(.top).segment,
-.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
-  border-top: none;
-  margin-left: 0;
-  margin-top: 0;
-  margin-right: 0;
-  width: 100%;
-}
-
-.top.attached.segment + .ui.bottom.tabular.menu {
-  position: relative;
-  width: calc(100% + 2px);
-  left: -1px;
-}
-
-/* Bottom Vertical Tabular */
-
-.ui.bottom.tabular.menu {
-  background: none transparent;
-  border-radius: 0;
-  box-shadow: none !important;
-  border-bottom: none;
-  border-top: 1px solid #D4D4D5;
-}
-
-.ui.bottom.tabular.menu .item {
-  background: none;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-top: none;
-}
-
-.ui.bottom.tabular.menu .active.item {
-  background: none #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-  border-color: #D4D4D5;
-  margin: -1px 0 0 0;
-  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
-}
-
-/* Vertical Tabular (Left) */
-
-.ui.vertical.tabular.menu {
-  background: none transparent;
-  border-radius: 0;
-  box-shadow: none !important;
-  border-bottom: none;
-  border-right: 1px solid #D4D4D5;
-}
-
-.ui.vertical.tabular.menu .item {
-  background: none;
-  border-left: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-right: none;
-}
-
-.ui.vertical.tabular.menu .active.item {
-  background: none #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-  border-color: #D4D4D5;
-  margin: 0 -1px 0 0;
-  border-radius: 0.28571429rem 0 0 0.28571429rem !important;
-}
-
-/* Vertical Right Tabular */
-
-.ui.vertical.right.tabular.menu {
-  background: none transparent;
-  border-radius: 0;
-  box-shadow: none !important;
-  border-bottom: none;
-  border-right: none;
-  border-left: 1px solid #D4D4D5;
-}
-
-.ui.vertical.right.tabular.menu .item {
-  background: none;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-left: none;
-}
-
-.ui.vertical.right.tabular.menu .active.item {
-  background: none #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-  border-color: #D4D4D5;
-  margin: 0 0 0 -1px;
-  border-radius: 0 0.28571429rem 0.28571429rem 0 !important;
-}
-
-/* Dropdown */
-
-.ui.tabular.menu .active.dropdown.item {
-  margin-bottom: 0;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-top: 2px solid transparent;
-  border-bottom: none;
-}
-
-/*--------------
-     Pagination
-  ---------------*/
-
-.ui.pagination.menu {
-  margin: 0;
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.ui.pagination.menu .item:last-child {
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-}
-
-.ui.compact.menu .item:last-child {
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-}
-
-.ui.pagination.menu .item:last-child:before {
-  display: none;
-}
-
-.ui.pagination.menu .item {
-  min-width: 3em;
-  text-align: center;
-}
-
-.ui.pagination.menu .icon.item i.icon {
-  vertical-align: top;
-}
-
-/* Active */
-
-.ui.pagination.menu .active.item {
-  border-top: none;
-  padding-top: 0.92857143em;
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-  box-shadow: none;
-}
-
-/*--------------
-     Secondary
-  ---------------*/
-
-.ui.secondary.menu {
-  background: none;
-  margin-left: -0.35714286em;
-  margin-right: -0.35714286em;
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-}
-
-/* Item */
-
-.ui.secondary.menu .item {
-  align-self: center;
-  box-shadow: none;
-  border: none;
-  padding: 0.78571429em 0.92857143em;
-  margin: 0 0.35714286em;
-  background: none;
-  transition: color 0.1s ease;
-  border-radius: 0.28571429rem;
-}
-
-/* No Divider */
-
-.ui.secondary.menu .item:before {
-  display: none !important;
-}
-
-/* Header */
-
-.ui.secondary.menu .header.item {
-  border-radius: 0;
-  border-right: none;
-  background: none transparent;
-}
-
-/* Image */
-
-.ui.secondary.menu .item > img:not(.ui) {
-  margin: 0;
-}
-
-/* Hover */
-
-.ui.secondary.menu .dropdown.item:hover,
-.ui.secondary.menu .link.item:hover,
-.ui.secondary.menu a.item:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/* Active */
-
-.ui.secondary.menu .active.item {
-  box-shadow: none;
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-  border-radius: 0.28571429rem;
-}
-
-/* Active Hover */
-
-.ui.secondary.menu .active.item:hover {
-  box-shadow: none;
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/* Fix item margins */
-
-.ui.secondary.item.menu {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.ui.secondary.item.menu .item:last-child {
-  margin-right: 0;
-}
-
-.ui.secondary.attached.menu {
-  box-shadow: none;
-}
-
-/*---------------------
-       Secondary Vertical
-    -----------------------*/
-
-/* Sub Menu */
-
-.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
-  margin: 0 -0.92857143em;
-}
-
-.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
-  margin: 0;
-  padding: 0.5em 1.33333333em;
-}
-
-.ui.secondary.vertical.menu > .item {
-  border: none;
-  margin: 0 0 0.35714286em;
-  border-radius: 0.28571429rem !important;
-}
-
-.ui.secondary.vertical.menu > .header.item {
-  border-radius: 0;
-}
-
-/* Sub Menu */
-
-.ui.vertical.secondary.menu .item > .menu .item {
-  background-color: transparent;
-}
-
-/* Inverted */
-
-.ui.secondary.inverted.menu {
-  background-color: transparent;
-}
-
-/*---------------------
-       Secondary Pointing
-    -----------------------*/
-
-.ui.secondary.pointing.menu {
-  margin-left: 0;
-  margin-right: 0;
-  border-bottom: 2px solid rgba(34, 36, 38, 0.15);
-}
-
-.ui.secondary.pointing.menu .item {
-  border-bottom-color: transparent;
-  border-bottom-style: solid;
-  border-radius: 0;
-  align-self: flex-end;
-  margin: 0 0 -2px;
-  padding: 0.85714286em 1.14285714em;
-  border-bottom-width: 2px;
-  transition: color 0.1s ease;
-}
-
-.ui.secondary.pointing.menu .ui.dropdown .menu .item {
-  border-bottom-width: 0;
-}
-
-.ui.secondary.pointing.menu .item > .label:not(.floating) {
-  margin-top: -0.3em;
-  margin-bottom: -0.3em;
-}
-
-.ui.secondary.pointing.menu .item > .circular.label {
-  margin-top: -0.5em;
-  margin-bottom: -0.5em;
-}
-
-/* Item Types */
-
-.ui.secondary.pointing.menu .header.item {
-  color: rgba(0, 0, 0, 0.85) !important;
-}
-
-.ui.secondary.pointing.menu .text.item {
-  box-shadow: none !important;
-}
-
-.ui.secondary.pointing.menu .item:after {
-  display: none;
-}
-
-/* Hover */
-
-.ui.secondary.pointing.menu .dropdown.item:hover,
-.ui.secondary.pointing.menu .link.item:hover,
-.ui.secondary.pointing.menu a.item:hover {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-/* Pressed */
-
-.ui.secondary.pointing.menu .dropdown.item:active,
-.ui.secondary.pointing.menu .link.item:active,
-.ui.secondary.pointing.menu a.item:active {
-  background-color: transparent;
-  border-color: rgba(34, 36, 38, 0.15);
-}
-
-/* Active */
-
-.ui.secondary.pointing.menu .active.item {
-  background-color: transparent;
-  box-shadow: none;
-  border-color: currentColor;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/* Active Hover */
-
-.ui.secondary.pointing.menu .active.item:hover {
-  border-color: currentColor;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/* Active Dropdown */
-
-.ui.secondary.pointing.menu .active.dropdown.item {
-  border-color: transparent;
-}
-
-/* Vertical Pointing */
-
-.ui.secondary.vertical.pointing.menu {
-  border-bottom-width: 0;
-  border-right-width: 2px;
-  border-right-style: solid;
-  border-right-color: rgba(34, 36, 38, 0.15);
-}
-
-.ui.secondary.vertical.pointing.menu .item {
-  border-bottom: none;
-  border-right-style: solid;
-  border-right-color: transparent;
-  border-radius: 0 !important;
-  margin: 0 -2px 0 0;
-  border-right-width: 2px;
-}
-
-/* Vertical Active */
-
-.ui.secondary.vertical.pointing.menu .active.item {
-  border-color: currentColor;
-}
-
-/*--------------
-      Text Menu
-  ---------------*/
-
-.ui.text.menu {
-  background: none transparent;
-  border-radius: 0;
-  box-shadow: none;
-  border: none;
-  margin: 1em -0.5em;
-}
-
-.ui.text.menu .item {
-  border-radius: 0;
-  box-shadow: none;
-  align-self: center;
-  margin: 0 0;
-  padding: 0.35714286em 0.5em;
-  font-weight: normal;
-  color: rgba(0, 0, 0, 0.6);
-  transition: opacity 0.1s ease;
-}
-
-/* Border */
-
-.ui.text.menu .item:before,
-.ui.text.menu .menu .item:before {
-  display: none !important;
-}
-
-/* Header */
-
-.ui.text.menu .header.item {
-  background-color: transparent;
-  opacity: 1;
-  color: rgba(0, 0, 0, 0.85);
-  font-size: 0.92857143em;
-  text-transform: uppercase;
-  font-weight: 500;
-}
-
-/* Image */
-
-.ui.text.menu .item > img:not(.ui) {
-  margin: 0;
-}
-
-/*--- fluid text ---*/
-
-.ui.text.item.menu .item {
-  margin: 0;
-}
-
-/*--- vertical text ---*/
-
-.ui.vertical.text.menu {
-  margin: 1em 0;
-}
-
-.ui.vertical.text.menu:first-child {
-  margin-top: 0;
-}
-
-.ui.vertical.text.menu:last-child {
-  margin-bottom: 0;
-}
-
-.ui.vertical.text.menu .item {
-  margin: 0.57142857em 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.ui.vertical.text.menu .item > i.icon {
-  float: none;
-  margin: 0 0.35714286em 0 0;
-}
-
-.ui.vertical.text.menu .header.item {
-  margin: 0.57142857em 0 0.71428571em;
-}
-
-/* Vertical Sub Menu */
-
-.ui.vertical.text.menu .item:not(.dropdown) > .menu {
-  margin: 0;
-}
-
-.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
-  margin: 0;
-  padding: 0.5em 0;
-}
-
-/*--- hover ---*/
-
-.ui.text.menu .item:hover {
-  opacity: 1;
-  background-color: transparent;
-}
-
-/*--- active ---*/
-
-.ui.text.menu .active.item {
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-  font-weight: normal;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*--- active hover ---*/
-
-.ui.text.menu .active.item:hover {
-  background-color: transparent;
-}
-
-/* Disable Bariations */
-
-.ui.text.pointing.menu .active.item:after {
-  box-shadow: none;
-}
-
-.ui.text.attached.menu {
-  box-shadow: none;
-}
-
-/* Fluid */
-
-.ui.fluid.text.menu {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-/*--------------
-    Icon Only
----------------*/
-
-/* Vertical Menu */
-
-.ui.vertical.icon.menu {
-  display: inline-block;
-  width: auto;
-}
-
-/* Item */
-
-.ui.icon.menu .item {
-  height: auto;
-  text-align: center;
-  color: #1B1C1D;
-}
-
-/* Icon */
-
-.ui.icon.menu .item > i.icon:not(.dropdown) {
-  margin: 0;
-  opacity: 1;
-}
-
-/* Icon Gylph */
-
-.ui.icon.menu i.icon:before {
-  opacity: 1;
-}
-
-/* (x) Item Icon */
-
-.ui.menu .icon.item > i.icon {
-  width: auto;
-  margin: 0 auto;
-}
-
-/* Vertical Icon */
-
-.ui.vertical.icon.menu .item > i.icon:not(.dropdown) {
-  display: block;
-  opacity: 1;
-  margin: 0 auto;
-  float: none;
-}
-
-/* Inverted */
-
-.ui.inverted.icon.menu .item {
-  color: #FFFFFF;
-}
-
-/*--------------
-     Labeled Icon
-  ---------------*/
-
-/* Menu */
-
-.ui.labeled.icon.menu {
-  text-align: center;
-}
-
-/* Item */
-
-.ui.labeled.icon.menu .item {
-  min-width: 6em;
-  flex-direction: column;
-}
-
-/* Icon */
-
-.ui.labeled.icon.menu > .item > i.icon:not(.dropdown) {
-  height: 1em;
-  display: block;
-  font-size: 1.71428571em !important;
-  margin: 0 auto 0.5rem !important;
-}
-
-/* Fluid */
-
-.ui.fluid.labeled.icon.menu > .item {
-  min-width: 0;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*--------------
-      Stackable
-  ---------------*/
-
-@media only screen and (max-width: 767.98px) {
-  .ui.stackable.menu {
-    flex-direction: column;
-  }
-
-  .ui.stackable.menu .item {
-    width: 100% !important;
-  }
-
-  .ui.stackable.menu .item:before {
-    position: absolute;
-    content: '';
-    top: auto;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 1px;
-    background: rgba(34, 36, 38, 0.1);
-  }
-
-  .ui.stackable.menu .left.menu,
-  .ui.stackable.menu .left.item {
-    margin-right: 0 !important;
-  }
-
-  .ui.stackable.menu .right.menu,
-  .ui.stackable.menu .right.item {
-    margin-left: 0 !important;
-  }
-
-  .ui.stackable.menu .center.menu,
-  .ui.stackable.menu .center.item {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-
-  .ui.stackable.menu .right.menu,
-  .ui.stackable.menu .center.menu,
-  .ui.stackable.menu .left.menu {
-    flex-direction: column;
-  }
-}
-
-/*--------------
-     Colors
----------------*/
-
-.ui.ui.ui.menu .primary.active.item,
-.ui.ui.primary.menu .active.item:hover,
-.ui.ui.primary.menu .active.item {
-  color: #2185D0;
-}
-
-.ui.ui.ui.menu .red.active.item,
-.ui.ui.red.menu .active.item:hover,
-.ui.ui.red.menu .active.item {
-  color: #DB2828;
-}
-
-.ui.ui.ui.menu .orange.active.item,
-.ui.ui.orange.menu .active.item:hover,
-.ui.ui.orange.menu .active.item {
-  color: #F2711C;
-}
-
-.ui.ui.ui.menu .yellow.active.item,
-.ui.ui.yellow.menu .active.item:hover,
-.ui.ui.yellow.menu .active.item {
-  color: #FBBD08;
-}
-
-.ui.ui.ui.menu .olive.active.item,
-.ui.ui.olive.menu .active.item:hover,
-.ui.ui.olive.menu .active.item {
-  color: #B5CC18;
-}
-
-.ui.ui.ui.menu .green.active.item,
-.ui.ui.green.menu .active.item:hover,
-.ui.ui.green.menu .active.item {
-  color: #21BA45;
-}
-
-.ui.ui.ui.menu .teal.active.item,
-.ui.ui.teal.menu .active.item:hover,
-.ui.ui.teal.menu .active.item {
-  color: #00B5AD;
-}
-
-.ui.ui.ui.menu .blue.active.item,
-.ui.ui.blue.menu .active.item:hover,
-.ui.ui.blue.menu .active.item {
-  color: #2185D0;
-}
-
-.ui.ui.ui.menu .violet.active.item,
-.ui.ui.violet.menu .active.item:hover,
-.ui.ui.violet.menu .active.item {
-  color: #6435C9;
-}
-
-.ui.ui.ui.menu .purple.active.item,
-.ui.ui.purple.menu .active.item:hover,
-.ui.ui.purple.menu .active.item {
-  color: #A333C8;
-}
-
-.ui.ui.ui.menu .pink.active.item,
-.ui.ui.pink.menu .active.item:hover,
-.ui.ui.pink.menu .active.item {
-  color: #E03997;
-}
-
-.ui.ui.ui.menu .brown.active.item,
-.ui.ui.brown.menu .active.item:hover,
-.ui.ui.brown.menu .active.item {
-  color: #A5673F;
-}
-
-.ui.ui.ui.menu .grey.active.item,
-.ui.ui.grey.menu .active.item:hover,
-.ui.ui.grey.menu .active.item {
-  color: #767676;
-}
-
-.ui.ui.ui.menu .black.active.item,
-.ui.ui.black.menu .active.item:hover,
-.ui.ui.black.menu .active.item {
-  color: #1B1C1D;
-}
-
-/*--------------
-       Floated
-  ---------------*/
-
-.ui.floated.menu {
-  float: left;
-  margin: 0 0.5rem 0 0;
-}
-
-.ui.floated.menu .item:last-child:before {
-  display: none;
-}
-
-.ui.right.floated.menu {
-  float: right;
-  margin: 0 0 0 0.5rem;
-}
-
-/*--------------
-       Fitted
-  ---------------*/
-
-.ui.fitted.menu .item,
-.ui.fitted.menu .item .menu .item,
-.ui.menu .fitted.item {
-  padding: 0;
-}
-
-.ui.horizontally.fitted.menu .item,
-.ui.horizontally.fitted.menu .item .menu .item,
-.ui.menu .horizontally.fitted.item {
-  padding-top: 0.92857143em;
-  padding-bottom: 0.92857143em;
-}
-
-.ui.vertically.fitted.menu .item,
-.ui.vertically.fitted.menu .item .menu .item,
-.ui.menu .vertically.fitted.item {
-  padding-left: 1.14285714em;
-  padding-right: 1.14285714em;
-}
-
-/*--------------
-     Borderless
-  ---------------*/
-
-.ui.borderless.menu .item:before,
-.ui.borderless.menu .item .menu .item:before,
-.ui.menu .borderless.item:before {
-  background: none !important;
-}
-
-/*-------------------
-         Compact
-  --------------------*/
-
-.ui.compact.menu {
-  display: inline-flex;
-  margin: 0;
-  vertical-align: middle;
-}
-
-.ui.compact.vertical.menu {
-  /* IE hack to make dropdown icons appear inline */
-  display: -ms-inline-flexbox !important;
-  display: inline-block;
-}
-
-.ui.compact.menu:not(.secondary) .item:last-child {
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-}
-
-.ui.compact.menu .item:last-child:before {
-  display: none;
-}
-
-.ui.compact.vertical.menu {
-  width: auto !important;
-}
-
-.ui.compact.vertical.menu .item:last-child::before {
-  display: block;
-}
-
-/*-------------------
-          Fluid
-  --------------------*/
-
-.ui.menu.fluid,
-.ui.vertical.menu.fluid {
-  width: 100% !important;
-}
-
-/*-------------------
-      Evenly Sized
---------------------*/
-
-.ui.item.menu,
-.ui.item.menu .item {
-  width: 100%;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  text-align: center;
-  justify-content: center;
-}
-
-.ui.attached.item.menu:not(.tabular) {
-  margin: 0 -1px !important;
-}
-
-.ui.item.menu .item:last-child:before {
-  display: none;
-}
-
-.ui.menu.two.item .item {
-  width: 50%;
-}
-
-.ui.menu.three.item .item {
-  width: 33.333%;
-}
-
-.ui.menu.four.item .item {
-  width: 25%;
-}
-
-.ui.menu.five.item .item {
-  width: 20%;
-}
-
-.ui.menu.six.item .item {
-  width: 16.666%;
-}
-
-.ui.menu.seven.item .item {
-  width: 14.285%;
-}
-
-.ui.menu.eight.item .item {
-  width: 12.5%;
-}
-
-.ui.menu.nine.item .item {
-  width: 11.11%;
-}
-
-.ui.menu.ten.item .item {
-  width: 10%;
-}
-
-.ui.menu.eleven.item .item {
-  width: 9.09%;
-}
-
-.ui.menu.twelve.item .item {
-  width: 8.333%;
-}
-
-/*--------------
-       Fixed
-  ---------------*/
-
-.ui.menu.fixed {
-  position: fixed;
-  z-index: 101;
-  margin: 0;
-  width: 100%;
-}
-
-.ui.menu.fixed,
-.ui.menu.fixed .item:first-child,
-.ui.menu.fixed .item:last-child {
-  border-radius: 0 !important;
-}
-
-.ui.fixed.menu,
-.ui[class*="top fixed"].menu {
-  top: 0;
-  left: 0;
-  right: auto;
-  bottom: auto;
-}
-
-.ui[class*="top fixed"].menu {
-  border-top: none;
-  border-left: none;
-  border-right: none;
-}
-
-.ui[class*="right fixed"].menu {
-  border-top: none;
-  border-bottom: none;
-  border-right: none;
-  top: 0;
-  right: 0;
-  left: auto;
-  bottom: auto;
-  width: auto;
-  height: 100%;
-}
-
-.ui[class*="bottom fixed"].menu {
-  border-bottom: none;
-  border-left: none;
-  border-right: none;
-  bottom: 0;
-  left: 0;
-  top: auto;
-  right: auto;
-}
-
-.ui[class*="left fixed"].menu {
-  border-top: none;
-  border-bottom: none;
-  border-left: none;
-  top: 0;
-  left: 0;
-  right: auto;
-  bottom: auto;
-  width: auto;
-  height: 100%;
-}
-
-/* Coupling with Grid */
-
-.ui.fixed.menu + .ui.grid {
-  padding-top: 2.75rem;
-}
-
-/*-------------------
-         Pointing
-  --------------------*/
-
-.ui.pointing.menu .item:after {
-  visibility: hidden;
-  position: absolute;
-  content: '';
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  background: none;
-  margin: 0.5px 0 0;
-  width: 0.57142857em;
-  height: 0.57142857em;
-  border: none;
-  border-bottom: 1px solid #D4D4D5;
-  border-right: 1px solid #D4D4D5;
-  z-index: 2;
-  transition: background 0.1s ease;
-}
-
-.ui.vertical.pointing.menu .item:after {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  bottom: auto;
-  left: auto;
-  transform: translateX(50%) translateY(-50%) rotate(45deg);
-  margin: 0 -0.5px 0 0;
-  border: none;
-  border-top: 1px solid #D4D4D5;
-  border-right: 1px solid #D4D4D5;
-}
-
-.ui.pointing.menu .ui.dropdown .menu .item:after,
-.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
-  display: none;
-}
-
-/* Active */
-
-.ui.pointing.menu .active.item:after {
-  visibility: visible;
-}
-
-.ui.pointing.menu .active.dropdown.item:after {
-  visibility: hidden;
-}
-
-/* Don't double up pointers */
-
-.ui.pointing.menu .dropdown.active.item:after,
-.ui.pointing.menu .active.item .menu .active.item:after {
-  display: none;
-}
-
-/* Colors */
-
-.ui.pointing.menu .active.item:hover:after {
-  background-color: #F2F2F2;
-}
-
-.ui.pointing.menu .active.item:after {
-  background-color: #F2F2F2;
-}
-
-.ui.pointing.menu .active.item:hover:after {
-  background-color: #F2F2F2;
-}
-
-.ui.vertical.pointing.menu .active.item:hover:after {
-  background-color: #F2F2F2;
-}
-
-.ui.vertical.pointing.menu .active.item:after {
-  background-color: #F2F2F2;
-}
-
-.ui.vertical.pointing.menu .menu .active.item:after {
-  background-color: #FFFFFF;
-}
-
-.ui.inverted.pointing.menu .primary.active.item:after {
-  background-color: #2185D0;
-}
-
-.ui.inverted.pointing.menu .secondary.active.item:after {
-  background-color: #1B1C1D;
-}
-
-.ui.inverted.pointing.menu .red.active.item:after {
-  background-color: #DB2828;
-}
-
-.ui.inverted.pointing.menu .orange.active.item:after {
-  background-color: #F2711C;
-}
-
-.ui.inverted.pointing.menu .yellow.active.item:after {
-  background-color: #FBBD08;
-}
-
-.ui.inverted.pointing.menu .olive.active.item:after {
-  background-color: #B5CC18;
-}
-
-.ui.inverted.pointing.menu .green.active.item:after {
-  background-color: #21BA45;
-}
-
-.ui.inverted.pointing.menu .teal.active.item:after {
-  background-color: #00B5AD;
-}
-
-.ui.inverted.pointing.menu .blue.active.item:after {
-  background-color: #2185D0;
-}
-
-.ui.inverted.pointing.menu .violet.active.item:after {
-  background-color: #6435C9;
-}
-
-.ui.inverted.pointing.menu .purple.active.item:after {
-  background-color: #A333C8;
-}
-
-.ui.inverted.pointing.menu .pink.active.item:after {
-  background-color: #E03997;
-}
-
-.ui.inverted.pointing.menu .brown.active.item:after {
-  background-color: #A5673F;
-}
-
-.ui.inverted.pointing.menu .grey.active.item:after {
-  background-color: #767676;
-}
-
-.ui.inverted.pointing.menu .black.active.item:after {
-  background-color: #1B1C1D;
-}
-
-/*--------------
-      Attached
-  ---------------*/
-
-/* Middle */
-
-.ui.attached.menu {
-  top: 0;
-  bottom: 0;
-  border-radius: 0;
-  margin: 0 -1px;
-  width: calc(100% + 2px);
-  max-width: calc(100% + 2px);
-  box-shadow: none;
-}
-
-.ui.attached + .ui.attached.menu:not(.top) {
-  border-top: none;
-}
-
-/* Top */
-
-.ui[class*="top attached"].menu {
-  bottom: 0;
-  margin-bottom: 0;
-  top: 0;
-  margin-top: 1rem;
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
-}
-
-.ui.menu[class*="top attached"]:first-child {
-  margin-top: 0;
-}
-
-/* Bottom */
-
-.ui[class*="bottom attached"].menu {
-  bottom: 0;
-  margin-top: 0;
-  top: 0;
-  margin-bottom: 1rem;
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
-}
-
-.ui[class*="bottom attached"].menu:last-child {
-  margin-bottom: 0;
-}
-
-/* Attached Menu Item */
-
-.ui.top.attached.menu > .item:first-child {
-  border-radius: 0.28571429rem 0 0 0;
-}
-
-.ui.bottom.attached.menu > .item:first-child {
-  border-radius: 0 0 0 0.28571429rem;
-}
-
-/* Tabular Attached */
-
-.ui.attached.menu:not(.tabular) {
-  border: 1px solid #D4D4D5;
-}
-
-.ui.attached.tabular.menu {
-  margin-left: 0;
-  margin-right: 0;
-  width: 100%;
-}
-
-/*--------------
-     Sizes
----------------*/
-
-.ui.menu {
-  font-size: 1rem;
-}
-
-.ui.vertical.menu {
-  width: 15rem;
-}
-
-.ui.mini.menu,
-.ui.mini.menu .dropdown,
-.ui.mini.menu .dropdown .menu > .item {
-  font-size: 0.78571429rem;
-}
-
-.ui.mini.vertical.menu:not(.icon) {
-  width: 9rem;
-}
-
-.ui.tiny.menu,
-.ui.tiny.menu .dropdown,
-.ui.tiny.menu .dropdown .menu > .item {
-  font-size: 0.85714286rem;
-}
-
-.ui.tiny.vertical.menu:not(.icon) {
-  width: 11rem;
-}
-
-.ui.small.menu,
-.ui.small.menu .dropdown,
-.ui.small.menu .dropdown .menu > .item {
-  font-size: 0.92857143rem;
-}
-
-.ui.small.vertical.menu:not(.icon) {
-  width: 13rem;
-}
-
-.ui.large.menu,
-.ui.large.menu .dropdown,
-.ui.large.menu .dropdown .menu > .item {
-  font-size: 1.07142857rem;
-}
-
-.ui.large.vertical.menu:not(.icon) {
-  width: 18rem;
-}
-
-.ui.big.menu,
-.ui.big.menu .dropdown,
-.ui.big.menu .dropdown .menu > .item {
-  font-size: 1.14285714rem;
-}
-
-.ui.big.vertical.menu:not(.icon) {
-  width: 20rem;
-}
-
-.ui.huge.menu,
-.ui.huge.menu .dropdown,
-.ui.huge.menu .dropdown .menu > .item {
-  font-size: 1.21428571rem;
-}
-
-.ui.huge.vertical.menu:not(.icon) {
-  width: 22rem;
-}
-
-.ui.massive.menu,
-.ui.massive.menu .dropdown,
-.ui.massive.menu .dropdown .menu > .item {
-  font-size: 1.28571429rem;
-}
-
-.ui.massive.vertical.menu:not(.icon) {
-  width: 25rem;
-}
-
-/*-------------------
-  Inverted dropdowns
---------------------*/
-
-.ui.menu .ui.inverted.inverted.dropdown.item .menu {
-  background: #1B1C1D;
-  box-shadow: none;
-}
-
-.ui.menu .ui.inverted.dropdown .menu > .item {
-  color: rgba(255, 255, 255, 0.8) !important;
-}
-
-.ui.menu .ui.inverted.dropdown .menu > .active.item {
-  background: transparent !important;
-  color: rgba(255, 255, 255, 0.8) !important;
-}
-
-.ui.menu .ui.inverted.dropdown .menu > .item:hover {
-  background: rgba(255, 255, 255, 0.08) !important;
-  color: rgba(255, 255, 255, 0.8) !important;
-}
-
-.ui.menu .ui.inverted.dropdown .menu > .selected.item {
-  background: rgba(255, 255, 255, 0.15) !important;
-  color: rgba(255, 255, 255, 0.8) !important;
-}
-
-/* Vertical */
-
-.ui.vertical.menu .inverted.dropdown.item .menu {
-  box-shadow: none;
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-/*******************************
-         Site Overrides
-*******************************/
 /*!
  * # Fomantic-UI - Modal
  * http://github.com/fomantic/Fomantic-UI/
diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json
index 5db57bc8d4..5b3a480d53 100644
--- a/web_src/fomantic/semantic.json
+++ b/web_src/fomantic/semantic.json
@@ -26,7 +26,6 @@
     "dimmer",
     "dropdown",
     "form",
-    "menu",
     "modal",
     "search",
     "tab"