Remove fomantic dimmer module (#30723)

Tested extensively using modal which is the only dependant.

8 files changed, 62 insertions, 1116 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 58a5723cb5..df9028b50a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -680,10 +680,6 @@ input:-webkit-autofill:active,
   box-shadow: 0 6px 18px var(--color-shadow) !important;
 }
 
-.ui.dimmer {
-  background: var(--color-overlay-backdrop);
-}
-
 .ui.dropdown .menu > .header {
   font-size: 0.8em;
 }
diff --git a/web_src/css/index.css b/web_src/css/index.css
index edd6cdca8b..817f6997da 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -16,6 +16,7 @@
 @import "./modules/table.css";
 @import "./modules/card.css";
 @import "./modules/checkbox.css";
+@import "./modules/dimmer.css";
 @import "./modules/modal.css";
 
 @import "./modules/select.css";
diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css
new file mode 100644
index 0000000000..a552d103e5
--- /dev/null
+++ b/web_src/css/modules/dimmer.css
@@ -0,0 +1,30 @@
+/* These are the remnants of the fomantic dimmer module */
+
+.ui.dimmer {
+  position: fixed;
+  display: none;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-overlay-backdrop);
+  opacity: 0;
+  z-index: 1000;
+  overflow-y: auto;
+  justify-content: center;
+  padding: 8px 0;
+  animation-name: fadein;
+  animation-duration: .2s;
+  user-select: none;
+}
+
+.ui.active.dimmer {
+  display: flex;
+  opacity: 1;
+}
+
+.ui.dimmer > * {
+  position: static;
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 7c404bdb30..aef7a6bdbe 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -9,363 +9,6 @@
  *
  */
 /*!
- * # Fomantic-UI - Dimmer
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Dimmer
-*******************************/
-
-.dimmable:not(body) {
-  position: relative;
-}
-
-.ui.dimmer {
-  display: none;
-  position: absolute;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  vertical-align: middle;
-  padding: 1em;
-  background: rgba(0, 0, 0, 0.85);
-  opacity: 0;
-  line-height: 1;
-  animation-fill-mode: both;
-  animation-duration: 0.5s;
-  transition: background-color 0.5s linear;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  will-change: opacity;
-  z-index: 1000;
-}
-
-/* Dimmer Content */
-
-.ui.dimmer > .content {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-  color: #FFFFFF;
-}
-
-/* Loose Coupling */
-
-.ui.segment > .ui.dimmer:not(.page) {
-  border-radius: inherit;
-}
-
-/* Scrollbars */
-
-/*******************************
-            States
-*******************************/
-
-/* Animating */
-
-.animating.dimmable:not(body),
-.dimmed.dimmable:not(body) {
-  overflow: hidden;
-}
-
-/* Animating / Active / Visible */
-
-.dimmed.dimmable > .ui.animating.dimmer,
-.dimmed.dimmable > .ui.visible.dimmer,
-.ui.active.dimmer {
-  display: flex;
-  opacity: 1;
-}
-
-/* Disabled */
-
-.ui.disabled.dimmer {
-  width: 0 !important;
-  height: 0 !important;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*--------------
-      Legacy
-  ---------------*/
-
-/* Animating / Active / Visible */
-
-.dimmed.dimmable > .ui.animating.legacy.dimmer,
-.dimmed.dimmable > .ui.visible.legacy.dimmer,
-.ui.active.legacy.dimmer {
-  display: block;
-}
-
-/*--------------
-      Alignment
-  ---------------*/
-
-.ui[class*="top aligned"].dimmer {
-  justify-content: flex-start;
-}
-
-.ui[class*="bottom aligned"].dimmer {
-  justify-content: flex-end;
-}
-
-/*--------------
-        Page
-  ---------------*/
-
-.ui.page.dimmer {
-  position: fixed;
-  transform-style: '';
-  perspective: 2000px;
-  transform-origin: center center;
-}
-
-.ui.page.dimmer.modals {
-  -moz-perspective: none;
-}
-
-body.animating.in.dimmable,
-body.dimmed.dimmable {
-  overflow: hidden;
-}
-
-body.dimmable > .dimmer {
-  position: fixed;
-}
-
-/*--------------
-      Blurring
-  ---------------*/
-
-.blurring.dimmable > :not(.dimmer) {
-  filter: initial;
-  transition: 800ms filter ease;
-}
-
-.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
-  filter: blur(5px) grayscale(0.7);
-}
-
-/* Dimmer Color */
-
-.blurring.dimmable > .dimmer {
-  background: rgba(0, 0, 0, 0.6);
-}
-
-.blurring.dimmable > .inverted.dimmer {
-  background: rgba(255, 255, 255, 0.6);
-}
-
-/*--------------
-      Aligned
-  ---------------*/
-
-.ui.dimmer > .top.aligned.content > * {
-  vertical-align: top;
-}
-
-.ui.dimmer > .bottom.aligned.content > * {
-  vertical-align: bottom;
-}
-
-/*--------------
-      Shades
-  ---------------*/
-
-.medium.medium.medium.medium.medium.dimmer {
-  background: rgba(0, 0, 0, 0.65);
-}
-
-.light.light.light.light.light.dimmer {
-  background: rgba(0, 0, 0, 0.45);
-}
-
-.very.light.light.light.light.dimmer {
-  background: rgba(0, 0, 0, 0.25);
-}
-
-/*--------------
-       Simple
-  ---------------*/
-
-/* Displays without javascript */
-
-.ui.simple.dimmer {
-  display: block;
-  overflow: hidden;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  z-index: -100;
-  background: rgba(0, 0, 0, 0);
-}
-
-.dimmed.dimmable > .ui.simple.dimmer {
-  overflow: visible;
-  opacity: 1;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.85);
-  z-index: 1;
-}
-
-.ui.simple.inverted.dimmer {
-  background: rgba(255, 255, 255, 0);
-}
-
-.dimmed.dimmable > .ui.simple.inverted.dimmer {
-  background: rgba(255, 255, 255, 0.85);
-}
-
-/*--------------
-       Partially
-  ----------------*/
-
-.ui[class*="top dimmer"],
-.ui[class*="center dimmer"],
-.ui[class*="bottom dimmer"] {
-  height: auto;
-}
-
-.ui[class*="bottom dimmer"] {
-  top: auto !important;
-  bottom: 0;
-}
-
-.ui[class*="center dimmer"] {
-  top: 50% !important;
-  transform: translateY(-50%);
-  -webkit-transform: translateY(calc(-50% - 0.5px));
-}
-
-.ui.segment > .ui.ui[class*="top dimmer"] {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ui.segment > .ui.ui[class*="center dimmer"] {
-  border-radius: 0;
-}
-
-.ui.segment > .ui.ui[class*="bottom dimmer"] {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.ui[class*="center dimmer"].transition[class*="fade up"].in {
-  animation-name: fadeInUpCenter;
-}
-
-.ui[class*="center dimmer"].transition[class*="fade down"].in {
-  animation-name: fadeInDownCenter;
-}
-
-.ui[class*="center dimmer"].transition[class*="fade up"].out {
-  animation-name: fadeOutUpCenter;
-}
-
-.ui[class*="center dimmer"].transition[class*="fade down"].out {
-  animation-name: fadeOutDownCenter;
-}
-
-.ui[class*="center dimmer"].bounce.transition {
-  animation-name: bounceCenter;
-}
-
-@keyframes fadeInUpCenter {
-  0% {
-    opacity: 0;
-    transform: translateY(-40%);
-    -webkit-transform: translateY(calc(-40% - 0.5px));
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-}
-
-@keyframes fadeInDownCenter {
-  0% {
-    opacity: 0;
-    transform: translateY(-60%);
-    -webkit-transform: translateY(calc(-60% - 0.5px));
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-}
-
-@keyframes fadeOutUpCenter {
-  0% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(-45%);
-    -webkit-transform: translateY(calc(-45% - 0.5px));
-  }
-}
-
-@keyframes fadeOutDownCenter {
-  0% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(-55%);
-    -webkit-transform: translateY(calc(-55% - 0.5px));
-  }
-}
-
-@keyframes bounceCenter {
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-
-  40% {
-    transform: translateY(calc(-50% - 30px));
-  }
-
-  60% {
-    transform: translateY(calc(-50% - 15px));
-  }
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-/*******************************
-        User Overrides
-*******************************/
-/*!
  * # Fomantic-UI - Dropdown
  * http://github.com/fomantic/Fomantic-UI/
  *
diff --git a/web_src/fomantic/build/semantic.js b/web_src/fomantic/build/semantic.js
index c150c8d9db..1297216a31 100644
--- a/web_src/fomantic/build/semantic.js
+++ b/web_src/fomantic/build/semantic.js
@@ -1187,760 +1187,6 @@ $.api.settings = {
 })( jQuery, window, document );
 
 /*!
- * # Fomantic-UI - Dimmer
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
-  return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
-  ? window
-  : (typeof self != 'undefined' && self.Math == Math)
-    ? self
-    : Function('return this')()
-;
-
-$.fn.dimmer = function(parameters) {
-  var
-    $allModules     = $(this),
-
-    time            = new Date().getTime(),
-    performance     = [],
-
-    query           = arguments[0],
-    methodInvoked   = (typeof query == 'string'),
-    queryArguments  = [].slice.call(arguments, 1),
-
-    returnedValue
-  ;
-
-  $allModules
-    .each(function() {
-      var
-        settings        = ( $.isPlainObject(parameters) )
-          ? $.extend(true, {}, $.fn.dimmer.settings, parameters)
-          : $.extend({}, $.fn.dimmer.settings),
-
-        selector        = settings.selector,
-        namespace       = settings.namespace,
-        className       = settings.className,
-        error           = settings.error,
-
-        eventNamespace  = '.' + namespace,
-        moduleNamespace = 'module-' + namespace,
-        moduleSelector  = $allModules.selector || '',
-
-        clickEvent = "click", unstableClickEvent = ('ontouchstart' in document.documentElement)
-          ? 'touchstart'
-          : 'click',
-
-        $module = $(this),
-        $dimmer,
-        $dimmable,
-
-        element   = this,
-        instance  = $module.data(moduleNamespace),
-        module
-      ;
-
-      module = {
-
-        preinitialize: function() {
-          if( module.is.dimmer() ) {
-
-            $dimmable = $module.parent();
-            $dimmer   = $module;
-          }
-          else {
-            $dimmable = $module;
-            if( module.has.dimmer() ) {
-              if(settings.dimmerName) {
-                $dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName);
-              }
-              else {
-                $dimmer = $dimmable.find(selector.dimmer);
-              }
-            }
-            else {
-              $dimmer = module.create();
-            }
-          }
-        },
-
-        initialize: function() {
-          module.debug('Initializing dimmer', settings);
-
-          module.bind.events();
-          module.set.dimmable();
-          module.instantiate();
-        },
-
-        instantiate: function() {
-          module.verbose('Storing instance of module', module);
-          instance = module;
-          $module
-            .data(moduleNamespace, instance)
-          ;
-        },
-
-        destroy: function() {
-          module.verbose('Destroying previous module', $dimmer);
-          module.unbind.events();
-          module.remove.variation();
-          $dimmable
-            .off(eventNamespace)
-          ;
-        },
-
-        bind: {
-          events: function() {
-            if(settings.on == 'hover') {
-              $dimmable
-                .on('mouseenter' + eventNamespace, module.show)
-                .on('mouseleave' + eventNamespace, module.hide)
-              ;
-            }
-            else if(settings.on == 'click') {
-              $dimmable
-                .on(clickEvent + eventNamespace, module.toggle)
-              ;
-            }
-            if( module.is.page() ) {
-              module.debug('Setting as a page dimmer', $dimmable);
-              module.set.pageDimmer();
-            }
-
-            if( module.is.closable() ) {
-              module.verbose('Adding dimmer close event', $dimmer);
-              $dimmable
-                .on(clickEvent + eventNamespace, selector.dimmer, module.event.click)
-              ;
-            }
-          }
-        },
-
-        unbind: {
-          events: function() {
-            $module
-              .removeData(moduleNamespace)
-            ;
-            $dimmable
-              .off(eventNamespace)
-            ;
-          }
-        },
-
-        event: {
-          click: function(event) {
-            module.verbose('Determining if event occured on dimmer', event);
-            if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
-              module.hide();
-              event.stopImmediatePropagation();
-            }
-          }
-        },
-
-        addContent: function(element) {
-          var
-            $content = $(element)
-          ;
-          module.debug('Add content to dimmer', $content);
-          if($content.parent()[0] !== $dimmer[0]) {
-            $content.detach().appendTo($dimmer);
-          }
-        },
-
-        create: function() {
-          var
-            $element = $( settings.template.dimmer(settings) )
-          ;
-          if(settings.dimmerName) {
-            module.debug('Creating named dimmer', settings.dimmerName);
-            $element.addClass(settings.dimmerName);
-          }
-          $element
-            .appendTo($dimmable)
-          ;
-          return $element;
-        },
-
-        show: function(callback) {
-          callback = $.isFunction(callback)
-            ? callback
-            : function(){}
-          ;
-          module.debug('Showing dimmer', $dimmer, settings);
-          module.set.variation();
-          if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
-            module.animate.show(callback);
-            settings.onShow.call(element);
-            settings.onChange.call(element);
-          }
-          else {
-            module.debug('Dimmer is already shown or disabled');
-          }
-        },
-
-        hide: function(callback) {
-          callback = $.isFunction(callback)
-            ? callback
-            : function(){}
-          ;
-          if( module.is.dimmed() || module.is.animating() ) {
-            module.debug('Hiding dimmer', $dimmer);
-            module.animate.hide(callback);
-            settings.onHide.call(element);
-            settings.onChange.call(element);
-          }
-          else {
-            module.debug('Dimmer is not visible');
-          }
-        },
-
-        toggle: function() {
-          module.verbose('Toggling dimmer visibility', $dimmer);
-          if( !module.is.dimmed() ) {
-            module.show();
-          }
-          else {
-            if ( module.is.closable() ) {
-              module.hide();
-            }
-          }
-        },
-
-        animate: {
-          show: function(callback) {
-            callback = $.isFunction(callback)
-              ? callback
-              : function(){}
-            ;
-            if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
-              if(settings.useFlex) {
-                module.debug('Using flex dimmer');
-                module.remove.legacy();
-              }
-              else {
-                module.debug('Using legacy non-flex dimmer');
-                module.set.legacy();
-              }
-              if(settings.opacity !== 'auto') {
-                module.set.opacity();
-              }
-              $dimmer
-                .transition({
-                  displayType : settings.useFlex
-                    ? 'flex'
-                    : 'block',
-                  animation   : settings.transition + ' in',
-                  queue       : false,
-                  duration    : module.get.duration(),
-                  useFailSafe : true,
-                  onStart     : function() {
-                    module.set.dimmed();
-                  },
-                  onComplete  : function() {
-                    module.set.active();
-                    callback();
-                  }
-                })
-              ;
-            }
-            else {
-              module.verbose('Showing dimmer animation with javascript');
-              module.set.dimmed();
-              if(settings.opacity == 'auto') {
-                settings.opacity = 0.8;
-              }
-              $dimmer
-                .stop()
-                .css({
-                  opacity : 0,
-                  width   : '100%',
-                  height  : '100%'
-                })
-                .fadeTo(module.get.duration(), settings.opacity, function() {
-                  $dimmer.removeAttr('style');
-                  module.set.active();
-                  callback();
-                })
-              ;
-            }
-          },
-          hide: function(callback) {
-            callback = $.isFunction(callback)
-              ? callback
-              : function(){}
-            ;
-            if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
-              module.verbose('Hiding dimmer with css');
-              $dimmer
-                .transition({
-                  displayType : settings.useFlex
-                    ? 'flex'
-                    : 'block',
-                  animation   : settings.transition + ' out',
-                  queue       : false,
-                  duration    : module.get.duration(),
-                  useFailSafe : true,
-                  onComplete  : function() {
-                    module.remove.dimmed();
-                    module.remove.variation();
-                    module.remove.active();
-                    callback();
-                  }
-                })
-              ;
-            }
-            else {
-              module.verbose('Hiding dimmer with javascript');
-              $dimmer
-                .stop()
-                .fadeOut(module.get.duration(), function() {
-                  module.remove.dimmed();
-                  module.remove.active();
-                  $dimmer.removeAttr('style');
-                  callback();
-                })
-              ;
-            }
-          }
-        },
-
-        get: {
-          dimmer: function() {
-            return $dimmer;
-          },
-          duration: function() {
-            if(typeof settings.duration == 'object') {
-              if( module.is.active() ) {
-                return settings.duration.hide;
-              }
-              else {
-                return settings.duration.show;
-              }
-            }
-            return settings.duration;
-          }
-        },
-
-        has: {
-          dimmer: function() {
-            if(settings.dimmerName) {
-              return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
-            }
-            else {
-              return ( $module.find(selector.dimmer).length > 0 );
-            }
-          }
-        },
-
-        is: {
-          active: function() {
-            return $dimmer.hasClass(className.active);
-          },
-          animating: function() {
-            return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
-          },
-          closable: function() {
-            if(settings.closable == 'auto') {
-              if(settings.on == 'hover') {
-                return false;
-              }
-              return true;
-            }
-            return settings.closable;
-          },
-          dimmer: function() {
-            return $module.hasClass(className.dimmer);
-          },
-          dimmable: function() {
-            return $module.hasClass(className.dimmable);
-          },
-          dimmed: function() {
-            return $dimmable.hasClass(className.dimmed);
-          },
-          disabled: function() {
-            return $dimmable.hasClass(className.disabled);
-          },
-          enabled: function() {
-            return !module.is.disabled();
-          },
-          page: function () {
-            return $dimmable.is('body');
-          },
-          pageDimmer: function() {
-            return $dimmer.hasClass(className.pageDimmer);
-          }
-        },
-
-        can: {
-          show: function() {
-            return !$dimmer.hasClass(className.disabled);
-          }
-        },
-
-        set: {
-          opacity: function(opacity) {
-            var
-              color      = $dimmer.css('background-color'),
-              colorArray = color.split(','),
-              isRGB      = (colorArray && colorArray.length >= 3)
-            ;
-            opacity    = settings.opacity === 0 ? 0 : settings.opacity || opacity;
-            if(isRGB) {
-              colorArray[2] = colorArray[2].replace(')','');
-              colorArray[3] = opacity + ')';
-              color         = colorArray.join(',');
-            }
-            else {
-              color = 'rgba(0, 0, 0, ' + opacity + ')';
-            }
-            module.debug('Setting opacity to', opacity);
-            $dimmer.css('background-color', color);
-          },
-          legacy: function() {
-            $dimmer.addClass(className.legacy);
-          },
-          active: function() {
-            $dimmer.addClass(className.active);
-          },
-          dimmable: function() {
-            $dimmable.addClass(className.dimmable);
-          },
-          dimmed: function() {
-            $dimmable.addClass(className.dimmed);
-          },
-          pageDimmer: function() {
-            $dimmer.addClass(className.pageDimmer);
-          },
-          disabled: function() {
-            $dimmer.addClass(className.disabled);
-          },
-          variation: function(variation) {
-            variation = variation || settings.variation;
-            if(variation) {
-              $dimmer.addClass(variation);
-            }
-          }
-        },
-
-        remove: {
-          active: function() {
-            $dimmer
-              .removeClass(className.active)
-            ;
-          },
-          legacy: function() {
-            $dimmer.removeClass(className.legacy);
-          },
-          dimmed: function() {
-            $dimmable.removeClass(className.dimmed);
-          },
-          disabled: function() {
-            $dimmer.removeClass(className.disabled);
-          },
-          variation: function(variation) {
-            variation = variation || settings.variation;
-            if(variation) {
-              $dimmer.removeClass(variation);
-            }
-          }
-        },
-
-        setting: function(name, value) {
-          module.debug('Changing setting', name, value);
-          if( $.isPlainObject(name) ) {
-            $.extend(true, settings, name);
-          }
-          else if(value !== undefined) {
-            if($.isPlainObject(settings[name])) {
-              $.extend(true, settings[name], value);
-            }
-            else {
-              settings[name] = value;
-            }
-          }
-          else {
-            return settings[name];
-          }
-        },
-        internal: function(name, value) {
-          if( $.isPlainObject(name) ) {
-            $.extend(true, module, name);
-          }
-          else if(value !== undefined) {
-            module[name] = value;
-          }
-          else {
-            return module[name];
-          }
-        },
-        debug: function() {
-          if(!settings.silent && settings.debug) {
-            if(settings.performance) {
-              module.performance.log(arguments);
-            }
-            else {
-              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
-              module.debug.apply(console, arguments);
-            }
-          }
-        },
-        verbose: function() {
-          if(!settings.silent && settings.verbose && settings.debug) {
-            if(settings.performance) {
-              module.performance.log(arguments);
-            }
-            else {
-              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
-              module.verbose.apply(console, arguments);
-            }
-          }
-        },
-        error: function() {
-          if(!settings.silent) {
-            module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
-            module.error.apply(console, arguments);
-          }
-        },
-        performance: {
-          log: function(message) {
-            var
-              currentTime,
-              executionTime,
-              previousTime
-            ;
-            if(settings.performance) {
-              currentTime   = new Date().getTime();
-              previousTime  = time || currentTime;
-              executionTime = currentTime - previousTime;
-              time          = currentTime;
-              performance.push({
-                'Name'           : message[0],
-                'Arguments'      : [].slice.call(message, 1) || '',
-                'Element'        : element,
-                'Execution Time' : executionTime
-              });
-            }
-            clearTimeout(module.performance.timer);
-            module.performance.timer = setTimeout(module.performance.display, 500);
-          },
-          display: function() {
-            var
-              title = settings.name + ':',
-              totalTime = 0
-            ;
-            time = false;
-            clearTimeout(module.performance.timer);
-            $.each(performance, function(index, data) {
-              totalTime += data['Execution Time'];
-            });
-            title += ' ' + totalTime + 'ms';
-            if(moduleSelector) {
-              title += ' \'' + moduleSelector + '\'';
-            }
-            if($allModules.length > 1) {
-              title += ' ' + '(' + $allModules.length + ')';
-            }
-            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
-              console.groupCollapsed(title);
-              if(console.table) {
-                console.table(performance);
-              }
-              else {
-                $.each(performance, function(index, data) {
-                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
-                });
-              }
-              console.groupEnd();
-            }
-            performance = [];
-          }
-        },
-        invoke: function(query, passedArguments, context) {
-          var
-            object = instance,
-            maxDepth,
-            found,
-            response
-          ;
-          passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
-          if(typeof query == 'string' && object !== undefined) {
-            query    = query.split(/[\. ]/);
-            maxDepth = query.length - 1;
-            $.each(query, function(depth, value) {
-              var camelCaseValue = (depth != maxDepth)
-                ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
-                : query
-              ;
-              if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
-                object = object[camelCaseValue];
-              }
-              else if( object[camelCaseValue] !== undefined ) {
-                found = object[camelCaseValue];
-                return false;
-              }
-              else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
-                object = object[value];
-              }
-              else if( object[value] !== undefined ) {
-                found = object[value];
-                return false;
-              }
-              else {
-                module.error(error.method, query);
-                return false;
-              }
-            });
-          }
-          if ( $.isFunction( found ) ) {
-            response = found.apply(context, passedArguments);
-          }
-          else if(found !== undefined) {
-            response = found;
-          }
-          if(Array.isArray(returnedValue)) {
-            returnedValue.push(response);
-          }
-          else if(returnedValue !== undefined) {
-            returnedValue = [returnedValue, response];
-          }
-          else if(response !== undefined) {
-            returnedValue = response;
-          }
-          return found;
-        }
-      };
-
-      module.preinitialize();
-
-      if(methodInvoked) {
-        if(instance === undefined) {
-          module.initialize();
-        }
-        module.invoke(query);
-      }
-      else {
-        if(instance !== undefined) {
-          instance.invoke('destroy');
-        }
-        module.initialize();
-      }
-    })
-  ;
-
-  return (returnedValue !== undefined)
-    ? returnedValue
-    : this
-  ;
-};
-
-$.fn.dimmer.settings = {
-
-  name        : 'Dimmer',
-  namespace   : 'dimmer',
-
-  silent      : false,
-  debug       : false,
-  verbose     : false,
-  performance : true,
-
-  // whether should use flex layout
-  useFlex     : true,
-
-  // name to distinguish between multiple dimmers in context
-  dimmerName  : false,
-
-  // whether to add a variation type
-  variation   : false,
-
-  // whether to bind close events
-  closable    : 'auto',
-
-  // whether to use css animations
-  useCSS      : true,
-
-  // css animation to use
-  transition  : 'fade',
-
-  // event to bind to
-  on          : false,
-
-  // overriding opacity value
-  opacity     : 'auto',
-
-  // transition durations
-  duration    : {
-    show : 500,
-    hide : 500
-  },
-// whether the dynamically created dimmer should have a loader
-  displayLoader: false,
-  loaderText  : false,
-  loaderVariation : '',
-
-  onChange    : function(){},
-  onShow      : function(){},
-  onHide      : function(){},
-
-  error   : {
-    method   : 'The method you called is not defined.'
-  },
-
-  className : {
-    active     : 'active',
-    animating  : 'animating',
-    dimmable   : 'dimmable',
-    dimmed     : 'dimmed',
-    dimmer     : 'dimmer',
-    disabled   : 'disabled',
-    hide       : 'hide',
-    legacy     : 'legacy',
-    pageDimmer : 'page',
-    show       : 'show',
-    loader     : 'ui loader'
-  },
-
-  selector: {
-    dimmer   : '> .ui.dimmer',
-    content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
-  },
-
-  template: {
-    dimmer: function(settings) {
-        var d = $('<div/>').addClass('ui dimmer'),l;
-        if(settings.displayLoader) {
-          l = $('<div/>')
-              .addClass(settings.className.loader)
-              .addClass(settings.loaderVariation);
-          if(!!settings.loaderText){
-            l.text(settings.loaderText);
-            l.addClass('text');
-          }
-          d.append(l);
-        }
-        return d;
-    }
-  }
-
-};
-
-})( jQuery, window, document );
-
-/*!
  * # Fomantic-UI - Dropdown
  * http://github.com/fomantic/Fomantic-UI/
  *
diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json
index 489ca7b9b7..63d0b30218 100644
--- a/web_src/fomantic/semantic.json
+++ b/web_src/fomantic/semantic.json
@@ -22,7 +22,6 @@
   "admin": false,
   "components": [
     "api",
-    "dimmer",
     "dropdown",
     "form",
     "modal",
diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js
index c04bc6e863..06e4e97c48 100644
--- a/web_src/js/modules/fomantic.js
+++ b/web_src/js/modules/fomantic.js
@@ -5,6 +5,7 @@ import {initAriaFormFieldPatch} from './fomantic/form.js';
 import {initAriaDropdownPatch} from './fomantic/dropdown.js';
 import {initAriaModalPatch} from './fomantic/modal.js';
 import {initFomanticTransition} from './fomantic/transition.js';
+import {initFomanticDimmer} from './fomantic/dimmer.js';
 import {svg} from '../svg.js';
 
 export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
@@ -24,6 +25,7 @@ export function initGiteaFomantic() {
   };
 
   initFomanticTransition();
+  initFomanticDimmer();
   initFomanticApiPatch();
 
   // Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
diff --git a/web_src/js/modules/fomantic/dimmer.js b/web_src/js/modules/fomantic/dimmer.js
new file mode 100644
index 0000000000..f434e1ca59
--- /dev/null
+++ b/web_src/js/modules/fomantic/dimmer.js
@@ -0,0 +1,29 @@
+import $ from 'jquery';
+import {queryElemChildren} from '../../utils/dom.js';
+
+export function initFomanticDimmer() {
+  // stand-in for removed dimmer module
+  $.fn.dimmer = function (arg0, $el) {
+    if (arg0 === 'add content') {
+      const existingDimmer = document.querySelector('body > .ui.dimmer');
+      if (existingDimmer) {
+        queryElemChildren(existingDimmer, '*', (el) => el.remove());
+        this._dimmer = existingDimmer;
+      } else {
+        this._dimmer = document.createElement('div');
+        this._dimmer.classList.add('ui', 'dimmer');
+        document.body.append(this._dimmer);
+      }
+      this._dimmer.append($el[0]);
+    } else if (arg0 === 'get dimmer') {
+      return $(this._dimmer);
+    } else if (arg0 === 'show') {
+      this._dimmer.classList.add('active');
+      document.body.classList.add('tw-overflow-hidden');
+    } else if (arg0 === 'hide') {
+      this._dimmer.classList.remove('active');
+      document.body.classList.remove('tw-overflow-hidden');
+    }
+    return this;
+  };
+}